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

Question

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

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

Answer 1

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

Answer 2

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

  

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

这是解决方法：

1. 使用正常断点或使用debugger; Javascript行
暂停Javascript
2. 删除所有DOM断点并添加所需的DOM断点
3. 简历。

Answer 3

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

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