在 DOM 变异时中断

DOM 变异断点会在修改您设置断点的 DOM 节点时暂停代码。

您可以在 页面检查器 中设置 DOM 变异断点。导航到您感兴趣的 DOM 节点，并使用上下文菜单设置断点。

有三种选择

子树修改

如果元素的任何后代节点被修改，则执行将暂停。
这意味着，只要将子节点或 DOM 结构中更深层次的后代节点添加到设置了该选项的元素中或从该元素中移除，脚本执行就会停止。

触发此断点的示例包括调用 Node.appendChild() 和 Node.removeChild()，调用 Element.remove() 或在其中一个子节点上设置 Element.innerHTML。

属性修改

当元素的任何属性被修改时，执行将暂停。
这意味着，只要向设置了该选项的元素添加或从中删除属性，或者更改其其中一个属性的值，脚本执行就会停止。

触发此断点的示例包括调用 Element.setAttribute()、Element.removeAttribute() 和 Element.classList.add()，或设置 Element.id。

节点移除

如果设置了该选项的元素被移除，则执行将暂停。

触发此断点的示例包括调用 Element.remove() 或在其父节点上调用 Node.removeChild()。

设置断点后，转到调试器。您可以在最右侧的面板中，在“DOM 变异断点”下看到已列出的断点。

单击节点名称后面的图标，即可返回到页面检查器并选择该节点。

执行代码时，调试器会在发生 DOM 变异时暂停执行。在以下示例中，通过添加新的子节点来修改选定的节点（无序列表）。

右侧的面板显示执行已“在 DOM 变异时暂停”，并且与任何其他断点一样，您可以查看调用堆栈并查看可能设置的任何监视表达式。

内联变量预览

Firefox 71 中的新功能，源代码窗格 现在可以即时预览您已单步执行的代码每一行上的变量。有关详细信息，请参阅 设置断点 > 内联变量预览。