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.
This is not limited to immediate descendants, however, so setting a Subtree Modified DOM breakpoint on the
This includes when new attributes are added (e.g.
setAttribute, and when existing attributes are completely removed (e.g.
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.