Kayce Basques

Sofia Emelianova

Discover new debugging workflows with this comprehensive reference of ChromeDevTools debugging features.

SeeGet Started With Debugging JavaScript In Chrome DevTools to learn thebasics 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, seePause 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 showsthe current values inline next to the corresponding declarations.

You can use theConsole to query the evaluatedvariables, constants, and objects.

Preview class and function properties on hover

While the execution is paused, hover over a class or function name to previewits 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 theproblem you're debugging, clickStep overstep_over to execute the functionwithout stepping into it.

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 onA. Once you've pressedstep_over, DevTools executes allthe code in the function that you're stepping over, which isB andC.DevTools then pauses onD.

Step into line of code

When paused on a function call that is related to the problem you're debugging,clickStep into toinvestigate that function.

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 onA. By pressingStep into, DevTools executes this line ofcode, then pauses onB.

Step out of line of code

When paused inside of a function that is not related to the problem you'redebugging, clickstep_out toexecute the rest of the function's code.

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 onA. By clickingstep_out,DevTools executes the rest of the code ingetName(), which is justB inthis example, and then pauses onC.

Run all code up to a certain line

When debugging a long function, there may be a lot of code that is not relatedto the problem you're debugging.

Youcould step through all the lines, but that can be tedious. Youcould seta line-of-code breakpoint on the line you're interested in and then pressresume, but there's afaster way.

Right-click the line of code that you're interested in, and selectContinue to here. DevTools runs all of the code up to that point, and thenpauses on that line.

Resume script execution

To continue your script's execution after a pause, clickresume. DevToolsexecutes the script up until the next breakpoint, if any.

Force script execution

To ignore all breakpoints and force your script to resume execution, click andholdResume Script Executionresumeand then selectForce script executionplay_arrow.

Change thread context

When working with web workers or service workers, click a context listed intheThreads pane to switch to that context. The blue arrow icon representswhich context is selected.

For example, suppose that you're paused on a breakpoint in both your main scriptand your service worker script. You want to view the local and global propertiesfor the service worker context, but the Sources panel is showing the main scriptcontext. By clicking on the service worker entry in the Threads pane, you'd beable to switch to that context.

Step through comma-separated expressions

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

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

• Between minified and authored code.
• When usingsource maps to debug the minified code in termsof the original code. In other words, when you see semicolons, you can alwaysexpect 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 theScope pane to view and edit thevalues 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 theCall Stack pane to view the call stack that got you to thispoint.

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.

1. Pause function execution at a breakpoint. TheCall Stackpane records the order of function calls.

2. In theCall Stack pane, right-click a function and selectRestart frame from the drop-down menu.

   Note: You can restart any function frame in theCall Stack, except forWebAssembly, async, and generator functions.

To understand howRestart frame works, consider the following:

functionfoo(value){console.log(value);bar(value);}functionbar(value){value++;console.log(value);debugger;}foo(0);

1. Copy the example code to anew snippet andrun it. The execution stopsat thedebuggerline-of-code breakpoint.

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

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

3. Restart thebar() frame.

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

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

6. Try restarting thebar() frame and stepping through the increment statementseveral more times. The value continues to increase.

   Key Point: The value isnot reset to0, as frame restart doesn't reset thearguments. In other words, the restart doesn't restore the initial state at function call. Instead, it 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. Restart thefoo() frame in theCall Stack.Notice that the value is0 again.

   Key Point: The value reset to0. In JavaScript, changes to arguments aren'tvisible (reflected) outside the function. Nested functions receive values, nottheir locations, in memory.

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

Show ignore-listed frames

By default, theCall Stack pane shows only the frames that are relevant toyour code and omits any scripts added tosettingsSettings >Ignore List.

To view the full call stack including third-party frames, enableShow ignore-listed frames under theCall Stack section.

Try it in thisdemo:

1. In theSources panel, open thesrc >app >app.component.ts file.
2. Set a breakpoint at theincrement() function.
3. In theCall Stack section, check or clear theShow 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 operationsby linking both parts of the async code together.

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

Key Point DevTools implements this "Async Stack Tagging" feature based on theconsole.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 theCall Stack pane and selectCopy stack traceto copy the current call stack to the clipboard.

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 thePage pane to navigatethe file tree.

Group authored and deployed files in the file tree

When developing web applications using frameworks (for example,React orAngular), it can bedifficult to navigate sources due to the minified files generated by the buildtools (for example,webpack orVite).

To help you navigate sources, theSources >Page pane can group thefiles into two categories:

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

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

Hide ignore-listed sources from the file tree

To help you focus only on the code you create, theSources >Page panegrays out all scripts or directories added tosettingsSettings >Ignore List by default.

To hide such scripts altogether, selectSources >Page >more_vert >Hide ignore-listed sources.

Ignore a script or pattern of scripts

Ignore a script to skip it while debugging. When ignored, a script isobscured in theCall Stack pane, and you never step into the script'sfunctions 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 theproblem you're debugging is not related to the third-party library, then itmakes 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. InSources >Page, right-click a directory or a script file.
2. SelectAdd directory/script to ignore list.

If you didn'thide ignore-listed sources, you can selectsuch a source in the file tree and, on thewarning warning banner, clickRemove from ignored list orConfigure.

Otherwise, you can remove hidden and ignored directories and scripts from thelist insettingsSettings >Ignore List.

Ignore a script from the Editor pane

To ignore a script from theEditor pane:

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

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

Ignore a script from the Call Stack pane

To ignore a script from theCall Stack pane:

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

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

Ignore a script from Settings

SeesettingsSettings >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, andrun within DevTools.

SeeRun 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 JavaScriptexpression.

• ClickAdd Expressionaddto create a new watch expression.
• ClickRefreshrefresh to refreshthe values of all existing expressions. Values automatically refresh whilestepping through code.
• Hover over an expression and clickDelete Expressionto delete it.

Inspect and edit scripts

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

Additionally, you canoverride the contents locally or create aworkspace and save the changes you make in DevTools directly to your local sources.

Make a minified file readable

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

To see the minified filed as it was loaded, clickdata_object in the bottom left corner of theEditor.

Fold code blocks

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

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

To configure this behavior, seesettingsSettings >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 thepage. You can edit your script in DevTools.

To edit a script:

1. Open the file in theEditor pane of theSources panel.
2. Make your changes in theEditor pane.

3. PressCommand+S (Mac) orCtrl+S(Windows, Linux) to save. DevTools patches the entire JavaScript file intoChrome's JavaScript engine.

   

Edit a paused function live

To live-edit a function:

1. Pause the execution with a breakpoint.
2. Edit the paused function.
3. PressCommand /Control +S to applychanges. The debuggerrestarts the function automatically.
4. Continue the execution.

Watch the video to learn this workflow.

In this example, theaddend1 andaddend2 variables initially have anincorrectstring type. So, instead of adding numbers, the strings areconcatenated. To fix it, theparseInt() functions are added during liveediting.

Search and replace text in a script

To search for text in a script:

1. Open the file in theEditor pane of theSources panel.
2. To open a built-in search bar, pressCommand+F (Mac) orCtrl+F (Windows, Linux).
3. In the bar, enter your query.Optionally, you can:
   • ClickMatch Case to make your query case-sensitive.
   • ClickUse Regular Expression to search using a RegEx expression.
4. PressEnter. To jump to previous or next search result, press theup or down button.

To replace the text you found:

1. On the search bar, clickReplace.
2. Type the text to replace with, then clickReplace orReplace all.

Disable JavaScript

SeeDisable JavaScript With Chrome DevTools.