Cara Efektif Debugging Tanpa Hanya Mengandalkan console.log

console.log bukan satu-satunya alat debugging

Console.log adalah alat debugging pertama yang dipelajari hampir semua developer. Dan memang, untuk kasus sederhana, console.log sangat praktis. Tetapi untuk bug yang lebih kompleks, menumpuk console.log di seluruh kode malah membuat segalanya lebih membingungkan. Ada teknik yang lebih efektif.

1. Gunakan debugger statement

Daripada console.log di setiap baris, gunakan keyword debugger. Ketika browser menemukan baris ini dan DevTools terbuka, eksekusi akan berhenti tepat di sana dan kamu bisa memeriksa semua variabel di scope tersebut.

async function processOrder(orderId) {
  const order = await getOrder(orderId);
  debugger; // Eksekusi berhenti di sini
  const total = calculateTotal(order.items);
  return total;
}

2. Breakpoint di browser DevTools

Tanpa mengubah kode sama sekali, kamu bisa menambahkan breakpoint langsung di tab Sources di Chrome DevTools. Klik nomor baris di source code dan browser akan berhenti di sana saat kode dieksekusi. Ini berguna untuk kode yang tidak bisa kamu edit langsung.

3. Conditional breakpoint

Klik kanan pada breakpoint di DevTools dan pilih Edit breakpoint untuk menambahkan kondisi. Breakpoint hanya akan aktif ketika kondisi terpenuhi. Ini sangat berguna saat debugging loop dengan ribuan iterasi.

// Conditional breakpoint: berhenti hanya ketika index === 500
// Klik kanan breakpoint, Edit, ketik: index === 500

4. console yang lebih informatif

Kalau tetap pakai console, gunakan variannya yang lebih informatif.

// Tampilkan object dengan label yang jelas
console.log({ userId, orderData, total });

// Tampilkan sebagai tabel untuk array of objects
console.table(users);

// Kelompokkan log yang berkaitan
console.group('Order Processing');
console.log('Order ID:', orderId);
console.log('Items:', items);
console.groupEnd();

// Ukur waktu eksekusi
console.time('fetchUsers');
await fetchUsers();
console.timeEnd('fetchUsers');

5. Network tab untuk debugging API

Untuk bug yang berkaitan dengan request API, jangan hanya console.log response. Buka tab Network di DevTools untuk melihat detail lengkap: request headers, response headers, payload, status code, dan timing. Informasi ini jauh lebih lengkap dari yang bisa kamu log.

6. Rubber duck debugging

Teknik ini terdengar konyol tetapi sangat efektif. Jelaskan masalah yang kamu hadapi secara detail kepada seseorang atau bahkan benda mati seperti boneka bebek karet. Proses menjelaskan dengan kata-kata sering kali memaksa otakmu melihat asumsi yang salah dari sudut pandang baru.

7. Binary search debugging

Kalau kamu tidak tahu di mana bug terjadi dalam alur yang panjang, gunakan pendekatan binary search: tambahkan satu check di tengah alur. Kalau di tengah sudah salah, cari di paruh pertama. Kalau di tengah masih benar, cari di paruh kedua. Ulangi hingga menemukan sumbernya.

Kesimpulan

Kemampuan debugging adalah salah satu skill yang paling membedakan developer junior dan senior. Semakin beragam alat yang kamu kuasai, semakin cepat kamu bisa menemukan dan memperbaiki bug. Console.log tetap berguna, tetapi jadikan ia satu dari banyak alat, bukan satu-satunya.