The Detective's Toolkit

Instead of writing hundreds of console.log statements, use the built-in Debugger in Chrome DevTools — it's 10x more powerful and faster.

Core Techniques

1. Breakpoints

Click any line number in the Sources panel — execution will freeze at that line, letting you inspect the full state of your program.

2. The debugger Statement

Write debugger; directly in your code — the browser pauses there automatically (only when DevTools is open):

function calculateTotal(items) {
  debugger; // Execution pauses here!
  return items.reduce((sum, item) => sum + item.price, 0);
}

3. Conditional Breakpoints

Right-click a line number → " Add conditional breakpoint " → only pauses when your condition is true (e.g., i === 500 in a loop of 1000).

Navigation Controls

Key	Action
F8	Continue to next breakpoint
F10	Step over (execute next line, skip into functions)
F11	Step into (enter the called function)
Shift+F11	Step out (finish current function, return to caller)