Firebug : Nge-debug HTML, CSS, javascript

Salah satu "RAHASIA" para Web Developer dan Designer

Tentunya akan terasa sulit apabila nge-debug coding yang kita buat seperti halnya HTML, CSS, javascript karena ketiganya ini merupakan interprestasi langsung dari web browser Internet Explorer dan Mozilla Firefox. Banyak IDE (Integrated Development Environment) yang memberikan fitur pemeriksaan kode seperti Eclipse, Dreamweaver, Netbeans, JDeveloper dan lain-lain. Tapi dari banyaknya IDE itu, dilakukan pemeriksaan sebelum kode dijalankan berbeda halnya dengan Firebug karena IDE Firebug melakukan pemeriksaan kode sambil dijalankan. Dengan menggunakan Firebug kita dapat langsung memeriksa kesalahan kode pada Mozilla Firefox ataupun Internet Explorer.

Langkah-langkah sebelum nge-debug menggunakan Firebug :

1. Klik disini untuk upgrade Mozilla Firefox (bagi Anda yang masih menggunakan Firefox v 3.0 ataupun dibawahnya) ke versi diatasnya.
2. Klik disini untuk download Firebug, setelah itu klik pada tulisan "Add to Firefox". Kemudian Mozilla Firefox akan mendownload dan menginstall add-on tersebut. Setelah selesai, Firefox Anda akan merestart otomatis apabila tidak merestart otomatis silahkan Anda lakukan restart Firefox secara manual.

Waktunya nge-debug!!!

Setelah instalasi sukses, pada browser Mozilla Firefox akan muncul submenu baru dibawah menu Tools. Untuk membuka Firebug, pilih menu Tools >> Firebug >> Open Firebug atau dengan cara menekan F12 pada keyboard. Di bagian bawah browser akan muncul panel Firebug.




Nge-debug HTML dan CSS

Pada panel Firebug di bagian bawah, pilihlah tab HTML. Di panel sebelah kiri pada panel Firebug akan tampil kode HTML dari halaman yang sedang Anda buka dalam struktur tree (pohon). Jika Anda mengklik salah satu elemen HTML, pada panel Firebug di sebelah kanan Anda dapat melihat style CSS yang berlaku untuk elemen tersebut.
Tombol "Inspect" yang terletak di sudut kiri atas panel Firebug kalau tidak ketemu silahkan pakai cara mudah dengan memblock yang ingin di Inspect kemudian klik kanan lalu pilih Inspect Element. Inspect adalah tombol yang berguna untuk nge-debug HTML, dengan tombol ini kita dapat melihat kode HTML dan CSS pada elemen yang kita lihat di browser.
Anda juga dapat langsung mengedit kode HTML dan CSS yang sedang tampilkan, caranya dengan mendouble-klik pada tulisan yang ingin Anda edit. Dengan catatan bahwa perubahan yang Anda lakukan tidak langsung mengubah source code yang terdapat di server, jadi jangan lupa untuk mengedit kode di server setelah Anda melakukan uji coba di Firebug.

Nge-debug javascript

Untuk nge-debug javascript, Anda harus meng-enable-kan fitur Console, Script dan Net terlebih dahulu. Caranya buka tab Console, dipanel akan diberikan 3 buah checkbox : Console, Script, dan Net. Kalau tidak, silahkan Anda perhatikan gambar disampinasing-masing berkorespondensi dengan ketiga tab pada Firebug.

Fungsi fitur :

• Console akan memperlihatkan error yang terjadi saat browser membaca halaman web. Error yang diperlihatkan dapat dipilih melalui tombol "Options" yang terdapat di ujung kanan atas.

• Script mengizinkan Anda melakukan debugging pada javascript selayaknya debugging pada IDE. Anda dapat menambahkan Breakpoint pada kode javascript, melihat stack trace, dan mendebug kode selangkah demi selangkah dengan Step into

• Net memperlihatkan pertukaran pesan HTTP yang terjadi antara browser dengan web server. Anda dapat melihat pesan HTTP meliputi HTTP header, parameter-parameter GET dan POST, serta response dari web server. FItur ini sangat berguna bagi para pengembang AJAX yang ingin melihat jalannya pertukaran pesan. Pada tab Net juga disediakan fitur profiling, yaitu Anda dapat melihat waktu yang dibutuhkan untuk pengiriman pesan. Jika web Anda berjalan lambat, Anda dapat melihat di mana bottleneck terjadi (misalnya karena gambar atau file flash yang terlalu besar)

Ketiga pilihan di atas dapat diaktifkan untuk semua situs maupun untuk situs-situs tertentu saja. Caranya klik panah kecil di sebelah kanan tab, lalu pilh "Sites". Anda dapat menambahkan situs-situs mana saja yang ingin Anda debug, seperti "localhost" atau situs tempat hosting web yang Anda buat.


Sumber >> http://www.squidoo.com/firebug-untuk-web-developer

::: Silahkan Gunakan Facebook Comment, Jika Anda Belum Memiliki URL Blog!!! :::