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.
← Kembali Ke Daftar Pelajaran JavaScript