Cara Melakukan Debug Console, Javascript dan AJAX di Google Chrome

Bagi web developer, tool seperti firebug merupakan sebuah keharusan. Namun sangat disayangkan firebug ini hanya nyaman jika digunakan dari browser firefox. Lalu bagaimana dengan browser lain yang tidak support dengan firebug ? Mau tidak mau kita harus mengoptimalkan menggunakan tool debugging bawaan browser tersebut. Google chrome adalah salah satunya.

Sedikit flashback, berawal dari intensifnya melakukan coding ExtJS, ternyata Engine Javascript Firefox (Trace Monkey) lambat sekali. Semakin besar program ExtJS yang dibuat semakin berat rasanya. Berbeda jauh dengan chrome yang dibackup dengan engine V8, sangat ringan dan cepat. Lebih responsive dalam menjalankan aplikasi ExtJs.

Posting kali ini tentu saja akan membahas tool chrome ini, yang ternyata cukup mumpuni untuk beralih dari firebug. Let’s see.

Debug Console dan Javascript

• Buka  javascript console dari menu icon control current page->developer->Javascript console atau dengan menggunakan shortcut ctrl+shift+j atau ctrl+shift+i.

Menu Developer Chrome

• Setelah itu akan muncul layar seperti berikut

Jendela Debug Javascript

1. Click icon script
2. Pilih file javascript dari halaman web yang ingin kita debug pada combobox yang tersedia.
3. Jika kita ingin melakukan debug per baris, maka click pada nomor baris untuk mengeset breakpoint. Lalu jalankan web seperti biasa dan pada saat mengeksekusi kode yang diberi breakpoint ini akan berhenti (pause) dibaris tersebut.
4. Pada bagian ini, kita dapat melihat informasi breakpointnya yaitu scoping variable dan call stacknya.
5. Control eksekusi code selanjutnya bisa melalui icon yang terdapat pada point nomer 5 ini. Apakah ingin melanjutkan eksekusi langsung atau baris per baris (step over).
6. Terakhir adalah bagian console javascript, paling bawah. Console ini pun hampir sama dengan firebug hanya di chrome ini, sudah mendukung syntax hilighting, jadi lebih enak untuk bacanya. Silahkan tinggal bermain-main dengan code javascript diconsole ini.
   Pada contoh gambar diatas, breakpoint diset sesudah assign variable title. Jika kita ketik diconsole ‘title’ maka hasilnya adalah object component title.
   Tips : Untuk mencetak ke console dari kode javascript kita, chrome menggunakan fungsi console.log(), sama dengan firebug.

Debug Request Ajax

• Buka menu Developer Tools atau dengan shortcut ctrl+shift+i.

Jendela Developer Tools

1. Pada Jendela Developer Tools, click icon Resources. Pilih always enable pada opsi yang tersedia jika kita ingin senantiasa melakukan debug ajax pada web kita. Jika tidak, maka aktifkan temporary saja dengan memilih default Only enable for this session. Ingat mengaktifkan feature ini akan membuat load page lebih lambat, karena chrome akan mentrack resources  dari halaman web kita. Seperti css, gambar, javascript, waktu load, response time dsb.
2. Click tombol Enable resource tracking. Halaman web akan direfresh.

• Kemudian akan muncul jendela seperti berikut :

Jendela Debug Ajax

1. Pilih tab xhr untuk memulai debug request Ajax.
2. Jika kita melakukan request Ajax, maka akan terlihat dipanel sebelah kiri, ke url mana request ditujukan. Click salah satu request yang akan kita lihat.
3. Parameter data yang dikirimkan akan terlihat di jendela header. Contoh diatas, parameter yang dikirimkan adalah edit, action, title dan code, dengan menggunakan methode request POST.
4. Untuk melihat hasil/response dari server click tab Content.

Tips : Untuk menghentikan tracking resources ini, klik saja tanda centang biru samping kiri tulisan Sort by Response Time pada panel paling bawah jendela.

That’s all. Tampak familiar bukan ? Selebihnya tinggal kita explore feature lain dari Development Tools chrome ini, seperti Inspect element, profiling web untuk mengetahui berapa besar makan resource CPUnya dll.

Menurut gossip, Firefox versi 4 kemungkinan akan keluar dengan engine js yang lebih cepat. So, sementara ini terserah kita, apakah akan beralih dulu ke chrome untuk development sambil menunggu FF 4 keluar, atau tetap bertahan di FF versi sekarang.

Saya pribadi sih sudah jarang pakai firefox sekarang, satu-satunya alasan masih menggunakannya adalah 2 addonsnya download manager DownThemAll dan DownloadHelper, yang belum tersedia padanannya di chrome. Duh, kenapa saya jadi suka chrome ya, padahal sebelumnya i really hate that browser and love FF so much.

Ada tambahan atau pertanyaan ? Silahkan click link comment dibawah.

Selamat Mendebug