JavaScript debugging reference

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.

# Preview class/function properties on hover

While the execution is paused, hover over a class or function name to preview its properties.

# 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.

Figure 1. Step over, outlined in blue

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.

Figure 2. Step into, outlined in blue

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.

Figure 3. Step out, outlined in blue

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.

Figure 4. Selecting Continue to here

# 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.

Figure 6. Resume script execution, outlined in blue

# 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 .

Figure 7. Selecting 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.

Figure 8. The Threads pane, outlined in blue

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.

Figure 9. The Scope pane, outlined in blue

# 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.

Figure 10. The Call Stack pane, outlined in blue

# Restart a frame (function) in a call stack

To observe the behavior of a function and re-run it without having to restart the entire debugging flow, you can restart the execution of a single function when this function is paused. In other words, you can restart the function's frame in the call stack.

To restart a frame:

1. Pause function execution at a breakpoint. The Call Stack pane records the order of function calls.

2. In the Call Stack pane, right-click a function and select Restart frame from the drop-down menu.

   

   Note: You can restart any function frame in the Call Stack, except WebAssembly, async, and generator functions.

To understand how Restart frame works, consider the following code:

function foo(value) {
    console.log(value);
    bar(value);
}
 
function bar(value) {
    value++;
    console.log(value);
    debugger;
}

foo(0);

The foo() function takes 0 as an argument, logs it, and calls the bar() function. The bar() function, in turn, increments the argument.

Try restarting the frames of both functions in the following way:

1. Copy the code above to a new snippet and run it. The execution stops at the debugger line-of-code breakpoint.

   Caution

   When the execution is paused, don't programmatically change the order of the call stack frames. This may cause unexpected errors.

2. Notice that the debugger shows you the current value next to function declaration: value = 1.

3. Restart the bar() frame.

4. Step through the value increment statement by pressing F9. Notice that the current value increases: value = 2.

5. Optionally, in the Scope pane, double-click the value to edit it and set the desired value.

6. Try restarting the bar() frame several more times. The value continues to increase.

   Gotchas

   Why is the value not reset to 0?

   Frame restart doesn't reset the arguments. In other words, the restart doesn't restore the initial state at function call. Instead, it simply moves the execution pointer to the start of the function.

   Therefore, the current argument value persists in memory across restarts of the same function.

7. Now, restart the foo() frame in the Call Stack. Notice that the value is 0 again.

   Gotchas

   Why is the value reset to 0?

   In JavaScript, changes to arguments are not visible (reflected) outside the function. Nested functions receive values, not their locations in memory.

8. Resume script execution (F8) to complete this tutorial.

# 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.

Figure 11. Selecting Copy Stack Trace

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

Ignore a script to skip it while debugging. When ignored, 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 ignore the script.

# Ignore a script from the Editor pane

To ignore a script from the Editor pane:

1. Open the file.
2. Right-click anywhere.
3. Select Add script to ignore list.

Figure 12. Ignoring a script from the Editor pane

# Ignore a script from the Call Stack pane

To ignore a script from the Call Stack pane:

1. Right-click on a function from the script.
2. Select Add script to ignore list.

Figure 13. Ignoring a script from the Call Stack pane

# Ignore a script from Settings

To ignore a single script or pattern of scripts from Settings:

1. Open Settings.
2. Go to the Ignore List tab.
3. Click Add pattern.
4. Enter the script name or a regex pattern of script names to ignore.
5. Click Add.

Figure 14. Ignoring a script from Settings

# 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.

Figure 15. The Watch pane, outlined in blue

• 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.

Figure 16. Format, outlined in blue

# 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:

1. Open the file in the Editor pane of the Sources panel.

2. Make your changes in the Editor pane.

3. Press Command+S (Mac) or Ctrl+S (Windows, Linux) to save. DevTools patches the entire JS file into Chrome's JavaScript engine.

   

   Figure 17. The Editor pane, outlined in blue

# Search and replace text in a script

To search for text in a script:

1. Open the file in the Editor pane of the Sources panel.
2. To open a built-in search bar, press Command+F (Mac) or Ctrl+F (Windows, Linux).
3. In the bar, enter your query. Optionally, you can:
   • Click Match Case to make your query case-sensitive.
   • Click Use Regular Expression to search using a RegEx expression.
4. Press Enter. To jump to previous or next search result, press the up or down button.

To replace the text you found:

1. On the search bar, click the Replace button.
2. Type the text to replace with, then click Replace or Replace all.

# Disable JavaScript

See Disable JavaScript With Chrome DevTools.