Add, disable, or delete a DOM breakpoint
DOM Breakpoints allow you to pause script execution on a specific element in the DOM tree outline in the Elements tab. You can use these breakpoints if you know that something is changing part of the DOM but you’re unable to find the specific backtrace in your code.
Add a DOM breakpoint
In the Elements tab, Option-click an element, choose Break On from the shortcut menu, then choose an item from the submenu:
Subtree Modified: Pauses execution if any element in the subtree including and below the selected element is modified in any way (added, removed, or changed attribute).
Attribute Modified: Pauses execution whenever the selected element's attributes change.
Node Removed: Pauses execution whenever the selected element is removed from the document.
A dark blue marker, opaque by default, is added to the left side of the DOM Tree outline, indicating that a breakpoint is set on that element and that the debugger will pause when execution reaches the breakpoint.
When a DOM breakpoint is hit, the relevant element, pause reason, and call stack are all shown in the navigation sidebar of the Debugger tab. The state of the element is viewable in the Scope Chain sidebar if it is bound to a variable that is in scope.
Turn a DOM breakpoint on or off
Click the blue marker, or Option-click the marker, then choose Disable Breakpoints from the shortcut menu. The breakpoint appears light blue if it is disabled.
Delete a DOM breakpoint
Option-click the marker, then choose Delete Breakpoints from the shortcut menu.