Basic Of Firebug II, Javascript Debug

By popular demand 🙂 posting ini akan membahas soal Javascript debugging menggunakan Firebug.

Javascript debugging dalam arti sederhana adalah usaha untuk meresolve bug dalam javascript, so prequisites dalam post yang satu ini adalah memahami basic of Javascript tentunya 🙂

1. Tentu saja mendapatkan firebugnya, bisa didapat disini atau google for “firebug” yourself 🙂

2. Aktifkan settingan yang berhubungan dengan debugging firebugui

Lihat bagian setting yang diberi tanda lingkaran, aktifkan itu semua dengan men-check check boxnya dan menekan tombol Apply 🙂

Apakah mereka?

  • Console akan mengaktifkan JavaScript Console dimana kita bisa pakai untuk memanggil fungsi javascript secara langsung (berguna untuk debugging)
  • Script berguna untuk Java Script Debugging
  • Net berguna untuk mencatat alur request “HTTP” dari page yang bersangkutan (berguna untuk debug AJAX)

[Console]

Console sesuai dengan namanya berguna untuk menjalankan perintah javascript secara langsung. Pertama-tama buka console dengan menglick icon Firebug dan mengclick tombol console, akan muncul tab dibawah ini.

firebugconsoleClick ke tempat Input console, masukan perintah java-script

alert(' test ');

Maka sebuah alert box akan muncul.
Console ini berhubungan dengan halaman yang sedang aktif, sehingga kamu bisa menggunakan console untuk memanggil fungsi javascript di halaman yang aktif, misalnya terdapat fungsi bernama “validasiSubmit();” kamu tinggal mengetik pemanggil fungsinya di console

ValidasiSubmit();

Atau untuk kasus2 mengetes keberadaan ID dengan getElementById atau JQUERY selector 🙂

document.getElementById("namaelemen");

Test hasil dari JQUERY selector

$('#idelemen')

Dan masih banyak lagi yang bisa kamu lakukan di console, you name it 🙂

[Net]

Net berguna untuk melihat traffic HTTP yang terjadi dalam satu sesi page, sulit membayangkannya? dilihat saja… buka Firebug, click ke tab Net

firebugnet

Bisa dilihat dibagian paling kiri ada daftar halaman/file yang direquest saat itu, kamu bisa melihat image2 yang diminta dengan HTTP GET, ajax call yang diminta dengan HTTP POST, jumlah waktu yang diperlukan.

Dengan menglick tombol [+] di request, akan muncul Params, Headers dan Response.firebugnetresponse

  • Params adalah URL parameter yang di REQUEST. Misalnya http://azureru.com/index.php?arg=one Maka parameternya adalah “arg” yang bernilai “one”.
  • Headers adalah header dari RESPONSE yang diberikan oleh web-server biasanya berisi informasi MIME, Cache, Tanggal Modifikasi etc.
  • Response adalah isi dari RESPONSE itu sendiri. (Image, JSON, XML, HTML you name it!

Nah baru 2 point, I’ll write the other when I have the time 🙂

Advertisements

One comment

  1. ice · May 25, 2009

    woh.. ga bilang2 yang debug nya udah di posting….
    makasih tutorialnya sensei.. jadi ngerti dikit2.. 😀

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