Skip to content

Firebug : Making JavaScript Debugging Easier

31 December 2007

Firebug merupakan Add-Ons besutan mozilla yang terintegrasi dengan browser firefox. Dengan Tool ini maka kita dapat melakukan debug javascript, edit dan monitor HTML serta CSS.

Sedikit share pengalaman, dahulu sebelum menggunakan tool ini, untuk melakukan debug javascript saya biasa menggunakan alert. Setiap variabel yang ingin dicheck value, atau hasil eksekusi baris kode tertentu, maka alert selalu menemani dibaris kode sebelum atau selanjutnya. Terlebih ketika saya sudah mulai intens menggunakan AJAX, yang notabene harus melakukan check parameter yang dikirimkan ke server dan juga hasil responsenya. Dengan menggunakan alert, bikin capee deehh.

Kini dengan Firebug, saya bisa menghemat banyak waktu.

1. Kode javascript bisa didebug dengan mudah, saya tinggal set breakpoint dibaris kode tertentu (tab script) dan lihat dibagian watch, expressi yang ingin check.
2. Error javascript bisa langsung terlihat di tab console tanpa perlu buka menu tool–>error console lagi😀
3. Bagian tab console adalah bagian favorite saya untuk mengecek parameter dan response AJAX. Very nice, karena parameter yang dikirimkan akan ditampilkan dengan dipecah perbaris untuk lebih mudah membacanya.
4. Untuk mengepaskan layout dan beberapa setting property HTML dan CSS, maka bisa dilakukan inline editing dan hasilnya akan tampak langsung dibrowser. Jika sudah pas, maka saya baru ganti value yang sebenernya di kode HTML atau CSS nya. Waktu yang dihemat cukup banyak, karena tidak perlu balik ke source, edit, save dan preview. Masih belum pas, balik lagi dst. Dengan editing inline ini maka akan lebih efisien. Kecuali apabila web harus compatible dibeberapa browser, maka harus juga melakukan test preview dibrowser lain.

Ada banyak hal lain yang bisa dilakukan dengan firebug ini, terlebih apabila dikombinasikan dengan add-ons lainnya seperti WebDeveloper. Saya sendiri sampai saat ini cukup puas dengan firebug saja, karena penggunaanya lebih banyak di JavaScriptnya sehingga addons webdeveloper lebih banyak ngaggurnya😀

Untuk melakukan install, Anda bisa download di sini. Bisa juga surf ke webiste mozilla dan search untuk firebug.

Installasinya cukup simpel, tinggal open file firebugxx-current.xpi tsb di firefox. Ikuti saja instruksi yang ada dilayar.
Setelah selesai tekan F12 pada keyboard Anda dan Click enable untuk mengaktifkan addons ini. Next tinggal tekan F12 lagi untuk menampilkan atau menyembunyikan jendela firebug.

Sebagai informasi, pengguna non firefox yang ingin menggunakan firebug tidak perlu kecewa karena Anda dapat mendownload versi yang tidak terintegrasi dengan browser yaitu dalam bentuk source javascript yang harus Anda include.

Sebagai penutup, bagi Anda programmer web dengan browse mozilla firefox, khususnya yang sering ‘bermain’ dengan javascript maka maka saya recommend untuk menginstall dan mencobanya sekarang juga.

2 Comments leave one →
  1. 1 January 2008 12:44 am

    Firebug is the greatest thing that happened to JavaScript ever. I have also written about Firebug in my WebSq blog. If you are interested, you can read that also, and put in your comments.

  2. krisna permalink
    8 January 2009 9:08 pm

    kk
    w mo nanya
    klo script travian game tuh
    koq cuma tampilan nya duank yag berubah
    g’?
    eTernal
    ato e save selamany
    padhl dah w ganti integernya
    ato car w salah ya
    jdi gman kk??
    thaxzzz

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: