Web Inspector ReferenceDOM Breakpoints
Once a DOM Breakpoint has been added, it will be shown in both the DOM Tree in the Elements Tab and the Navigation Sidebar in the Sources Tab, and can be enabled/disabled/removed from both. Just like in the Sources Tab, clicking on [DOM Breakpoint] in the DOM Tree 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 in the Elements Tab, [Descendant DOM Breakpoint] is shown on the closest visible ancestor. 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 are preserved between Web Inspector sessions, but they are only re-added if a DOM node that matches the tag path (i.e. tag name and index within the parent node all the way to the root) of that DOM Breakpoint exists in the current page (e.g. a DOM Breakpoint with the tag path
body > div:nth-child(2) wouldn’t be shown if the second child of the
<body> was not a
DOM Breakpoints have three different types: 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.
This includes when an ancestor of the associated DOM node is removed from the DOM Tree as well.
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.
DOM Breakpoints have a few different configuration options, reachable by right-clicking and selecting Edit Breakpoint… in the context menu.
Rather than execute arbitrary code, however, you may just want to ignore the first few times the DOM Breakpoint is reached. If this is the case, setting the Ignore input to any positive integer will prevent the DOM Breakpoint from pausing execution until it has been reached that many times.
Now you may be wondering what’s an Action. There are four different types:
This is basically a “shortcut” for logging values using
Adding one of these will cause Web Inspector to play a system beep sound whenever the DOM Breakpoint is hit.
Probe Expression s can be thought of almost like a mini-Console. Each time the related DOM Breakpoint is hit, the Probe Expression is evaluated and the result is saved in the Probe panel in the Details Sidebar in the Sources Tab, allowing you to see how the result of the expression changes during the lifetime of your program. You can use this to observe changes to a specific variable (e.g.
this), or to changes in an entire expression (e.g.
this.foo === "bar").
If any Action is set, you can also configure the DOM Breakpoint to Automatically continue after evaluating. This will cause the DOM Breakpoint to become effectively “invisible”, in that it will never pause execution. DOM Breakpoints that Automatically continue after evaluating will have a small white triangle (“hollow”) in the icon:
DOM Breakpoints can either be enabled or disabled . Ideally, DOM Breakpoints will always be enabled , but there are a few reasons why they would be disabled :
- the DOM Breakpoint was manually disabled . Clicking (or right-clicking and selecting Enable Breakpoint or Disable Breakpoint in the context menu) on any breakpoint icon in the Navigation Sidebar in the Sources Tab will toggle between enabled and disabled .
- breakpoints have been globally disabled . The global breakpoint control is a button that looks just like a breakpoint located in the top of the Navigation Sidebar in the Sources Tab.
All enable/disable/delete toggles are available in the context menu when right-clicking on any DOM Breakpoint.
- enabled (breakpoints globally enabled)
- enabled (breakpoints globally enabled) with auto-continue
- disabled (breakpoints globally enabled)
- disabled (breakpoints globally enabled) with auto-continue
- enabled (breakpoints globally disabled)
- enabled (breakpoints globally disabled) with auto-continue
- disabled (breakpoints globally disabled)
- disabled (breakpoints globally disabled) with auto-continue