Breakpoints and the debugger Statement

A breakpoint pauses your program at a chosen line. While it is paused, you can look at every variable, then run the code one line at a time. It is like freezing time in the middle of a bug.

Two ways to set a breakpoint

1. In the browser’s Sources panel. Open DevTools (F12), choose Sources (Chrome and Edge) or Debugger (Firefox), open your file and click the line number. A marker appears. Reload or trigger the code, and it stops on that line.

2. With the debugger statement. Write it in your code:

1
2
3
4
5
6
7
8

function calculateTotal(items) {
  let total = 0;
  for (const item of items) {
    debugger;                    // execution pauses here if DevTools is open
    total += item.price * item.qty;
  }
  return total;
}

If DevTools is closed, debugger does nothing. Remove it before shipping. (It does nothing in the Try it editor either, since that runs in a sandbox.)

What you see when paused

You can also hover over a variable in the code to see its value, and type expressions in the Console, which runs in the current scope.

Stepping

Controls at the top of the Sources panel:

A typical session: pause, look at the values, step over a few lines, notice the value that is different from what you expected. That line is where the bug starts, or one just before.

Conditional breakpoints

Right-click a line number, choose Add conditional breakpoint, and type a condition such as item.price > 100 or i === 41. It only pauses when it is true. This is perfect for loops with thousands of passes.

Logpoints

A logpoint prints a message without pausing and without editing your code. Right-click a line number, choose Add logpoint, and type something like "price:", item.price. It is console.log that you can add and remove from the browser.

Other kinds of breakpoints

“Pause on exceptions” is great for tracking down a mystery error: the debugger stops at the exact line that throws.

Ignore library code

Use “Ignore list” or “Blackbox script” to skip frameworks and libraries when stepping, so you stay in your own code.

A practice example

1
2
3
4
5
6
7
8
9

function average(numbers) {
  let sum = 0;
  for (let i = 0; i <= numbers.length; i++) {      // bug: should be <
    sum += numbers[i];
  }
  return sum / numbers.length;
}

console.log(average([2, 4, 6]));   // → NaN   (a breakpoint would show numbers[3] is undefined)

With a breakpoint inside the loop, you would see that on the last pass i is 3 and numbers[3] is undefined, so sum becomes NaN. The fix is i < numbers.length.