JavaScript Debugging Breakpoints

Logging shows you what happened after the fact. A breakpoint pauses your code while it runs, on the exact line you choose, so you can look at every variable, then step forward one line at a time and watch values change. You do not guess values with breakpoints; you see them.

// Setting a Breakpoint

Breakpoints are set in the browser's developer tools, not in your code:

1. Open the developer tools (F12) and go to the Sources tab
2. Open your script file from the list on the left
3. Click a line number. A blue marker shows the breakpoint
4. Reload the page (or run the code again) so the line is reached
5. The code pauses before that line runs, and the line is highlighted

W3Schools' practice code calls a function four times. Put a breakpoint on the let result line and watch a, b, and result on each call:

function add(a, b) {
  let result = a + b;
  return result;
}

console.log(add(10, 5));
console.log(add(10, 50));
console.log(add(10, 500));
console.log(add(10, 5000));

(W3Schools shows each result on the page with document.getElementById("demo").innerHTML = ..., which finds the element with id "demo" and replaces its content. console.log is simpler for practice.)

// The debugger Keyword

Writing debugger; in your code works like a breakpoint on that line, but only while the developer tools are open. When they are closed, it does nothing:

let x = 15 * 5;
debugger;             // pauses here if the developer tools are open
console.log(x);

// Stepping Through Code

While paused, a row of buttons (and keyboard shortcuts) controls what runs next:

Step slowly and watch how the values change. Hovering over a variable in the code also shows its current value.

// The Scope Panel

While paused, the Scope panel lists every variable available at the current line, grouped the way JS Scope describes them: Local (inside the current function), Block (inside the current { }), Closure (from an outer function), and Global.

let x = 10;
function test() {
  let y = 5;
  console.log(x + y);    // pause here: y is Local, x is under Script/Global
}
test();

// The Watch Panel

Add a variable name or any expression (like total / count or items.length) to the Watch panel, and its value updates every time you step. It is a cleaner alternative to adding many console.log calls.

// The Call Stack Panel

The Call Stack shows how you got to the current line: which function called which. Click any entry to jump to that spot and see the variables there. It is the same chain the stack property of an error shows (JS Error Object).

// Conditional Breakpoints and Logpoints

A breakpoint inside a loop stops on every repetition. Right-click the line number instead:

• Add conditional breakpoint: type a condition like i === 7, and it only pauses when that is true.
• Add logpoint: type something like "i is", i, and it logs to the console without pausing and without editing your code.

let total = 0;
for (let i = 1; i <= 10; i++) {
  total += i * i;       // try a conditional breakpoint: i === 7
}
console.log(total);

// Common Mistakes

• Forgetting to reload the page (or rerun the code) after setting a breakpoint, so the line is never reached again.
• A breakpoint in a loop that stops dozens of times: make it conditional, or disable it for now (click its marker).
• Leaving debugger; statements in finished code.

// When to Use Breakpoints

// Quick Check

let n = 2;
debugger;
n = n * 21;
console.log(n);

// Try It

▶ Open Playground

1. Click Open Playground. Open your browser's developer tools (F12), then click Run: the code pauses on the debugger line
2. Step through both calls, watching a, b, and result in the Scope panel
3. Open the loop example with its Try it Yourself button, add debugger; inside the loop, and add total to the Watch panel
4. Set a conditional breakpoint that pauses only when i === 7