Fire Bug

Firebug adalah salah satu pluggin Firefox yang harus ada bagi seorang developer web. Dengan firebug kamu dapat mengedit, mendebug, dan memonitor CSS, HTML, dan JavaScript secara live, tampa harus kembali ke file editor anda. Adapun fitur fitur yang dimiliki oleh firebug adalah

Dapat menampilkan HTML dalam bentuk yang enak dibaca. Maksud nya sudah di atur formatnya dalam sebuah colapsible tree. hal ini dapat membantu kita dalam mendebug susunan tree HTML kita. Kita juga dapat ngedit kode htmlnya secara langsung.
Ada sebuah inspector, dimana kita bisa melihat style, dan komponen dengan mengklik komponen tersebut. Kita juga dapat mengedit style dan komponen tersebut.
Struktur DOM, Ini adalah fitur yang menampilkan seluruh komponen DOM pada browser. Otomatis kita bisa ngeliat semua fariabel dan fungsi yang ada di halaman tertentu
Console. INI adalah bagian terpenting yang selalu kita monitoring jika kita sedang membuat aplikasi yang menggunakan javascript. Kita dapat melihat error, XHR request dan response. Selain itu, ada panel untuk running script, jadi kita bisa mengeksekusi script tertentu dari firebug menggunakan script/fungsi yang ada di web.

Pada kesempatan kali ini kita akan membahas 4 topik tentang penggunaa firebug

1. Instalasi dan penggunaan firebug

Firebug adalah sebuah pluggin jadi anda dapat menginstallnya seperti anda menginstall pluggin firefox yang lain. Firebug bisa di dapatkan di http://getfirebug.com/. Setelah install maka restart lah webbrowser anda. untuk menggaktifkannya anda bisa menekan tombol serangga di pojok kanan bawah.

Cara Aktifasi Firebug, cukup dengan mendouble click iconya

Tampilan page HTML dalam

bentuk tree yang mudah di lihat

Monitor semua koneksi dan kecepatan stuff web anda

Pada panel firebug terdapat 5 tab utama yaitu console, HTML, CSS, Script, dan net. Console di gunakan untuk melihat aktifitas debuging yang terjadi, HTML untuk melihat code HTML yang di load, Css untuk melihat kode CSS yang di load, script juga untuk melihat code javascript yang di load. Panel Net adalah untuk melihat apasaja yang website kita panggil dan bagaimana urutan pemanggilan, status dan kecepatanya.Ketiga gambar diatas merupakan basic penggunaan dari firebug yaitu kemudahan dalam melihat status yang terjadi di website kita.

2. HTML DOM Inspector dan Modifikasi HTML element

Tombol Inspect element

Salah satu fitur penting yang ada di frebug adalah HTML DOM Inspector, di mana firebug dapat melihat elemen-elemen tertentu dari web kita secara lengkap, baik dari segi code html maupun css tampa harus mencarinya satu persatu. cukup dengan meng klik tombol inspect (tombol kedua berlambang pointer biru, pojok kiri atas) atau dengan mengklik kanan object yang mau kita inspect.
Selain hanya melihat kita juga dapat melakukan editing terhadap tree html yang ada. Cukup dengan mengklik kanan element tree pada panel html firebug maka akan terdapat berbagai macam piliha aksi yang dapat dilakukan mulai dari edit, copy dan delete element tersebut.

Edit website element

Gampang bukan? dari hasil inspeksi tersebut bisa kita lihat apasaja style css yang ada, event-event apa saja yang terjadi pada element itu. jika kita mengubahnya menggunakan javascript maka bita bisa meng-log event yang terjadi dll.. anda masih bisa meng explorasi fitur-fitur yang ada.. banyak sekali fitur2 yang belum dibahas.

3. CSS Inspector dan Modifikasi CSS

Css kadang-kadang selalu menyusahkan programmer, dengan bantuan firebug programmer terselamatkan. kita dengan mudahnya melakukan perubahan-perubahan serta inspeksi terhadap sebuah style. perhatikan gambar berikut: