How to pause your code with breakpoints in Microsoft Edge DevTools

Use breakpoints to pause your JavaScript code. This article explains each type of breakpoint available in DevTools, as well as when to use and how to set each type.

For an introductory tutorial using an existing webpage, navigate to Get started with debugging JavaScript in Microsoft Edge DevTools.

Overview of when to use each breakpoint type

The most well-known type of breakpoint is line-of-code. But line-of-code breakpoints may be inefficient to set, especially if you do not know exactly where to look, or if you are working with a large codebase. You may save yourself time when debugging by knowing how and when to use the other types of breakpoints.

Breakpoint Type Use This When You Want To Pause...
Line-of-code On an exact region of code.
Conditional line-of-code On an exact region of code, but only when some other condition is true.
DOM On the code that changes or removes a specific DOM node, or the children.
XHR When an XHR URL contains a string pattern.
Event listener On the code that runs after an event, such as click, runs.
Exception On the line of code that is throwing a caught or uncaught exception.
Function Whenever a specific command, function, or method is run.

Line-of-code breakpoints

Use a line-of-code breakpoint when you know the exact region of code that you need to investigate. DevTools always pauses before this line of code is run.

To set a line-of-code breakpoint in DevTools:

  1. Choose the Sources tool.

  2. Open the file containing the line of code on which you want to break.

  3. Go the line of code.

  4. To the left of the line of code is the line number column. Choose it. A red icon appears next to the line number column.

    A line-of-code breakpoint

Line-of-code breakpoints in your code

Run the debugger method from your code to pause on that line. This is equivalent to a line-of-code breakpoint, except that the breakpoint is set in your code, not in the DevTools UI.

console.log('a');
console.log('b');
debugger;
console.log('c');

Conditional line-of-code breakpoints

Use a conditional line-of-code breakpoint when you know the exact region of code that you need to investigate, but you want to pause only when some other condition is true.

To set a conditional line-of-code breakpoint:

  1. Choose the Sources tool.

  2. Open the file containing the line of code on which you want to break.

  3. Go the line of code.

  4. To the left of the line of code is the line number column. Hover on the line number and open the contextual menu (right-click).

  5. Choose Add conditional breakpoint. A dialog displays underneath the line of code.

  6. Enter your condition in the dialog.

  7. Select Enter to activate the breakpoint. An icon next to the line number column.

    A conditional line-of-code breakpoint

Manage line-of-code breakpoints

Use the Breakpoints pane to disable or remove line-of-code breakpoints from a single location.

The Breakpoints panel

  • Check the checkbox next to an entry to disable that breakpoint.

  • Hover on an entry and open the contextual menu (right-click) to remove that breakpoint.

  • Hover anywhere in the Breakpoints pane and open the contextual menu (right-click) to deactivate all breakpoints, disable all breakpoints, or remove all breakpoints. Disabling all breakpoints is equivalent to unchecking each one. Deactivating all breakpoints instructs DevTools to ignore all line-of-code breakpoints, but to also maintain the enabled state so that each are in the same state as before when you reactivate each one.

    Deactivated breakpoints in the Breakpoints pane

DOM change breakpoints

Use a DOM change breakpoint when you want to pause on the code that changes a DOM node or the children.

To set a DOM change breakpoint:

  1. Choose the Elements tool.

  2. Go the element on which you want to set the breakpoint.

  3. Hover on the element and open the contextual menu (right-click).

  4. Hover on Break on, then choose Subtree modifications, Attribute modifications, or Node removal.

    The context menu for creating a DOM change breakpoint

Types of DOM change breakpoints

  • Subtree modifications. Triggered when a child of the currently-selected node is removed or added, or the contents of a child are changed. Not triggered on child node attribute changes, or on any changes to the currently-selected node.
  • Attributes modifications: Triggered when an attribute is added or removed on the currently-selected node, or when an attribute value changes.
  • Node Removal: Triggered when the currently-selected node is removed.

XHR/Fetch breakpoints

Use an XHR breakpoint when you want to break when the request URL of an XHR contains a specified string. DevTools pauses on the line of code where the XHR runs the send() method.

Note

This feature also works with Fetch API requests.

One example of when this is helpful is when your webpage is requesting an incorrect URL, and you want to quickly find the AJAX or Fetch source code that is causing the incorrect request.

To set an XHR breakpoint:

  1. Choose the Sources tool.

  2. Expand the XHR Breakpoints panel.

  3. Choose Add breakpoint.

  4. Enter the string which you want to break on. DevTools pauses when this string is present anywhere in an XHR request URL.

  5. Select Enter to confirm.

    Create an XHR breakpoint

Event listener breakpoints

Use event listener breakpoints when you want to pause on the event listener code that runs after an event is fired. You are able to select specific events, such as click, or categories of events, such as all mouse events.

  1. Choose the Sources tool.

  2. Expand the Event Listener Breakpoints panel. DevTools shows a list of event categories, such as Animation.

  3. Check one of these categories to pause whenever any event from that category is fired, or expand the category and check a specific event.

    Create an event listener breakpoint

Exception breakpoints

Use exception breakpoints when you want to pause on the line of code that is throwing a caught or uncaught exception.

  1. Choose the Sources tool.

  2. Choose Pause on exceptions (Pause on exceptions). The icon turns blue when enabled.

    The Pause on exceptions button

  3. Optional. Check the Pause On Caught Exceptions checkbox if you also want to pause on caught exceptions, in addition to uncaught ones.

    Paused on an uncaught exception

Function breakpoints

Run the debug(method) method, where method is the command, function, or method you want to debug, when you want to pause whenever a specific function is run. You may insert debug() into your code (like a console.log() statement) or run the method from the DevTools Console. debug() is equivalent to setting a line-of-code breakpoint on the first line of the function.

function sum(a, b) {
    let result = a + b; // DevTools pauses on this line.
    return result;
}
debug(sum); // Pass the function object, not a string.
sum();

Make sure the target function is in scope

DevTools throws a ReferenceError if the function you want to debug is not in scope.

(function () {
    function hey() {
        console.log('hey');
    }
    function yo() {
        console.log('yo');
    }
    debug(yo); // This works.
    yo();
})();
debug(hey); // This does not work.  hey() is out of scope.

Ensuring the target function is in scope is tricky if you are running the debug() method from the DevTools Console. Here is one strategy:

  1. Set a line-of-code breakpoint somewhere where the function is in scope.
  2. Trigger the breakpoint.
  3. Run the debug() method in the DevTools Console while the code is still paused on your line-of-code breakpoint.

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.