Cara Debugging JavaScript dengan Console

Setiap developer pasti pernah menghadapi kode yang tidak berjalan sesuai harapan. Kemampuan debugging — menemukan dan memperbaiki bug — adalah salah satu skill terpenting yang harus dikuasai. JavaScript menyediakan objek console dengan berbagai method yang jauh lebih kaya dari sekadar console.log(). Artikel ini akan membahas teknik-teknik debugging yang akan menghemat banyak waktu kamu.

console.log() — Dasar yang Wajib Dikuasai

console.log() adalah method paling umum, tapi ada beberapa trik yang mungkin belum kamu ketahui:

// Log sederhana
console.log('Halo dunia!');
console.log(42, true, 'string', null); // Bisa multiple argumen

// Menggunakan label dengan objek
const pengguna = { nama: 'Andi', umur: 25, kota: 'Bandung' };
console.log('Data pengguna:', pengguna); // Tampil sebagai objek interaktif di DevTools

// Computed property name — trik untuk label otomatis
const harga = 50000;
const diskon = 0.1;
console.log({ harga, diskon }); // { harga: 50000, diskon: 0.1 }

// Template literal untuk pesan yang informatif
console.log(`Harga setelah diskon: Rp ${(harga * (1 - diskon)).toLocaleString('id-ID')}`);

// CSS styling di console (hanya browser)
console.log('%cPerhatian!', 'color: red; font-size: 20px; font-weight: bold;');
console.log('%cBerhasil!', 'color: green; background: #e8f5e9; padding: 4px 8px;');

console.error(), console.warn(), console.info()

Gunakan method yang sesuai konteks untuk memudahkan filtering di DevTools:

// Tampil dengan ikon X merah — untuk error
console.error('Gagal mengambil data dari API!');
console.error('Detail error:', new Error('Network timeout'));

// Tampil dengan ikon segitiga kuning — untuk peringatan
console.warn('Fungsi ini sudah deprecated, gunakan versi baru.');
console.warn('Token akan kadaluarsa dalam 5 menit.');

// Tampil dengan ikon biru — untuk informasi
console.info('Aplikasi berhasil dimulai.');
console.info('Versi:', '2.1.0', '| Environment:', 'development');

// Di DevTools, kamu bisa filter berdasarkan level ini menggunakan dropdown "Levels"

---

Artikel ini ditampilkan sebagian. Untuk pembahasan selengkapnya, beserta contoh dan langkah detailnya, Anda dapat membacanya pada sumber aslinya:

Cara Debugging JavaScript dengan Console

Tutorial pemrograman dan tools developer lainnya juga tersedia di dhiecoderweb.com.