Materi JavaScript 4
Debug JavaScript

oleh: Suryo Adhy Chandra, ST

Ilustrasi debug JavaScript dengan console

Debug adalah proses mencari tahu apakah kode berjalan dengan benar atau menemukan penyebab kesalahan pada program. Dalam JavaScript, salah satu alat debug paling sederhana adalah console yang ada di browser.

Console sangat berguna untuk melihat isi variabel, mengecek apakah fungsi terpanggil, dan membaca pesan error saat JavaScript tidak berjalan sesuai harapan.

1. Membuka console di browser

Untuk membuka console, klik kanan pada halaman web, pilih Inspect atau Inspect Element, lalu buka tab Console. Pada beberapa browser, console juga bisa dibuka dengan tombol F12 atau kombinasi Ctrl + Shift + I.

2. Menggunakan console.log()

Perintah console.log() digunakan untuk menampilkan pesan biasa di console. Ini sering dipakai untuk mengecek apakah kode sudah berjalan.

<script> console.log("Halaman berhasil dibuka"); let nama = "Budi"; console.log(nama); </script>

3. Menggunakan console.warn() dan console.error()

Selain pesan biasa, kita juga bisa menampilkan peringatan dan pesan error. Ini membantu membedakan jenis informasi yang muncul di console.

<script> console.log("Ini pesan biasa"); console.warn("Ini pesan peringatan"); console.error("Ini pesan error"); </script>

4. Contoh debug di dalam HTML

Contoh berikut membuat tombol yang memanggil fungsi JavaScript. Ketika tombol diklik, pesan akan muncul di console.

<!DOCTYPE html> <html> <head> <title>Debug JavaScript</title> </head> <body> <h1>Latihan Debug</h1> <button onclick="cekTombol()">Klik Saya</button> <script> function cekTombol() { console.log("Tombol berhasil diklik"); console.log("Fungsi cekTombol sedang berjalan"); } </script> </body> </html>

Demo console:

Setelah tombol diklik, buka console browser untuk melihat pesan debug.

5. Debug input kosong

Console juga bisa membantu kita mengecek isi input. Pada contoh ini, jika input masih kosong, JavaScript akan menampilkan peringatan.

<input type="text" id="nama" placeholder="Masukkan nama"> <button onclick="cekNama()">Cek Nama</button> <script> function cekNama() { let nama = document.getElementById("nama").value; if (nama == "") { console.warn("Input nama masih kosong"); } else { console.log("Nama yang dimasukkan: " + nama); } } </script>

Demo cek input:

Kesimpulan: gunakan console.log() untuk mengecek alur program, console.warn() untuk peringatan, dan console.error() untuk menandai kesalahan yang perlu diperbaiki.

6. Jenis-jenis error pada JavaScript

Ketika program tidak berjalan semestinya, penyebabnya biasanya masuk dalam tiga golongan. Mengenalinya mempercepat perbaikan, seperti dokter yang mengenali gejala sebelum memberi obat.

Pesan error di console selalu mencantumkan jenis error, penjelasan singkat, dan nomor baris. Biasakan membacanya dari atas; sering kali satu error di awal memicu banyak error lanjutan di bawahnya.

7. Contoh bug dan cara menemukannya

Perhatikan kode berikut. Tujuannya menghitung rata-rata dua nilai, tetapi hasilnya aneh. 

function rataRata(a, b) {
    return a + b / 2;
}
console.log(rataRata(80, 90));   // 125, seharusnya 85

Hasil 125 muncul karena pembagian dikerjakan lebih dulu daripada penjumlahan: 90 / 2 = 45, lalu ditambah 80. Untuk menemukan penyebabnya, kita tambahkan console.log di langkah-langkah antara, lalu memperbaikinya dengan tanda kurung. 

function rataRata(a, b) {
    console.log("a =", a, "b =", b);
    let jumlah = a + b;
    console.log("jumlah =", jumlah);
    return jumlah / 2;
}
console.log(rataRata(80, 90));   // 85

8. Alat bantu lain: debugger dan breakpoint

Selain console.log, browser memiliki tab Sources untuk menjeda program pada baris tertentu. Klik nomor baris untuk memasang breakpoint; saat program mencapai baris tersebut, ia berhenti dan kamu bisa melihat nilai semua variabel serta berjalan satu langkah demi satu langkah. Kamu juga bisa menuliskan kata kunci debugger; di dalam kode, dan browser akan berhenti di situ selama Developer Tools terbuka. Cara ini seperti memutar film dengan tombol jeda dan maju per bingkai.

9. Langkah sistematis saat menemukan bug

  1. Baca pesan error dan catat nomor barisnya.
  2. Ulangi masalah supaya kamu yakin kapan terjadinya.
  3. Persempit area: matikan sementara sebagian kode dengan komentar //.
  4. Cetak nilai variabel penting dengan console.log.
  5. Ubah satu hal pada satu waktu, lalu uji ulang.

10. Kesalahan yang sering terjadi

11. Ringkasan

Debug adalah keterampilan inti programmer. Kenali tiga jenis error, baca pesan di console, cetak nilai antara dengan console.log, dan manfaatkan breakpoint untuk menelusuri program langkah demi langkah.

12. Latihan

  1. Error jenis apa bila kamu lupa menutup tanda kurung pada console.log("halo"?
    Lihat jawabanSyntax error.
  2. Program berjalan lancar tetapi total belanja selalu salah. Jenis error apa ini?
    Lihat jawabanLogic error; rumus atau urutan perhitungannya keliru.
  3. Perbaiki: function rata(a,b,c){ return a+b+c/3; }
    Lihat jawabanreturn (a + b + c) / 3;
  4. Apa gunanya breakpoint dibanding console.log?
    Lihat jawabanBreakpoint menghentikan program di baris tertentu sehingga semua variabel bisa diperiksa dan dijalankan langkah demi langkah tanpa mengubah kode.
← Kembali Ke Daftar Pelajaran JavaScript