Breakpoints & Stepping

Breakpoints memungkinkan kamu menghentikan sementara eksekusi kode di baris tertentu, lalu memeriksa state aplikasi (variabel, call stack, dll). Ini jauh lebih powerful dari console.log.

Menambahkan Breakpoint

Via Sources Panel

1. Buka DevTools → tab Sources
2. Navigasi ke file JavaScript di panel kiri
3. Klik nomor baris untuk menambah breakpoint (titik biru muncul)
4. Jalankan aksi yang memicu kode tersebut
5. Eksekusi berhenti di breakpoint → sekarang kamu bisa inspect

Via Kode (debugger statement)

function hitungDiskon(harga, persen) {
  debugger;  // Eksekusi akan berhenti di sini
  const diskon = harga * (persen / 100);
  return harga - diskon;
}

Saat debugger dieksekusi dan DevTools terbuka, kode akan pause di baris tersebut. Jangan lupa hapus debugger sebelum deploy!

Panel Saat Paused

Saat eksekusi berhenti, kamu bisa melihat:

Scope

Semua variabel yang accessible:

• Local — variabel di function saat ini
• Closure — variabel dari closure
• Global — variabel global (window)

Scope:
├── Local
│   ├── harga: 100000
│   ├── persen: 20
│   └── diskon: undefined (belum dihitung)
├── Closure (outerFunction)
│   └── config: {tax: 0.1}
└── Global
    └── window: Window

Call Stack

Urutan function yang dipanggil sampai baris saat ini:

Call Stack:
├── hitungDiskon        ← kamu di sini
├── prosesCheckout
├── handleSubmit
└── (anonymous)

Klik pada item di call stack untuk melihat state di level tersebut.

Watch

Tambahkan ekspresi yang ingin kamu pantau:

Watch:
├── harga > 50000       → true
├── diskon              → undefined
└── typeof persen       → "number"

Stepping — Melangkah Melalui Kode

Setelah paused di breakpoint, gunakan tombol di toolbar:

function main() {
  const data = getData();     // F10 → skip, F11 → masuk ke getData
  const result = process(data); // F10 → skip, F11 → masuk ke process
  display(result);
}

• Step Over (F10): jalankan getData() tapi jangan masuk ke dalamnya
• Step Into (F11): masuk ke dalam getData() dan pause di baris pertama
• Step Out (Shift+F11): jika sudah di dalam getData(), keluar dan kembali ke main()

Conditional Breakpoints

Klik kanan pada nomor baris → Add conditional breakpoint:

// Hanya pause jika harga > 100000
harga > 100000

// Hanya pause untuk user tertentu
user.id === 42

// Hanya pause setelah iterasi ke-100
i > 100

Sangat berguna di dalam loop — menghindari pause di setiap iterasi.

Logpoint

Klik kanan nomor baris → Add logpoint. Ini seperti console.log tanpa mengubah kode:

// Logpoint expression:
"Harga:", harga, "Diskon:", diskon

Output muncul di Console tanpa menghentikan eksekusi.

DOM Breakpoints

Di Elements panel, klik kanan elemen → Break on:

• Subtree modifications — pause saat child berubah
• Attribute modifications — pause saat atribut berubah
• Node removal — pause saat elemen dihapus

Event Listener Breakpoints

Di Sources panel → Event Listener Breakpoints:

• Mouse → click, mousedown, dll
• Keyboard → keydown, keyup, dll
• XHR/Fetch → saat request dikirim

Logpoints & Advanced Breakpoints

Breakpoint modern tidak selalu "pause di baris X". Chrome DevTools menyediakan beberapa varian yang mengurangi siklus edit–refresh–debug.

Logpoint (Pretend Console.log Tanpa Edit Kode)

Klik kanan nomor baris → Add logpoint → tulis ekspresi seperti "harga", harga, "diskon", diskon. Saat baris dieksekusi, ekspresi di-log ke Console tanpa pause. Hilang saat DevTools ditutup — tidak perlu ingat hapus console.log sebelum commit.

Gunakan kalau:

• Lagi debug dependency/library yang tidak boleh diubah
• Investigasi bug di production build (minified) tanpa deploy ulang
• Perlu log di loop besar tapi conditional breakpoint terlalu noisy

DOM Breakpoints

Di Elements panel, klik kanan elemen → Break on:

• Subtree modifications — pause saat child ada yang ditambah/dihapus/diubah. Ideal untuk tracing "siapa yang render ulang list ini?"
• Attribute modifications — pause saat attribute (class, style, data-*) berubah. Berguna saat tema dark-mode tidak kunjung berubah atau kelas loading tertinggal.
• Node removal — pause tepat sebelum node dihapus. Berguna kalau element tiba-tiba hilang tanpa jejak.

XHR / Fetch Breakpoints

Di Sources panel → XHR/fetch Breakpoints → klik + → masukkan substring URL (misal /api/orders). Debugger pause sebelum request dikirim, di dalam code yang memicu fetch tersebut — jadi kamu tahu siapa yang memanggil API, bukan cuma API apa.

// Pause pada URL yang mengandung "orders"
// Call stack menunjukkan: handleSubmit → createOrder → fetch

Event Listener Breakpoints (Lebih Dalam)

Di Sources panel, expand kategori dan centang event spesifik:

• Mouse — click, mousedown, mouseup, contextmenu, wheel
• Keyboard — keydown, keyup, keypress
• Touch — touchstart, touchend, touchmove
• Control — blur, focus, resize, scroll
• Script — setTimeout, setInterval, scriptFirstStatement

Berguna saat kamu tidak tahu handler mana yang dipanggil. Pasang "click" → klik tombol → debugger pause di listener yang terpasang. Call stack menunjukkan siapa yang mem-bind listener itu.

Never Pause Here

Kalau sudah paham bagian mana yang bukan target (misal library internal), klik kanan nomor baris → Never pause here agar step-into/step-over tidak ikut masuk ke sana.

Tips

1. Mulai dengan console.log, switch ke breakpoint jika butuh investigasi lebih dalam
2. Gunakan conditional breakpoint di loop
3. Gunakan logpoint saat tidak ingin menghentikan eksekusi
4. Step Over untuk gambaran besar, Step Into untuk detail
5. Perhatikan Call Stack untuk memahami alur eksekusi
6. XHR/fetch breakpoint untuk tracing "siapa memanggil API ini?"