如何在页面刷新时保留 Chrome DOM 断点？

Posted 2023-03-05

【中文标题】如何在页面刷新时保留 Chrome DOM 断点？

【英文标题】：How do you preserve Chrome DOM breakpoints on page refresh?

【发布时间】：2016-03-21 23:42:51

【问题描述】：

我想查看哪些代码正在修改网页上的 DOM 元素，因此我在 Chrome 中设置了一个断点，方法是右键单击 DevTools 检查器的“元素”选项卡中的元素并选择“Break on...” - > “子树修改”。该脚本在页面加载时（而不是之后）修改元素，所以我想保留 DOM 断点并刷新页面。

在 javascript 代码中保存断点的过程似乎不适用于 DOM 断点。

【问题讨论】：

AFAIK 这是不可能的，但我认为你的用例是可靠的，你绝对应该为此开一张票-> crbug.com

打开了一个问题：code.google.com/p/chromium/issues/detail?id=571519

【参考方案1】：

现在我在任何其他代码运行之前添加了一个debugger; 行，添加了一个 DOM 断点，然后继续。

【参考方案2】：

在 Chrome 中，DOM 断点不会在刷新时保留，它们会被丢弃，然后在 onload 事件后恢复。请参阅bug report 571519，以及该报告中的评论：

我们在重新加载时保留 DOM 断点，但断点仅在 onload 事件时恢复。因此，如果您希望断点在此之前触发，或者它设置在延迟添加的节点上，则不会恢复断点。不过我们应该解决这个问题。

这是解决方法：

暂停 Javascript，使用普通断点或 debugger; Javascript 行 移除所有 DOM 断点并添加所需的 DOM 断点 简历。

【讨论】：

谢谢你，过去的我自己！

只是一个更新：他们不会解决问题，错误报告已被标记/关闭为 "WontFix"。

【参考方案3】：

我相信这对答案没有适当的解释，因为我也面临这个问题。步骤如下。

按控制台 f12 打开开发者工具， 您需要尝试降低网页渲染速度，以便能够快速暂停 javascript 执行，我使用的技巧是转到网络选项卡并将在线下拉字段设置为慢 3G 以便页面变为渲染速度较慢。 选择源选项卡，然后在左侧边栏检查断点并确保已删除所有断点，如果仍然设置了一些断点，则将其删除 点击 上的暂停执行按钮 返回您的网页并重新加载它，网络设置为慢 3g，您的页面呈现速度变慢，然后您可以快速返回源代码并在您看到 html dom 已加载的那一刻暂停执行。这样你的网页就处于暂停状态 转到您的元素选项卡，找到要设置断点的元素并设置它。然后返回源选项卡并单击继续执行，这将使执行在元素的断点处停止