Use the debugger features

This article covers how to use the debugger in Microsoft Edge DevTools, including how to set a line-of-code breakpoint. To set other types of breakpoints, see Pause your code with breakpoints.

To learn the basics of debugging, navigate to Get started with debugging JavaScript in Microsoft Edge DevTools, which is a tutorial that uses an existing, form-based webpage. The tutorial has screen captures, so you can skim it. You can easily try out the debugger features by using the demo webpage.

View and edit JavaScript code

When fixing a bug, you often want to try out some changes to your JavaScript code. You don't need to make the changes in an external editor or IDE, re-upload the file to the server, and then refresh the page; instead, to test changes, you can edit your JavaScript code directly in DevTools and see the result immediately.

To view and edit a JavaScript file:

  1. Navigate to the Sources tool.

  2. In the Navigator pane, select your file, to open it in the Editor pane.

  3. In the Editor pane, edit your file.

  4. Select Ctrl+S (Windows, Linux) or Command+S (macOS) to save. DevTools then loads the JavaScript file into the JavaScript engine of Microsoft Edge.

    The Editor pane

Reformat a minified JavaScript file with pretty-print

To make a minified file human-readable, choose the Format (Format) button at the bottom of the Editor pane.

The Format button

Set a breakpoint, to pause code

To pause your code in the middle of the runtime, set a breakpoint. The most basic and well-known type of breakpoint is a line-of-code breakpoint.

Use a line-of-code breakpoint when you know the exact region of code that you need to investigate. DevTools always pauses at the specified line of code, before running it.

To set a line-of-code breakpoint:

  1. Navigate to the Sources tool.

  2. Open the file that contains the line of code.

  3. Select the area to the left of the line number for the line of code. Or, right-click the line number and then choose Add breakpoint. A red circle then appears next to the line number, indicating a breakpoint.

    A line-of-code breakpoint

Line-of-code breakpoints may be inefficient to set, especially if you do not know exactly where to look, or if your codebase is large. To save time when debugging, learn how and when to use the other types of breakpoints. For more information, navigate to Pause your code with breakpoints.

Step through code

After your code is paused at a breakpoint, step through the code, 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 isn't relevant to the problem you are debugging, choose the Step over (Step over) button to run the function without stepping into it.

Choose Step over

For example, suppose you are debugging the following code snippet.

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 are paused on A. After you choose Step over, DevTools runs all the code in the function that you are 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 are debugging, choose the Step into (Step into) button to investigate that function further.

Choose Step into

For example, suppose you are debugging the following code snippet.

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 are paused on A. After you choose Step into, DevTools runs this line of code, then pauses on B.

Step out of line of code

When paused inside of a function that isn't related to the problem you are debugging, choose the Step out (Step out) button to run the rest of the code of the function.

Choose Step out

For example, suppose you are debugging the following code snippet.

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 are paused on A. After you choose Step out, DevTools runs 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 specific line

When debugging a long function, there may be a lot of code that isn't related to the problem you are debugging.

You may choose to step through all the lines, but that is tedious. You may choose to set a line-of-code breakpoint on the line in which you are interested and then choose the Resume script execution (Resume script execution) button, but there is a faster way.

Hover on the line of code in which you are interested, open the contextual menu (right-click), and choose Continue to here. DevTools runs all of the code up to that point, and then pauses on that line.

Choose Continue to here

Restart the top function of the call stack

To pause on the first line of the top function in your call stack, while paused on a line of code, hover anywhere in the Call Stack pane, open the contextual menu (right-click), and choose Restart frame. The top function is the last function that was run.

The following code snippet is an example for you to step-through.

function factorial(n) {
    var product = 0; // B
    for (var i = 1; i <= n; i++) {
      product += i;
    }
    return product; // A
}

You are paused on A. After choosing Restart frame, you should be paused on B, without ever setting a breakpoint or choosing Resume script execution.

Choose Restart frame

Resume script runtime

To continue the runtime after a pause of your script, choose the Resume script execution (Resume script execution) button. DevTools runs the script up until the next breakpoint, if any.

Choose Resume script execution

Force script runtime

To ignore all breakpoints and force your script to continue to run, choose and hold the Resume script execution (Resume script execution) button and then choose the Force script execution (Force script execution) button.

Choose Force script execution

Change thread context

When working with web workers or service workers, choose on a context listed in the Threads pane to switch to that context. The blue arrow icon represents which context is currently selected.

The Threads pane

For example, suppose that you are 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 tool is showing the main script context. To switch to the service worker context, in the Threads pane, choose the service worker entry.

View and edit properties and variables

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.

The Scope pane

Watch the values of JavaScript expressions

Use the Watch pane to watch the values of custom expressions. You can watch any valid JavaScript expression.

The Watch pane

  • To create a new watch expression, select the Add watch expression (Add watch expression) button.
  • To refresh the values of all existing expressions, select the Refresh (Refresh) button. Values automatically refresh while stepping through code.
  • To delete a watch expression, right-click the expression and then select Delete watch expression (Delete watch expression).

View the 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.

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

The Call Stack pane

Note

When not paused on a line of code, the Call Stack pane is empty.

Copy stack trace

To copy the current call stack to the clipboard, hover anywhere in the Call Stack pane, open the contextual menu (right-click), and choose Copy stack trace.

Choose Copy Stack Trace

The following code snippet is an example of the output.

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

Ignore a script or pattern of scripts

Mark a script as Library code when you want to ignore that script while debugging. When marked as Library code, a script is obscured in the Call Stack pane, and you never step into the functions of the script when you step through your code.

For example, in the following code snippet, line A uses lib, which is a third-party library. If you are confident that the problem you are debugging is not related to that third-party library, then it makes sense to mark the script as Library code.

function animate() {
    prepare();
    lib.doFancyStuff(); // A
    render();
}

Mark a script as Library code from the Editor pane

To mark a script as Library code from the Editor pane:

  1. Open the file.

  2. Hover anywhere and open the contextual menu (right-click).

  3. Choose Add script to ignore list (previously shown as Mark as Library code).

    Mark a script as Library code from the Editor pane

Mark a script as Library code from the Call Stack pane

To mark a script as Library code from the Call Stack pane:

  1. Hover on a function from the script and open the contextual menu (right-click).

  2. Choose Add script to ignore list (previously shown as Mark as Library code).

    Mark a script as Library code from the Call Stack pane

Mark a script as Library code from Settings

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

  1. Open Settings.

  2. Navigate to the Library code setting.

  3. Choose Add pattern.

  4. Enter the script name or a regex pattern of script names to mark as Library code.

  5. Choose Add.

    Mark a script as Library code 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 runtime scripts that you author, store, and run within DevTools.

See Run snippets of JavaScript on any webpage.

See also

Getting in touch with the Microsoft Edge DevTools team

Use the following options to discuss the new features and changes in the post, or anything else related to DevTools.

  • Send your feedback using the Send Feedback icon or select Alt+Shift+I (Windows, Linux) or Option+Shift+I (macOS) in DevTools.
  • Tweet at @EdgeDevTools.
  • Submit a suggestion to The Web We Want.
  • To file bugs about this article, use the following Feedback section.

The Send Feedback icon in the Microsoft Edge DevTools

Note

Portions of this page are modifications based on work created and shared by Google and used according to terms described in the Creative Commons Attribution 4.0 International License.
The original page is found here and is authored by Kayce Basques (Technical Writer, Chrome DevTools & Lighthouse).

Creative Commons License
This work is licensed under a Creative Commons Attribution 4.0 International License.