Breakpoints, Watch, Scope
Breakpoints let you pause JavaScript and inspect what is really happening.
This is the most powerful debugging technique after using the console.
What Is a Breakpoint
A breakpoint pauses code execution on a specific line.
When the code stops, you can inspect variables and step through the code line by line.
Breakpoints are set inside the browser developer tools.
You do not guess values when using breakpoints.
You see them.
Setting a Breakpoint
In the debugger window, you can set breakpoints in the JavaScript code.
At each breakpoint, JavaScript will stop executing, and let you examine JavaScript values.
After examining values, you can resume the execution of code (typically with a play button).
Example
function add(a, b) {
let result = a + b;
return result;
}
document.getElementById("demo").innerHTML = add(10, 5);
document.getElementById("demo").innerHTML = add(10, 50);
document.getElementById("demo").innerHTML = add(10, 500);
document.getElementById("demo").innerHTML = add(10, 5000);Open the browser developer tools with F12 and go to the Sources tab.
Click on the line numbers in your script to add breakpoints.
Reload the page to trigger the breakpoint.
Use the play button to run your code line by line.
The debugger Keyword
The debugger keyword stops the execution of JavaScript, and calls (if available) the debugging function.
This has the same function as setting a breakpoint in the debugger.
If no debugging is available, the debugger statement has no effect.
With the debugger turned on, this code will stop executing before it executes the third line.
Example
let x = 15 * 5;
debugger;
document.getElementById("demo").innerHTML = x;Learn More
Read more about the console.log() method in our JavaScript Console Reference .
Stepping Through Code
When execution is paused, you can control how the code runs.
- Step Over runs the next line.
- Step Into enters a function.
- Step Out exits the current function.
Step slowly and watch how values change.
The Scope Panel
The Scope panel shows which variables are available at the current line.
It helps you understand where variables live.
- Local variables exist inside a function.
- Global variables exist everywhere.
Example
let x = 10;
function test() {
let y = 5;
console.log(x + y);
}
test();At the breakpoint, y exists only inside the function.
Watching Variables
The Watch panel lets you track variable values live.
This is useful when values change many times.
Add a variable name to the Watch panel.
The value updates automatically as you step through the code.
Watch variables instead of adding many console.log() calls.
Common Beginner Mistakes
Beginners often forget to reload the page after adding a breakpoint.
Breakpoints inside loops can trigger many times.
If execution stops repeatedly, disable the breakpoint temporarily.
When to Use Breakpoints
- When values change unexpectedly.
- When code runs but produces wrong results.
- When debugging complex logic.
You will learn what they mean and how to fix them.