Loading lesson path
Concept visual
Start at both ends
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.
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.
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 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.
let x = 15 * 5;
debugger;
document.getElementById("demo").innerHTML = x;Read more about the console.log()method in our JavaScript Console Reference.
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 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.
let x = 10;
function test() {
let y = 5;
console.log(x + y);
}
test();At the breakpoint, y exists only inside the function.
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.
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 values change unexpectedly. When code runs but produces wrong results. When debugging complex logic.
Next page explains the most common JavaScript error messages. You will learn what they mean and how to fix them.