Web Inspector ReferenceDOM Breakpoints

This article is a “continuation” of JavaScript breakpoints, and as such it is highly recommended that you read it before reading this article, as many concepts defined there will be referenced here without explanation.

In addition to JavaScript breakpoints, there is another type of breakpoint, called a DOM breakpoint, that can be useful when debugging DOM modifications in JavaScript.

Unlike JavaScript breakpoints and event breakpoints, however, DOM breakpoints are set by right-clicking on any DOM node preview or link, such as the DOM tree in the Elements Tab, and choosing one of the items in the Break on submenu.

Once a DOM breakpoint has been added, it will be shown in both the Elements Tab and Sources Tab, and can be enabled/disabled/removed from both. Just like in the Sources Tab, clicking on the breakpoint icon in the Elements Tab will toggle the DOM breakpoint ‘s enabled/disabled state.


If a DOM breakpoint has been added to a child DOM node, and one of the ancestor/parent DOM nodes is collapsed in the DOM tree, a “hollow” breakpoint icon is shown in the Elements Tab. Right-clicking on it (or anywhere on the associated DOM node) will show options to Enable Descendant Breakpoints / Disable Descendant Breakpoints, Delete Descendant Breakpoints, and Reveal Descendant Breakpoints.

DOM breakpoints can be configured in three ways: Subtree Modified, Attribute Modified, and Node Removed.

Subtree Modified

DOM breakpoints of this type will pause JavaScript execution whenever any DOM node is added/removed to the subtree of the associated DOM node.

This is not limited to immediate descendants, however, so setting a Subtree Modified DOM breakpoint on the <body> will pause JavaScript execution every time any DOM node is added/removed from the <body>.

Attribute Modified

DOM breakpoints of this type will pause JavaScript execution whenever any attribute is modified on the associated DOM node.

This includes when new attributes are added (e.g. setAttribute, and when existing attributes are completely removed (e.g. removeAttribute).

Node Removed

This DOM breakpoint is very straightforward, in that it will pause JavaScript execution if the associated DOM node is removed from the DOM tree.

Node Removed DOM breakpoints entirely “consume” Subtree Modified DOM breakpoints set on an ancestor DOM node, meaning that any Subtree Modified DOM breakpoints set on any ancestor DOM nodes will not fire.

Written January 14, 2020 by Devin Rousso

Last updated January 27, 2020 by Devin Rousso