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
- 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. 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.
- HTML DOM Inspector dan Modifikasi HTML 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.
- 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.
- Debuging Javascipt. Firebug juga membantu dalam proses mendebug javascript, kita dapat melihat bagaimana respon ajax yang kita lakukan, error message apa yang terjadi serta dapat melakuka fitur debuging yang advance sperti stack trace, watch dll.
0 komentar: