使用Chrome JavaScript调试器/如何中断页面加载事件

Question

我正在使用chrome的调试器，在页面运行时设置断点我很好。我的问题是，当我执行f5或在URL行按Enter键时，我的断点消失。如何在页面首次加载时在代码中设置断点？

Answer 1

在Chrome的开发者工具中，转到来源标签。在右侧，打开事件监听器断点，您可以在事件上设置断点。

听起来好像你想要在 DOMContentLoaded 上设置你的断点，这是在 DOM Mutation 部分下。

执行此操作后，重新加载页面，您将最终进入调试器。

Answer 2

尝试在代码中添加debugger;。这也适用于FF的Firebug

Answer 3

Safari和Firefox的更高版本应该可以在重新加载时使用断点正常工作，但需要确保查询在请求之间完全相同。例如，ExtJS 4添加了一个_dc=<epoch>来禁用缓存。

要停止该行为，请添加以下内容：

Ext.Loader.setConfig({
    disableCaching: false,
    enabled: true
});

希望有所帮助！

Answer 4

也可以使用 XHR /提取断点

来设置

调试器

在 chrome开发人员工具->“源”选项卡中，在右窗格中，您可以看到用于设置断点的 XHR /获取断点。

1. 添加断点
2. 输入要中断的字符串。当此字符串出现在XHR的请求URL中的任何位置时，DevTools会暂停。

如果必须为所有XHR或提取设置断点，请选中选项任何XHR或提取

在 firefox开发人员中，工具->调试器标签中，我们可以根据请求方法设置调试器。

Answer 5

我使用适用于Chrome，Safari和Charles Proxy和Rewrite Tool的下一种方法

debugger;

或者如果需要让浏览器控制台等待

setTimeout(function(){ 
    debugger; 
    console.log('gets printed only once after timeout');
}, 7000);

Answer 6

如果您想在浏览器中首次加载 javascript 时停止它（而不是在 DOMContentLoaded 事件侦听器被触发时（稍后发生））只需单击 chrome 调试器中的暂停按钮并使用 F5 键盘按钮重新加载您的页面. 它对我有用。