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

【问题标题】：How do you preserve Chrome DOM breakpoints on page refresh?如何在页面刷新时保留 Chrome DOM 断点？
【发布时间】：2016-03-21 23:42:51
【问题描述】：

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

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

【问题讨论】：

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

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

这是解决方法：

【讨论】：

【解决方案3】：

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

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

【讨论】：