Home » Computers & Electronics

Firebug: Debugging Tool untuk para Web Developer dan Designer

Ranked #76,778 in Computers & Electronics, #1,180,849 overall | Donates to Squidoo Charity Fund

Sulit mendebug HTML, CSS, atau javascript?

Jika Anda adalah web developer atau web designer, tentunya pernah mengalami kesulitan dalam mendebug kode yang Anda buat, terutama kode HTML, javascript, dan CSS karena ketiganya diinterpretasi langsung oleh web browser seperti Mozilla Firefox dan Internet Explorer. Memang ada banyak IDE yang menyediakan fitur pemeriksaan kode seperti misalnya Dreamweaver, tapi pemeriksaan tersebut dilakukan sebelum kode dijalankan. Tentunya akan lebih menyenangkan kalau kode yang kita buat diperiksa sambil dijalankan.
Firebug adalah sebuah add-on pada Mozilla Firefox yang dapat digunakan untuk mengatasi masalah tersebut. Dengan FIrebug, Anda dapat memeriksa kesalahan pada kode langsung di browser Firefox.

New RSS: Add your blog

Make your own RSS module. 1. Add to your lens. 2. Paste any RSS (xml) link location into the module. 3. Select how often you want it to update. 4. Boom! Customized feeds for your topic.

Download dan install Firebug

Perhatian: jika Anda masih memakai Firefox di bawah versi 3.0, sebaiknya upgrade dahulu Firefox Anda ke versi 3.0 atau lebih.
Untuk mendownload Firebug, buka link ini pada Mozilla Firefox Anda. Kemudian klik pada tulisan "Add to firefox". Setelah itu Firefox akan mendownload dan menginstall add-on tersebut. Setelah selesai, restart Firefox Anda.

Mulailah Mendebug

Setelah proses instalasi berhasil, pada Firefox akan muncul submenu baru di bawah menu Tools. Untuk membuka Firebug, pilih menu Tools->Firebug->Open Firebug. Pada bagian bawah browser panel Firebug akan muncul.

Mendebug HTML dan CSS

Pada panel Firebug, pilih tab HTML. Di panel sebelah kiri akan ditampilkan kode HTML dari halaman yang sedang Anda buka dalam struktur pohon. Jika Anda mengklik salah satu elemen HTML, pada panel sebelah kanan Anda dapat melihat style CSS yang berlaku untuk elemen tersebut.
Tombol "Inspect" yang terletak di sudut kiri atas panel FIrebug adalah tombol yang paling berguna untuk mendebug HTML. Dengan tombol ini kita dapat melihat kode HTML pada elemen yang kita lihat di browser. Caranya tekan tombol "Inspect", kemudian gerakkan mouse di atas elemen yang ingin kita lihat, maka kode HTML yang berada di panel Firebug akan ikut berpindah ke elemen yang sedang kita sorot.
Anda bahkan dapat langsung mengedit kode HTML dan CSS yang sedang tampilkan, caranya dengan mendouble-klik pada tulisan yang ingin edit. Namun perlu diingat bahwa perubahan yang Anda buat tidak langsung mengubah source code yang terdapat di server, jadi jangan lupa untuk mengedit kode di server setelah Anda melakukan uji coba di Firebug.

Mendebug javascript

Untuk mendebug javascript, Anda harus mengaktifkan fitur ini terlebih dulu. Caranya buka tab Console. Di panel akan diberikan 3 buah checkbox: Console, Script, dan Net. Masing-masing berkorespondensi dengan ketiga tab pada Firebug.

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 atau 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.

P.S.: Jika artikel ini berguna bagi Anda, jangan lupa untuk memberikan rating :)

Pesan Sponsor

Buku-buku pemrograman web

Komentar

submit

Reply

Alecrey Aug 3, 2009 @ 2:02 pm | delete

"....Namun perlu diingat bahwa perubahan yang Anda buat tidak langsung mengubah source code yang terdapat di server, jadi jangan lupa untuk mengedit kode di server setelah Anda melakukan uji coba di Firebug...."

Bang untuk edit kode di server tu gimana caranya? Aku novice niy... Dah dua hari aku mainin tu kecoak, tapi tetep aja ga tau caranya..

Klo berkenan tolong post ke creycool@yahoo.com yah, tengkyu ^_^