How to Use Breakpoints in Chrome DevTools

· Category: VS Code & Developer Tools

Short answer

Breakpoints pause JavaScript execution so you can inspect variables and call stacks. DevTools supports line, conditional, DOM, and XHR breakpoints.

Steps

  1. Open the Sources tab and navigate to the file you want to debug.
  2. Click the line number gutter to set a line breakpoint.
  3. Right-click a line and choose "Add conditional breakpoint" for logic-based pausing.
  4. Interact with the page to trigger the code path.
  5. Use Resume, Step Over, Step Into, and Step Out to control execution flow.

Tips

  • Logpoints let you print messages without pausing execution.
  • Blackbox third-party scripts to skip stepping into library internals.
  • Use Watch expressions to monitor specific variables across pauses.

Common issues

  • Minified code is hard to debug; ensure source maps are enabled.
  • Breakpoints in dynamically injected scripts may not bind until the script loads.