Debugging JavaScript

Penjelasan debugging

Error bisa saja terjadi jika terdapat kesalahan dalam penulisan code. Terkadang saat terjadi error, JavaScript tidak memberikan pesan error apapun sehingga kita tidak mengetahui bagian mana yang error.

Untuk itu kita harus mencari bagian yang error secara manual menggunakan beberapa tool atau alat. Kegiatan mencari bagian yang error dalam bahasa pemrograman disebut sebagai debugging dan alat untuk mencari error tersebut disebut sebagai debugger.

Debugger biasanya ada pada beberapa browser yang kita gunakan (Chrome, Firefox, IE) dan bisa diaktifkan atau dimatikan. Dengan debugger kita bisa melihat semua code yang ditulis dan bagian yang error.

Biasanya untuk mengaktifkan debugger cukup dengan menekan F12, tetapi tidak selalu begitu. Langkah lebih tepatnya bisa lihat pada bagian bawah halaman ini untuk masing-masing browser.

console.log() method

Jika browser yang kamu gunakan support debugging maka kamu bisa menggunakan console.log() method untuk melihat hasil dari code yang kamu tulis pada debugger window.

Hasil dari code di bawah ini tidak bisa dilihat pada browser window. Kamu harus menggunakan debugger window untuk melihat hasil dari code di bawah ini:

Code JavaScript 1:

<script>
a = 2;
b = 3;
c = a + b;
console.log(c);
</script>

Hasil code JavaScript 1:

Untuk bisa melihat hasil dari code console.log() method di atas, lakukan langkah berikut ini:

  1. Buka browser console (Chrome, IE, Firefox) dengan menekan tombol F12.
  2. Pilih [Console] tab.
  3. Lihat ada nilai dari variable [c] di sana.

Menentukan breakpoint

Breakpoint artinya adalah lokasi berhentinya code yang sedang berjalan.

Dengan memberikan breakpoint pada code yang ditulis maka kita bisa membagi code tersebut menjadi beberapa bagian dan menganalisa setiap bagiannya secara terpisah.

Titik breakpoint bisa ditentukan pada pada debugger window. Pada setiap titik breakpoint tersebut, program JavaScript akan berhenti dieksekusi dan kamu bisa menganalisa code yang sudah kamu buat sampai titik breakpoint tersebut.

Debugger keyword

Debugger keyword berfungsi sama seperti breakpoint keyword yaitu memberhentikan sementara program yang sedang berjalan (pause).

Syntax

debugger;

Lihat contoh di bawah ini:

Code JavaScript 2:

<script>
document.write("Selamat ");
debugger;
document.write("malam!");
</script>

Sebelum mencoba contoh di atas kamu harus mengaktifkan debugger dengan menekan F12. Kemudian jalankan code di atas.

Bila kamu mengaktifkan debugger saat loading code di atas maka code tersebut hanya akan dieksekusi sampai statement kedua. Untuk melanjutkan eksekusi code bisa dengan menekan F8.

Debugging tool

Berikut ini adalah beberapa cara untuk mengaktifkan debugging tool untuk beberapa browser yang umum digunakan:

Chrome

  1. Buka browser Chrome
  2. Pada menu, pilih tools
  3. Pilih developer tools
  4. Pilih Console tab

Firefox Firebug

  1. Buka browser firefox
  2. Buka halaman berikut ini: http://www.getfirebug.com
  3. Ikuti instruksi yang ada di sana untuk menginstal Firebug

Internet Explorer

  1. Buka browser IE
  2. Buka menu, pilih tools
  3. Pilih developer tools
  4. Pilih Console tab

Opera

  1. Buka browser Opera
  2. Buka halaman berikut ini: http://dev.opera.com
  3. Ikuti instruksi untuk menambahkan tombol Developer Console pada bagian toolbar

Safari Firebug

  1. Buka browser Safari
  2. Buka halaman berikut ini: http://extensions.apple.com
  3. Ikuti instruksi untuk menginstal Firebug lite

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>