当内容不断变化时，使用 Firebug 或 Chrome Dev Tools 检查动态网页

Question

如果我想 DOM 检查一些经常更改其 DOM 结构的 Web 应用程序 Firebug 和 Chrome 检查器反映这些更改不允许我实际检查它们。

如果我专注于一个元素并想要更好地查看它并且该元素被删除，我通常无法检查该元素。

有什么方法可以在某个点“冻结”网页，或者仅针对这些工具冻结检查器中的 DOM 更改？

Answer 1

在 Chrome 和 Chromium 中，您可以右键单击开发人员工具的 Elements/Inspector 选项卡中的节点，然后选择中断子树修改、属性修改和节点删除。尽管您无法在这些断点上添加条件，例如仅在某个变量保持指定值时才中断，但这些是我发现的最佳选项。

在 Firefox 中，您可以通过单击“调试器”选项卡右侧的“展开窗格”按钮找到可以中断的事件。

如果您不知道 DOM 将在哪里被修改，则中断子树修改非常有用。只需在 body 节点（或更高）上设置该条件，它就会立即停止修改 body 节点下的 DOM 的任何脚本。当您要检查的节点尚不存在时，这也非常有用，但您知道它将插入的位置，以便您可以中断正在修改的父节点。

DOM 本质上将被冻结在实际更改发生之前的状态（如节点被插入），脚本调试器位于触发修改的行上。

一个问题是浏览器窗口获得了一个覆盖层，这会阻止与其进行任何交互，甚至右键单击并选择其他元素进行检查。仍然可以通过在“元素”选项卡中选择其他节点或首先单击工具窗口左上角的“选择页面上的元素进行检查”图标来检查其他节点。

如果你正在寻找检查一下DOM时像某些元素有:focused，:hover，:active，或者:visited，您也可以通过在元素标签的右键菜单迫使这些国家。