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,

firebug in action

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:

Internet Options

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:

ms script editor

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

By Galih Satriaji

Bookaholic, Workaholic. Chubby. That's me!

7 comments

  1. Trims infonya, dik Galih
    Terutama yang firefox
    Tapi kalo yang IE in dah pernah coba
    dulu waktu masih S1
    Males juga dulu terpaksa install Visual Studio

    eh cerita2 ttg JavaScript
    dulu in pernah punya impian semua dijavascriptkan
    alhasil buat algoritma apapun pake javascript
    ternyata cukup menyiksa juga
    apalagi pas belajar OOP-nya javascript 😛

  2. javascript emang menyebalkan, tapi tetep dibutuhin coz mau nggak mau beberapa client-side-processing harus ada (biasanya buat menghemat bandwith : nggak perlu load halaman baru). dulu waktu masih berkutat sama web, aku pernah punya idealis : nggak bakalan pake javascript! tapi akhirnya mau nggak mau pas KP pake javascript juga 😀
    tentang firebug, aku pernah pake buat inspect CSS-nya drupal, sangat membantu.
    brarti, javascript bisa didebug kan :-/
    soalnya bahasa yang sedang aku geluti (tuntutan profesi /:)) nggak bisa didebug. masio bukan bahasa pemrograman asli si, cuma PLPGSQL. debugnya pake return value dan exception. bener2 tricky :p

  3. #Kakak Aini:
    Sama-sama kakak Aini :p
    Hehehehek… karena penyiksaannya itulah aku jadi sangat respek pada programmer-programmer yang berhasil menelurkan Javascript toolkit macam DWR, Yahoo UI, dan Dojo.

    #Vendy:
    Javascript tidak bisa didebug adalah pendapatku waktu belum menemukan Firebug dan MS Script Editor buat IE 🙂

  4. you are my savior…
    gw cari2 debug js di IE, eh, dapet artikel lu.
    gw coba dulu men. kalo berhasil, hhmmmmm thx aja for sharingnya. :))

    (google searching membuktikan artikel lu urutan ke 5 dengan query : debugging javascript in internet explorer).

    good job men…

Leave a comment

Your email address will not be published. Required fields are marked *