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. To learn how to set breakpoints, see Pause Your Code With Breakpoints.

Check values when paused

While the execution is paused, the debugger evaluates all variables, constants, and objects within the current function up to a breakpoint. The debugger shows the current values inline next to the corresponding declarations.

[画像:Inline evaluations displayed next to declarations.]

You can use the Console to query the evaluated variables, constants, and objects.

[画像:Using the Console to query the evaluated variables, constants and objects.]

Preview class and function properties on hover

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

[画像:Preview class and function properties.]

Step through code

Once your code is paused, step through it, one expression 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 step_over to execute the function without stepping into it.

[画像:Select Step over.]

For example, suppose you're debugging the following code:

functionupdateHeader(){
varday=newDate().getDay();
varname=getName();// A
updateName(name);// D
}
functiongetName(){
varname=app.first+' '+app.last;// B
returnname;// C
}

You're paused on A. Once you've pressed 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 function call that is related to the problem you're debugging, click Step into to investigate that function.

[画像:Select 'Step into'.]

For example, suppose you're debugging the following code:

functionupdateHeader(){
varday=newDate().getDay();
varname=getName();// A
updateName(name);
}
functiongetName(){
varname=app.first+' '+app.last;// B
returnname;
}

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.

[画像:Selecting 'Step out'.]

For example, suppose you're debugging the following code:

functionupdateHeader(){
varday=newDate().getDay();
varname=getName();
updateName(name);// C
}
functiongetName(){
varname=app.first+' '+app.last;// A
returnname;// B
}

You're paused on A. By clicking 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, 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.

[画像:Selecting 'Continue to here'.]

Resume script execution

To continue your script's execution after a pause, click resume. DevTools executes the script up until the next breakpoint, if any.

[画像:Selecting 'Resume script execution'.]

Force script execution

To ignore all breakpoints and force your script to resume execution, click and hold Resume Script Execution resume and then select Force script execution play_arrow.

[画像:Selecting 'Force script execution'.]

Change thread context

When working with web workers or service workers, click a context listed in the Threads pane to switch to that context. The blue arrow icon represents which context is 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.

Step through comma-separated expressions

You can debug minified code by stepping through comma-separated expressions. For example, consider the following code:

functionfoo(){}
functionbar(){
foo();
foo();
return42;
}
bar();

When minified, it contains a comma-separated foo(),foo(),42 expression:

functionfoo(){}functionbar(){returnfoo(),foo(),42}bar();

The Debugger steps through such expressions just the same.

Stepping through a comma-separated expression.

Therefore, the stepping behavior is identical:

• Between minified and authored code.
• When using source maps to debug the minified code in terms of the original code. In other words, when you see semicolons, you can always expect to step through them even if the source you're debugging is minified.

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.

Select an entry to jump to the line of code where that function was called. The blue arrow icon represents which function DevTools is highlighting.

Restart a function (frame) 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. [画像:Selecting Restart frame from the drop-down menu.]

To understand how Restart frame works, consider the following:

functionfoo(value){
console.log(value);
bar(value);
}
functionbar(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 as follows:

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

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

3. Restart the bar() frame. Restarting the bar() frame.

4. Step through the value increment statement by pressing F9. Incrementing current value. 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. Editing the value in the Scopes pane.

6. Try restarting the bar() frame and stepping through the increment statement several more times. The value continues to increase. Restarting the bar() frame again.

7. Restart the foo() frame in the Call Stack. Restarting the foo() frame. Notice that the value is 0 again.

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

Show ignore-listed frames

By default, the Call Stack pane shows only the frames that are relevant to your code and omits any scripts added to settings Settings > Ignore List.

[画像:Call stack.]

To view the full call stack including third-party frames, enable Show ignore-listed frames under the Call Stack section.

[画像:Show ignore-listed frames.]

Try it in this demo:

1. In the Sources panel, open the src > app > app.component.ts file.
2. Set a breakpoint at the increment() function.
3. In the Call Stack section, check or clear the Show ignore-listed frames checkbox and observe the relevant or full list of frames in the call stack.

View async frames

If supported by the framework you are using, DevTools can trace async operations by linking both parts of the async code together.

In this case, the Call Stack shows the entire call history including async call frames.

[画像:Async call frames.]

Key Point DevTools implements this "Async Stack Tagging" feature based on the console.createTask() API method. It's up to frameworks to implement the API. For example, Angular supports this feature.

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.

[画像:Selecting 'Copy Stack Trace'.]

Here is an example of the output:

getNumber1(get-started.js:35)
inputsAreEmpty(get-started.js:22)
onClick(get-started.js:15)

Navigate the file tree

Use the Page pane to navigate the file tree.

Group authored and deployed files in the file tree

When developing web applications using frameworks (for example, React or Angular), it can be difficult to navigate sources due to the minified files generated by the build tools (for example, webpack or Vite).

To help you navigate sources, the Sources > Page pane can group the files into two categories:

• code Authored. Similar to the source files you view in your IDE. DevTools generates these files based on source maps provided by your build tools.
• Deployed. The actual files that the browser reads. Usually these files are minified.

To enable grouping, click more_vert > Group files by Authored/Deployed option, under the menu at the top of the file tree.

[画像:Grouping files by Authored / Deployed.]

Hide ignore-listed sources from the file tree

To help you focus only on the code you create, the Sources > Page pane grays out all scripts or directories added to settings Settings > Ignore List by default.

To hide such scripts altogether, select Sources > Page > more_vert > Hide ignore-listed sources Experimental..

[画像:Before and after hiding ignore-listed sources.]

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:

functionanimate(){
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 or a directory from the file tree

To ignore an individual script or an entire directory:

1. In Sources > Page, right-click a directory or a script file.
2. Select Add directory/script to ignore list.

[画像:Ignore options for a directory or script file.]

If you didn't hide ignore-listed sources, you can select such a source in the file tree and, on the warning warning banner, click Remove from ignored list or Configure.

[画像:A selected ignored file shows Remove and Configure buttons.]

Otherwise, you can remove hidden and ignored directories and scripts from the list in settings Settings > Ignore List.

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.

[画像:Ignoring a script from the Editor pane.]

You can remove a script from the list of ignored from settings Settings > Ignore List.

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.

[画像:Ignoring a script from the Call Stack pane.]

You can remove a script from the list of ignored from settings Settings > Ignore List.

Ignore a script from Settings

See settings Settings > Ignore List.

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.

[画像:The Watch pane.]

• Click Add Expression add to create a new watch expression.
• Click Refresh refresh to refresh the values of all existing expressions. Values automatically refresh while stepping through code.
• Hover over an expression and click Delete Expression Delete expression to delete it.

Inspect and edit scripts

When you open a script in the Page pane, DevTools shows you its contents in the Editor pane. In the Editor pane, you can browse and edit your code.

Additionally, you can override the contents locally or create a workspace and save the changes you make in DevTools directly to your local sources.

Make a minified file readable

By default, the Sources panel pretty-prints minified files. When pretty-printed, the Editor may show a single long code line in multiple lines, with - to indicate that it's the line continuation.

[画像:A pretty-printed long code line shown in multiple lines, with '-' to indicate line continuation.]

To see the minified filed as it was loaded, click data_object in the bottom left corner of the Editor.

Fold code blocks

To fold a code block, hover over the line number in the left column and click arrow_drop_down Collapse.

To unfold the code block, click {...} next to it.

To configure this behavior, see settings Settings > Preferences > Sources.

Edit a script

When fixing a bug, you often want to test out some changes to your JavaScript. 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 JavaScript file into Chrome's JavaScript engine.

   [画像:The Editor pane.]

Edit a paused function live

While the execution is paused, you can edit the current function and apply changes live with the following limitations:

• You can edit only the top-most function in the Call Stack.
• There must be no recursive calls to the same function further down the stack.

To live-edit a function:

1. Pause the execution with a breakpoint.
2. Edit the paused function.
3. Press Command / Control + S to apply changes. The debugger restarts the function automatically.
4. Continue the execution.

Watch the video to learn this workflow.

In this example, the addend1 and addend2 variables initially have an incorrect string type. So, instead of adding numbers, the strings are concatenated. To fix it, the parseInt() functions are added during live editing.

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. [画像:Search.] 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 Replace. [画像:Replace.]
2. Type the text to replace with, then click Replace or Replace all.

Disable JavaScript

See Disable JavaScript With Chrome DevTools.