DevTools Tips

Categories: Supported by:

Pause script execution when the DOM changes

If you want to know what JavaScript code removes, adds, or modifies a DOM element in the page, you can use DOM breakpoints in DevTools. You can choose to break on:

This is useful if you don't know the codebase you are debugging for example.

To add a DOM breakpoint:

Screenshot of the Elements panel in Edge showing the "Break on" contextual menu on the selected node

Once the requested DOM modification occurs, the JavaScript execution will pause and DevTools will navigate to the Sources/Debugger panel, showing the right line of code where execution is paused.