Breakpoints

You will be able to pause JavaScript execution in browser DevTools at a chosen line, inspect variables and the call stack, then resume or step through code.

What it is

A breakpoint is a debugging instruction that tells the browser to stop running JavaScript at a specific point. It is not part of JavaScript syntax; it is a feature of browser developer tools. When execution reaches a breakpoint, the browser pauses so you can inspect the current state: local variables, object properties, the call stack, scope chain, and the next line that will run.

The mental model is simple: imagine your program as a movie. A breakpoint lets you pause the movie at one frame, look around, then continue one step at a time. Related terms include debugger statement, conditional breakpoint, logpoint, DOM breakpoint, XHR/fetch breakpoint, and event listener breakpoint.

Why it matters

• It lets you inspect the exact value of variables at the moment a bug happens.
• It helps you understand unfamiliar code by stepping through it line by line.
• It is more precise than console.log because you can pause and examine many values at once.
• It supports conditional pausing, so you can stop only when a specific bad state occurs.
• It works well for asynchronous code, event handlers, and complex UI updates.

Syntax or steps

The smallest useful pattern is a line breakpoint in DevTools:

1. Open the browser developer tools.
2. Go to the Sources panel.
3. Find the JavaScript file that contains the code you want to inspect.
4. Click the line number where you want execution to pause.
5. Trigger the code, such as by reloading the page or clicking a button.
6. Inspect variables, then use Resume, Step over, Step into, or Step out.

You can also pause from code using the debugger statement:

function calculateTotal(items) {
  let total = 0;
  for (const item of items) {
    total += item.price * item.quantity;
    // set in DevTools > Sources
  }
  return total;
}

Example

// order.js
function calculateTotal(items) {
  let total = 0;

  for (const item of items) {
    total += item.price * item.quantity;
    // set in DevTools > Sources
  }

  return total;
}

const items = [
  { name: "apple", price: 1.25, quantity: 3 },
  { name: "bread", price: 2.50, quantity: 1 }
];

console.log(calculateTotal(items));

This example calculates a shopping total. If you set a breakpoint on the line containing total += item.price * item.quantity;, execution pauses before that line runs. You can inspect item to see the current product and total to see the running sum. After resuming, the loop continues until the function returns 6.25.

Common mistakes

• The breakpoint does not hit. The code may not have run yet, or you may be editing a different file than the one loaded by the page. Reload the page and confirm the correct source file is open.
• Minified code makes breakpoints confusing. If the script is bundled or minified, enable source maps in DevTools so you can debug the original source.
• Conditional breakpoint expressions are wrong. A condition like total > 5 is evaluated each time the line is reached. If the condition is invalid or never true, the breakpoint will not pause.
• Forgetting to resume execution. While paused, the page may appear frozen. Use the resume button to continue normal execution.

When to use it

Breakpoints are best when you need to inspect program state at a precise moment. They are often better than printing values with console.log, especially when many variables are involved.

Practice

Guided exercise: Save the example as order.js, load it in a browser page, open DevTools, and set a breakpoint on the line that updates total. Reload the page and inspect item and total during each loop iteration.

Challenge: Set a conditional breakpoint on the return total; line with the condition total > 5. Expected result: execution pauses before returning, with total equal to 6.25.

Quick check

Question: What happens when JavaScript execution reaches a breakpoint?

Answer: Execution pauses, allowing you to inspect variables, scope, and the call stack before continuing or stepping through the code.

Summary

Breakpoints let you pause JavaScript at a chosen point and inspect the program’s live state. They are one of the most practical debugging tools in browser DevTools because they reveal what the code is doing at the exact moment something goes wrong.