如果我想对某个 Web 应用进行 DOM 检查，而该应用过于频繁地更改其 DOM 结构，那么 Firebug 和 Chrome 检查器就会反映这些更改，而不允许我实际检查它们。
如果我专注于一个元素并想要更好地观察它，而该元素被删除了，我通常无法检查该元素。
有没有什么办法可以在某个点上“冻结”网页，或者仅仅冻结那些工具的检查器中的 DOM 更改？
答案1
在 Chrome 和 Chromium 中，您可以在开发人员工具的 Elements/Inspector 选项卡中右键单击某个节点，并选择在子树修改、属性修改和节点删除时中断。虽然您无法在这些断点上添加条件，例如仅当某个变量保持指定值时才中断，但这些是我发现的最佳选择。
在 Firefox 中，通过单击“调试器”选项卡右侧的“展开窗格”按钮可以找到可以中断的事件。
如果您不知道 DOM 将在何处被修改，则在子树修改时中断非常有用。只需在 body 节点（或更高节点）上设置该条件，它就会立即停止修改 body 节点下方 DOM 的任何脚本。当您要检查的节点尚不存在但您知道它将插入到何处时，这也非常有用，因此您可以在被修改的父节点上中断。
DOM 基本上会被冻结在实际更改发生（如插入节点）之前的状态，而脚本调试器则位于触发修改的那一行。
一个问题是浏览器窗口会覆盖一层，阻止与其进行任何交互，甚至无法右键单击并选择要检查的其他元素。仍然可以通过在“元素”选项卡中选择其他节点来检查它们，或者先单击工具窗口左上角的“选择页面上的元素进行检查”图标。
如果您想要检查当某些元素具有:focused、:hover、:active或 时DOM 的样子:visited，您也可以通过“元素”选项卡中的右键菜单强制这些状态。