Breakpoints in DevTools0%
Network Tab for API Calls

Breakpoints in DevTools

Beginner12 min read•Updated: Jul 11, 2026
Study Materials

Breakpoints in DevTools in Modern JavaScript

While console.log() is commonly used for quick debugging, enterprise development requires interactive debugging using browser Developer Tools. Setting breakpoints pauses JavaScript execution, enabling you to inspect local scope variables, evaluate expressions in the console, and step through code execution line by line.

1. Opening DevTools and the Sources Tab

In Google Chrome, Microsoft Edge, or Firefox:

  • Press F12 or Ctrl + Shift + I (Windows/Linux) or Cmd + Option + I (Mac).
  • Navigate to the Sources (or Debugger in Firefox) tab.
  • Press Ctrl + P to quickly find and open any source file.
Output
┌─────────────────────────────────────────────────────────────────┐
│ Sources / Debugger Tab Layout │
├───────────────┬───────────────────────────────┬─────────────────┤
│ File Explorer │ Source Code Viewer │ Scope / Watches │
│ ├── index.html│ 12: function calculate() { │ Local Variables │
│ └── app.js │ 13: let total = 0; ● <───┼─ Call Stack │
│ │ 14: return total; │ Breakpoints │
│ │ 15: } │ Console Drawer │
└───────────────┴───────────────────────────────┴─────────────────┘

2. Types of Breakpoints

1. Line-of-Code Breakpoint

Click directly on any line number in the source editor (a blue/orange marker appears). Execution pauses right before that line executes.

2. The debugger; Statement

Place the debugger; statement directly in your source code. When DevTools is open, execution automatically pauses at that statement:

JavaScript
function processTransaction(transaction) {
// Execution pauses here automatically if DevTools is open!
debugger;
 
validateAccount(transaction.accountId);
submitToPaymentGateway(transaction.amount);
}

3. Conditional Breakpoints

Right-click a line number and choose Add conditional breakpoint.... Enter an expression (e.g. userId === 99 or price > 500). Execution will pause only when that expression evaluates to true!

4. DOM Mutation Breakpoints

Right-click any HTML element in the Elements panel -> Break on ->:

  • Subtree modifications: Pauses when child nodes are added or removed.
  • Attribute modifications: Pauses when class or style attributes change.
  • Node removal: Pauses when the element is deleted.

3. Stepping Controls

Once paused, use the debugging controls:

ButtonKeyActionDescription
ResumeF8Continue executionRuns until the next breakpoint or script completion
Step OverF10Next lineExecutes current line without stepping into function calls
Step IntoF11Dive insideSteps into the function invoked on current line
Step OutShift + F11Jump outFinishes current function and returns to caller

4. Scope and Watch Panels

While paused at a breakpoint:

  • Scope Panel: Displays all variables currently in scope (Local, Closure, Global) and their real-time memory values.
  • Watch Expressions: Click + to monitor custom expressions (e.g., cart.items.length * taxRate) that re-evaluate at every step.
  • Interactive Console: The console evaluates expressions in the context of the paused stack frame.
Interactive Quiz

Practice Quiz

Question 1
What built-in JavaScript keyword pauses code execution if browser DevTools is open?
Question 2
What is the primary advantage of a Conditional Breakpoint over a standard Line Breakpoint?
Question 3
What stepping action should you use to jump INTO a function call on the current line?
Question 4
What does a DOM Subtree Modification breakpoint do?
Question 5
What can you inspect in the Scope panel while paused at a breakpoint?
Next Lesson

Network Tab for API Calls

Continue learning with hands-on practice, examples, and exercises in the upcoming topic.

Related Lessons

Previous LessonNext Lesson
Using console methodsNetwork Tab for API Calls

Practice Quiz

Test your understanding of this lesson with 5 questions. Each question has one correct answer.

PreviousNext
PrevNext