Javascript Debugger

Jika saya ditanya, diantara bahasa pemrograman yang banyak itu, bahasa apa yang paling sering dipakai sekaligus paling saya benci, maka saya akan menjawab dengan tegas: Javascript! Saya benci bahasa ini karena, (1) Bekerja di sisi client, sehingga kita harus waspada dengan berbagai macam browser pengolah Javascript yang mungkin akan digunakan oleh pengguna, katakanlah Internet Explorer yang paling populer, Mozilla Firefox yang digandrungi para developer, Safari, Flock, Netscape, Konqueror, Galeon, dan sederetan browser yang entah apa namanya. Biarpun sudah ada standar Javascript dari W3C, namun tetap saja banyak hal yang membuat antar browser itu saling tidak kompatibel satu sama lain. Suck…

Alasan ke (2), Javascript tidak bisa di-debug! Ini yang membuatku paling membenci bahasa ini. Sudah punya banyak standar dan gaya struktur program, tak bisa didebug lagi. Bagaimana kita bisa mengetahui aliran dan nilai setiap variabel per baris-baris kode jika tidak bisa didebug?

Untunglah, hari ini masalah teratasi secara lengkap. Beberapa waktu yang lalu, saya menemukan cara untuk debugging Javascript di Firefox dengan menggunakan extension Firebug. Penggunaan Firebug cukup simpel. Download dan install extension ini. Kemudian restart Firefox Anda. Setelah itu buka halaman yang akan di-debug pada tab baru. Klik Tools – Firebug, dan pastikan submenu Disable Firebug tidak dicentang (non-aktif). Lihat screenshot dibawah ini,

Nah, untuk membuat breakpoint, tinggal klik saja baris nomor ke berapa. Ada tiga fitur debugging yang bisa dimanfaatkan (lihat pojok kiri bawah), yaitu Step Over, Step Into, dan Step Out. Tentu saja tersedia watches untuk melihat nilai setiap variabel. Sangat powerfull dan menyelamatkan saya dari mimpi buruk dalam menulis Javascript.

IE Debugger In Action!
Ah, ternyata, Internet Explorer yang sering menjengkelkan karena lemahnya mesin render dan ketidakstandaran Javascriptnya memiliki debugger yang sangat powerfull. Sekelas MS Visual Studio, yaitu Microsoft Script Editor. Tapi secara default, fitur ini dinonaktifkan oleh IE. Bagaimana mengaktifkannya, berikut langkah-langkahnya:

Klik Tools – Options dan pilih tab Advanced. Pastikan check box [Disable Script Debugging (Internet Explorer)] dan [Disable Script Debugging (Other)] non aktif. Lihat screen shot ini:

Restart Internet Explorer dan kini lihat di bawah menu View akan ada submenu baru, Script Debugger. Jika Open dipilih, jendela Microsoft Script Editor akan terbuka. Untuk memulai men-debug, pilih Break at Next Statement. Proses berikutnya kemudian akan masuk MS Script Editor. Debugger ini mewarisi semua kehebatan debugger MS Visual Studio 6. Lengkap beserta shortcutnya. Ada Step Into (F11), Step Over (F10), Step Out, hingga Step Into Line. Jauh lebih kaya daripada Firebug di Firefox. Cuma sayangnya, sepertinya fitur sangat bagus kurang terekspose dengan baik (Atau aku saja yang tidak tahu ya? 😀 ).

Ini dia gambar debugger IE yang sedang bekerja:

Mantab!! Selamat tinggal mimpi buruk dalam penulisan Javascript! :p