Debugging Javascript

Gambar dibawah dicomot dari http://blog.morrisjohns.com/javascript_closures_for_dummies_files/fordummies.jpg

Javascript adalah bahasa scripting yang handal yang berjalan pada sisi client. Dengan adanya bahasa Javascript ini, bisa mempercepat aplikasi web yang dibangun. Kenapa? Contohnya adalah ketika kita membuat aplikasi untuk registrasi anggota suatu web.

Dengan Javascript, validasi kita lakukan pada sisi client, sehingga nilai yang tersimpan pada text-box tidak perlu dikirim ke server dan divalidasi pada server dan hasil validasi dikembalikan lagi ke client.

Contoh, saya memiliki sebuah text-box yang harus diisi dan tidak boleh kosong. Tanpa Javascript, saya harus mengirimkan isi text-box tersebut ke server dan aplikasi di server akan memeriksa isi dari text-box tersebut dan jika nilai dari text-box tidak valid, maka server akan mengirimkan kembali ke client.

Seperti kita lihat pada gambar diatas, pengguna mengentry data pada komputer client dan setelah data selesai dientry, pengguna memerintahkan komputer client untuk mengirimkan data tersebut ke web server. Web server menerima data yang dikirim dari komputer client dan mem-validasinya. Jika terdapat kesalahan, web server akan mengirimkan pesan eror kembali dari ke komputer client.

Sungguh proses yang memakan waktu bukan? Apalagi data yang dikirimkan berukuran lumayan besar dan web server berada pada lokasi yang sangat jauh dari komputer client.

Dengan menggunakan Javascript, proses ini dipesingkat menjadi:

Seperti kita lihat pada gambar diatas, pengguna mengentry data pada komputer client dan setelah data selesai dientry, pengguna memerintahkan komputer client untuk mengirimkan data tersebut ke web server. Sebelum data dikirim ke server, komputer client akan memeriksa setiap entry data yang dimasukkan dan jika terdapat kesalahan entry, pesan error langsung ditampilkan ke pengguna. Setelah semua data telah valid, komputer client akan mengirimkan data tersebut ke server.

Analogi lebih sederhananya adalah seperti ini:

Misalkan ada orang tua yang kehilangan anaknya, dan anak tersebut berada di Jakarta sedangkan orangtuanya di Medan. Misalkan anak tersebut sekarang tinggal di panti asuhan dan ada seorang petugas panti asuhan yang akan mengirimkan anak tersebut. Dari pada seorang demi seorang anak di kirimkan dari Jakarta ke Medan dan ciri-ciri setiap anak yang hilang tersebut di periksa di Medan, lebih baik ciri-ciri anak dikirimkan ke Jakarta dan diperiksa di Jakarta akan lebih cepat bukan?

Salah satu faktor yang membuat orang malas mempelajari Javascript adalah susahnya untuk mendebug program yang disertai dengan Javascript. Untuk halaman html yang kita jalankan pada local, alias tidak menggunakan web server, kita bisa menggunakan text editor yang sudah dilengkapi dengan fitur debugging seperti EditPlus.

Namun, jika file Javascript yang kita gunakan telah di upload ke server, maka aplikasi text editor kurang mantap untuk digunakan.

Untuk itu kita akan mempelajari bagaimana cara mendebug program dengan menggunakan Javascript. Untuk mendebug program ini kita membutuhkan bantuan web browser IE 6. Kenapa harus IE? Karena dari ketiga browser yang saya coba Yaitu IE 6, Firefox 2.0 dan Opera 8.0, hanya IE lah yang menampilkan adanya error pada Javascript dan error tersebut ditampikan pada side bar.

Lihat pada status bar browser IE diatas. IE memberi tahu jika terdapat error yang terjadi pada web kita. Dobel klik Icon error tersebut untuk melihat pesan error lebih detail.

Namun pesan error diatas tidak memberi penjelasan berarti bagi kita. Kita tidak tahu letak dimana kode Javascript kita error.

Untuk keperluan debugging ini, Microsoft Corp telah memberikan sebuah tools yaitu Microsoft Script Debugger. Download tools tersebut dari sini. Kemudian install tools tersebut pada komputer kamu.

Setelah itu buka IE kamu dan klik menu Tools, Internet Options, pilih tab Advanced, pada bagian Browsing, hilangkan centang pada option Disable Script Debugging(Internet Explorer) dan Disable Script Debugging(other).

Selamat ber-Javascript ria..