How breakpoints work and when to use them

What a Breakpoint Does

A breakpoint pauses program execution at a specific line, giving you access to the full program state at that moment -- every variable in scope, the call stack, heap objects. This is fundamentally more powerful than console.log because you can inspect anything, not just what you thought to print before the bug appeared.

Setting Breakpoints

In Chrome DevTools or VS Code, click the line number in the source panel to set a breakpoint. In Node.js, run with the --inspect flag and open chrome://inspect. In Python, use pdb or set a breakpoint with the breakpoint() built-in anywhere in code.

# Python: programmatic breakpoint
def process_payment(order):
    total = calculate_total(order)
    breakpoint()  # execution pauses here in terminal
    result = charge_card(total)
    return result

// JavaScript: programmatic breakpoint
function processPayment(order) {
  const total = calculateTotal(order);
  debugger;  // pauses execution when DevTools is open
  return chargeCard(total);
}

Conditional Breakpoints

When a loop runs thousands of times but the bug only occurs at one specific iteration, conditional breakpoints are essential. Right-click a breakpoint in DevTools and add a condition: i === 500 or user.id === 'abc123'. Execution only pauses when the condition is true, skipping all other iterations.