Di postingan kali ini saya akan coba menampilkan beberapa tools yang berguna sebagai debuger dan profiler JavaScript yang tersedia untuk beberapa web browser. Web browser yang saya coba yaitu Mozilla Firefox 3.5.3, Internet Explorer 8, Google Chrome 4 dan Safari 4.0 yang saya jalankan di atas Windows 7 RC.
Berikut detail dari masing-masing web browser:

Firefox 3.5.3
Untuk web browser ini (dan juga turunannya seperti Flock) kita bisa menggunakan Firebug. Bagi web developer, Firebug memang tools yang wajib terpasang di web browser ini. Firebug sendiri hadir sebagai ekstensi dari web browser ini, jadi untuk menggunakan tools ini, artinya kita harus menginstal ekstensi tambahan yang bisa kita dapatkan dengan free di situs http://addons.mozilla.com. Cara instalasinya pun mudah. Kita bisa langsung menginstal via web atau diunduh dulu baru diinstal.

Fitur-fitur yang dimiliki Firebug banyak, di antaranya JavaScript console, script viewer/editor, DOM inspector, net profiler, script profiler. Firebug juga bisa diextend fiturnya, misal dengan menambahkan ekstensi FirePHP, FireCookie dll. Untuk menjalankannya bisa melalui menu Tools-Firebug-Open Firebug atau dengan menekan tombol F12.
Berikut screen capture-nya:

Internet Explorer 8
Di IE8 sudah terintegrasi sebuah tools yang namanya Developer Tools. Tools ini memang ditujukan untuk web development. Fitur yang dimiliki juga tidak jauh berbeda dengan yang dimiliki Firebug, seperti JavaScript console, script viewer/editor, DOM inspector, script profiler. Namun saat saya menjalankan profiling, tools ini jadi agak lemot dan kadang bahkan “Not responding”. Untuk menjalankannya bisa melalui menu Tools-Developer Tools atau dengan menekan F12. Berikut screen capture-nya:

Google Chrome 4
Web browser buatan raksasa Google ini merupakan web browser yang cukup banyak penggunanya meskipun kehadirannya belum terlalu lama. Chrome sendiri sudah memiliki tools yang kegunaannya untuk web development. Seperti di IE8, namanya juga Developer Tools. Dari dua tools yang ada di dua web browser di atas, tampilan developer tools yang dimiliki Chrome sepertinya lebih cantik . Fitur juga tidak terlalu berbeda dengan yang ada di atas. Untuk menjalankannya bisa dengan menekan tombol Ctrl+Shift+J. Berikut screen capture-nya:

Safari 4
Web browser buatan Apple Inc. ini menggunakan engine yang sama dengan digunakan oleh Chrome. Tampilan developer tools-nya sama dengan yang ada di Chrome, hanya namanya saja yang berbeda yaitu Web Inspector. Selain itu juga ada tambahan menu Database yang berisikan session, cookies, dan cache. Untuk menjalankannya bisa dengan menekan tombol Ctrl+Alt+I.
Berikut screen capture-nya:

Untuk Opera 10 juga memiliki developer tools sendiri, namanya DragonFly. Namum saat saya mencoba ternyata dia membutuhkan koneksi Internet dan kebetulan saya sedang offline jadi tidak bsa menggunakannya.