Break on DOM mutation¶

A DOM Mutation Breakpoint pauses the code when the DOM node on which you have set the breakpoint is modified.

You set a DOM Mutation Breakpoint in the Page Inspector. Navigate to the DOM node in which you are interested and use the context menu to set the breakpoint.

../../../_images/dom_breakpoint_context.png

There are three choices:

Subtree Modification

Execution pauses if any of the element’s descendant nodes are modified.<br> That means, the script execution is stopped whenever a child node or descendant node deeper in the DOM structure is added to or removed from the element the option is set on.

Examples for when this breakpoint is triggered are calling Node.appendChild() and Node.removeChild(), calling Element.remove() or setting Element.innerHTML on one of the subnodes.

Attribute Modification

Execution pauses when any of the elements’ attributes are modified.<br> That means, the script execution is stopped whenever an attribute is added to or removed from the element the option is set on or the value of one of its attributes is changed.

Examples for when this breakpoint is triggered are calling Element.setAttribute(), Element.removeAttribute(), and Element.classList.add(), or setting Element.id.

Node Removal

Execution pauses if the element the option is set on is removed.

Examples for when this breakpoint is triggered are calling Element.remove() or Node.removeChild() on its parent node.

Once you set the breakpoint, go to the Debugger. You can see the breakpoint listed in the right-most panel under DOM Mutation Breakpoints.

../../../_images/dom_mutation_breakpoint.png

Click on the icon following the node name to go back to the Page Inspector with the node selected.

When you execute the code, the debugger will pause execution when the DOM mutation occurs. In the following example, the selected node (the unordered list) is modified by adding a new child node.

../../../_images/dom_mutation_paused.png

The panel on the right shows that execution is “Paused on DOM mutation” and you, as with any other breakpoint, you can see the call stack and view any Watch expressions you may have set up.

Inline variable preview¶

New in Firefox 71, the source pane now gives you an instant preview of the variables on each line of code you’ve stepped through. See Set a breakpoint > Inline variable preview for more information.