Mindset Debugging

Pernah ngerjain bug sampe 3 jam terus baru sadar typo huruf di nama variable? Atau panik liat error long stack trace dan langsung Google "error xxx" tanpa…

Pernah ngerjain bug sampe 3 jam terus baru sadar typo huruf di nama variable? Atau panik liat error long stack trace dan langsung Google "error xxx" tanpa baca pesannya dulu? Itu debugging tanpa metode. Senior developer beda dari junior bukan karena nulis kode tanpa bug — tapi karena debug-nya sistematis + cepat. Junior 3 jam stuck = senior 30 menit beresin. Skill yang bisa dipelajari, bukan bakat.

💡 Code 90% reading, 10% writing. Debugging = bagian besar dari "reading" itu. Mau jadi developer hebat? Investasi belajar debug methodology lebih impactful daripada belajar framework keren. Bug muncul di tiap project — cara handle-nya yang bedain level developer.

Debugging adalah proses menemukan dan memperbaiki bug (kesalahan) dalam kode. Ini bukan hanya skill teknis — ini adalah cara berpikir.

Bug Itu Normal

Setiap developer — dari junior sampai senior — menulis kode yang mengandung bug. Perbedaannya bukan di jumlah bug yang ditulis, tapi di seberapa cepat dan sistematis mereka menemukannya.

Prinsip Dasar Debugging

1. Reproduksi Dulu

Sebelum memperbaiki bug, kamu harus bisa mereproduksi (memunculkan kembali) bug tersebut secara konsisten.

❌ "Aplikasi suka error kadang-kadang"
✅ "Klik tombol Submit saat field email kosong → muncul TypeError"

Pertanyaan kunci:

Kapan bug terjadi? (step by step)
Di mana errornya? (halaman, komponen, fungsi)
Apa yang seharusnya terjadi vs yang terjadi?
Apakah bisa direproduksi setiap kali?

2. Isolasi Masalah

Persempit area masalah. Jika bug terjadi di halaman dengan 10 komponen, cari tahu komponen mana yang bermasalah.

// Teknik isolasi: comment out bagian kode
// Jika bug hilang → bagian yang di-comment adalah sumber masalah

// function processData(data) {
//   const filtered = filterData(data);   // ← masalah di sini?
//   const sorted = sortData(filtered);    // ← atau di sini?
//   const formatted = formatData(sorted); // ← atau di sini?
//   return formatted;
// }

3. Baca Error Message

Error message adalah petunjuk pertama dan paling berharga. Banyak developer baru langsung panik melihat error tanpa membacanya.

TypeError: Cannot read properties of undefined (reading "name")
    at UserProfile (UserProfile.jsx:15:23)
    at renderWithHooks (react-dom.js:1234)

Informasi yang ada:

Jenis error: TypeError
Pesan: Mencoba akses .name dari undefined
Lokasi: UserProfile.jsx, baris 15, kolom 23
Stack trace: urutan pemanggilan function

4. Hipotesis & Verifikasi

Debugging yang baik mengikuti metode ilmiah:

Observasi: apa yang terjadi?
Hipotesis: mengapa bisa terjadi?
Eksperimen: cek apakah hipotesis benar
Kesimpulan: perbaiki berdasarkan temuan

// Observasi: user.name adalah undefined
// Hipotesis 1: data belum di-fetch
console.log("User data:", user);  // → cek

// Hipotesis 2: API mengembalikan format berbeda
console.log("API response:", response.data);  // → cek

// Hipotesis 3: typo di nama property
console.log("Keys:", Object.keys(user));  // → cek!

5. Rubber Duck Debugging

Jelaskan masalah kamu secara verbal — ke teman, ke boneka bebek, atau ke diri sendiri. Proses menjelaskan seringkali membuat kamu menemukan jawabannya sendiri.

Anti-Pattern Debugging

Hindari kebiasaan buruk ini:

Anti-Pattern	Masalah
Mengubah kode secara acak	Bisa menambah bug baru
Tidak membaca error message	Membuang petunjuk paling jelas
Tidak bisa mereproduksi	Tidak bisa memverifikasi fix
Langsung tanya tanpa riset dulu	Tidak belajar dari proses
Malu debugging lama	Senior juga butuh waktu

Tools Debugging

Di pelajaran-pelajaran berikutnya kita akan membahas:

Console methods — lebih dari sekedar console.log
Chrome DevTools — tool debugging bawaan browser
Breakpoints — pause eksekusi di baris tertentu
Network tab — debug API calls
React DevTools — debug khusus React

🎭 Analogi sehari-hari

Debugging tanpa metode = dokter yang langsung kasih obat tanpa diagnosis. Demam? Kasih paracetamol! Sakit perut? Kasih antasid! Random + sering salah. Debugging sistematis = dokter dengan metode klinis: gejala → anamnesa → tes lab → diagnosis → treatment. Lebih lambat awalnya, tapi akurat + tahan lama. Sama: random console.log everywhere = nutup gejala. Sistematis = solve root cause.

⚠️ Jebakan yang sering ditemui

Ubah kode random sambil "harap-harap" = tambah bug baru. Hipotesis dulu, baru ubah
Skip baca error message = buang petunjuk paling jelas. Stack trace nunjuk file + line + cause
Asumsi bug di tempat yang lo curigai = buang waktu. Verifikasi dengan log/breakpoint dulu
Gak bisa mereproduksi tapi tetep "fix" = ngarang. Wajib reproduce dulu sebelum fix
Malu debug lama = senior juga butuh jam buat bug rumit. Yang ngebedain: methodology, bukan speed instan

TL;DR: Debugging = skill foundational, bedain junior dari senior. Methodology: (1) Reproduce konsisten, (2) Isolasi area masalah, (3) Baca error message + stack trace, (4) Hipotesis + verifikasi (metode ilmiah), (5) Rubber duck talk. Hindari random change, skip error message, "fix" tanpa reproduce. Tools: console method, DevTools, breakpoints, framework devtools. Bug normal — yang ngebedain: cara handle.

Mindset Debugging — Debugging