Discover new debugging workflows with this comprehensive reference of Chrome DevTools debugging features.
See Get Started With Debugging JavaScript In Chrome DevTools to learn the basics of debugging.
Pause code with breakpoints
Set a breakpoint so that you can pause your code in the middle of its execution.
See Pause Your Code With Breakpoints to learn how to set breakpoints.
Step through code
Once your code is paused, step through it, one line at a time, investigating control flow and property values along the way.
Step over line of code
When paused on a line of code containing a function that's not relevant to
the problem you're debugging, click Step over 
to
execute the function without stepping into it.
For example, suppose you're debugging the following code:
function updateHeader() {
var day = new Date().getDay();
var name = getName(); // A
updateName(name); // D
}
function getName() {
var name = app.first + ' ' + app.last; // B
return name; // C
}
You're paused on A. By pressing Step over, DevTools executes all
the code in the function that you're stepping over, which is B and C.
DevTools then pauses on D.
Step into line of code
When paused on a line of code containing a function call that is related to
the problem you're debugging, click Step into 
to
investigate that function further.
For example, suppose you're debugging the following code:
function updateHeader() {
var day = new Date().getDay();
var name = getName(); // A
updateName(name);
}
function getName() {
var name = app.first + ' ' + app.last; // B
return name;
}
You're paused on A. By pressing Step into, DevTools executes
this line of code, then pauses on B.
Step out of line of code
When paused inside of a function that is not related to the problem you're
debugging, click Step out 
to execute the rest of the function's code.
For example, suppose you're debugging the following code:
function updateHeader() {
var day = new Date().getDay();
var name = getName();
updateName(name); // C
}
function getName() {
var name = app.first + ' ' + app.last; // A
return name; // B
}
You're paused on A. By pressing Step out, DevTools executes
the rest of the code in getName(), which is just B in this example, and
then pauses on C.
Run all code up to a certain line
When debugging a long function, there may be a lot of code that is not related to the problem you're debugging.
You could step through all the lines, but that can be tedious. You could
set a line-of-code breakpoint on the line you're interested in and then
press Resume Script Execution 
, but there's
a faster way.
Right-click the line of code that you're interested in, and select Continue to here. DevTools runs all of the code up to that point, and then pauses on that line.
Restart the top function of the call stack
While paused on a line of code, right-click anywhere in the Call Stack pane and select Restart Frame to pause on the first line of the top function in your call stack. The top function is the last function that was called.
For example, suppose you're stepping through the following code:
function factorial(n) {
var product = 0; // B
for (var i = 1; i <= n; i++) {
product += i;
}
return product; // A
}
You're paused on A. After clicking Restart Frame, you'd be paused
on B, without ever setting a breakpoint or pressing
Resume script execution.
Resume script execution
To continue your script's execution after a pause, click Resume Script
Execution .
DevTools executes the script up until the next breakpoint, if any.
Force script execution
To ignore all breakpoints and force your script to resume execution, click and
hold Resume Script Execution and then select Force script
execution 
.
Change thread context
When working with web workers or service workers, click on a context listed in the Threads pane to switch to that context. The blue arrow icon represents which context is currently selected.
For example, suppose that you're paused on a breakpoint in both your main script and your service worker script. You want to view the local and global properties for the service worker context, but the Sources panel is showing the main script context. By clicking on the service worker entry in the Threads pane, you'd be able to switch to that context.
View and edit local, closure, and global properties
While paused on a line of code, use the Scope pane to view and edit the values of properties and variables in the local, closure, and global scopes.
- Double-click a property value to change it.
- Non-enumerable properties are greyed out.
View the current call stack
While paused on a line of code, use the Call Stack pane to view the call stack that got you to this point.
If you're working with async code, check the Async checkbox to enable async call stacks.
Click on an entry to jump to the line of code where that function was called. The blue arrow icon represents which function DevTools is currently highlighting.
Copy stack trace
Right-click anywhere in the Call Stack pane and select Copy stack trace to copy the current call stack to the clipboard.
Below is an example of the output:
getNumber1 (get-started.js:35)
inputsAreEmpty (get-started.js:22)
onClick (get-started.js:15)
Ignore a script or pattern of scripts
Blackbox a script when you want to ignore that script while debugging. When blackboxed, a script is obscured in the Call Stack pane, and you never step into the script's functions when you step through your code.
For example, suppose you're stepping through this code:
function animate() {
prepare();
lib.doFancyStuff(); // A
render();
}
A is a third-party library that you trust. If you're confident that the
problem you're debugging is not related to the third-party library, then
it makes sense to blackbox the script.
Blackbox a script from the Editor pane
To blackbox a script from the Editor pane:
- Open the file.
- Right-click anywhere.
- Select Blackbox script.
Blackbox a script from the Call Stack pane
To blackbox a script from the Call Stack pane:
- Right-click on a function from the script.
- Select Blackbox script.
Blackbox a script from Settings
To blackbox a single script or pattern of scripts from Settings:
- Open Settings.
- Go to the Blackboxing tab.
- Click Add pattern.
- Enter the script name or a regex pattern of script names to blackbox.
- Click Add.
Run snippets of debug code from any page
If you find yourself running the same debug code in the Console over and over, consider Snippets. Snippets are executable scripts that you author, store, and run within DevTools.
See Run Snippets of Code From Any Page to learn more.
Watch the values of custom JavaScript expressions
Use the Watch pane to watch the values of custom expressions. You can watch any valid JavaScript expression.
- Click Add Expression
to create a
new watch expression. - Click Refresh
to refresh the values of all existing expressions. Values automatically
refresh while stepping through code. - Hover over an expression and click Delete Expression
to
delete it.
Make a minified file readable
Click Format 
to make a
minified file human-readable.
Edit a script
When fixing a bug, you often want to test out some changes to your JavaScript code. You don't need to make the changes in an external browser and then reload the page. You can edit your script in DevTools.
To edit a script:
- Open the file in the Editor pane of the Sources panel.
- Make your changes in the Editor pane.
- Press Command+S (Mac) or Ctrl+S (Windows, Linux) to save. DevTools patches the entire JS file into Chrome's JavaScript engine.
Feedback
Was this page helpful?