Debugging Checklist

Checklist sistematis yang bisa kamu ikuti setiap kali menemui bug. Simpan halaman ini sebagai referensi!

Step 1: Reproduksi Bug

• Bisa kamu reproduksi bug secara konsisten?
• Catat langkah-langkah exact untuk memunculkan bug
• Bug terjadi di browser tertentu saja?
• Bug terjadi di ukuran layar tertentu?
• Bug terjadi hanya saat login / kondisi tertentu?

Contoh bug report yang baik:
1. Buka halaman /profile
2. Klik "Edit Profile"
3. Kosongkan field "Nama"
4. Klik "Simpan"
→ Expected: Tampilkan pesan validasi
→ Actual: TypeError di console, tombol disabled permanent

Step 2: Baca Error Message

• Buka Console (F12 → Console tab)
• Ada error merah? Baca tipe dan pesan error
• Cek stack trace — di file dan baris mana error terjadi?
• Error di kode kamu atau di library?

Step 3: Cek Network

• Buka Network tab → filter Fetch/XHR
• Semua API call berhasil (status 200)?
• Jika gagal: cek status code dan response body
• Data yang dikirim (request payload) benar?
• Data yang diterima (response) sesuai harapan?
• CORS error? Cek header Access-Control-Allow-Origin

Step 4: Inspeksi State

• console.log() variabel yang mencurigakan
• Nilai variabel sesuai harapan?
• Tipe data benar? (string vs number vs object)
• Null atau undefined di tempat yang tidak seharusnya?
• (React) Buka React DevTools → cek props dan state

Step 5: Isolasi Masalah

• Comment out kode untuk mempersempit area masalah
• Buat kode minimal yang mereproduksi bug
• Apakah bug muncul di component ini atau parent/child?
• Apakah bug muncul saat data tertentu saja?

Step 6: Cek Hal-hal Umum

JavaScript

• Typo di nama variabel atau property?
• Missing await pada function async?
• === bukan == untuk perbandingan?
• Array/object yang dimutasi langsung (bukan copy)?
• Event handler di-bind dengan benar?
• Dependency array useEffect lengkap?

CSS

• Inspect element → cek Computed styles
• Ada style yang di-override (strikethrough di Styles)?
• z-index conflict?
• Overflow hidden memotong konten?
• Flexbox/Grid alignment benar?

API

• URL endpoint benar?
• HTTP method benar (GET vs POST)?
• Headers benar (Content-Type, Authorization)?
• Request body format benar (JSON stringify)?
• Environment variable API URL benar?

Step 7: Gunakan Tools

// Quick debug dengan console
console.log({variabel});          // lihat nama + nilai
console.table(arrayData);         // tabel untuk array
console.trace("dari mana?");      // lihat call stack
console.time("label"); /*...*/ console.timeEnd("label"); // ukur waktu

// Breakpoint
debugger;  // pause di baris ini

// Conditional check
console.assert(kondisi, "Pesan jika false", {data});

Step 8: Cari di Internet

Jika masih stuck:

• Copy-paste exact error message ke Google
• Cek Stack Overflow — kemungkinan besar ada jawaban
• Cek GitHub Issues library yang digunakan
• Baca dokumentasi — mungkin ada yang terlewat

Step 9: Minta Bantuan

Jika sudah coba semua:

1. Jelaskan apa yang ingin dicapai
2. Jelaskan apa yang terjadi (error message, behavior)
3. Jelaskan apa yang sudah dicoba
4. Sertakan kode minimal yang mereproduksi masalah
5. Sertakan screenshot Console/Network jika relevant

Debugging Decision Tree

Bug ditemukan
├── Ada error di Console?
│   ├── Ya → Baca error message → cek lokasi di kode
│   └── Tidak → Cek Network tab → API bermasalah?
│       ├── Ya → Debug API (status code, request, response)
│       └── Tidak → Debug logic/UI
│           ├── Data benar tapi UI salah → CSS/rendering issue
│           └── Data salah → Trace alur data dari sumber
└── Bug intermittent (kadang muncul)?
    ├── Race condition → cek async/await, loading state
    ├── Memory leak → cek cleanup useEffect
    └── Cache issue → hard refresh (Ctrl+Shift+R)

Tips

1. Jangan debugging lebih dari 30 menit tanpa break — otak butuh istirahat
2. Git stash/branch sebelum eksperimen — agar bisa kembali ke state awal
3. Tulis test setelah fix bug — pastikan bug tidak kembali
4. Dokumentasikan bug yang sulit — membantu diri sendiri dan tim di masa depan
5. Setiap bug adalah pelajaran — catat apa yang dipelajari