使用 Chrome JavaScript 调试器/如何中断页面加载事件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6727370/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Using Chrome JavaScript Debugger / How to break on page loading events
提问by Peter Kellner
I'm using chrome's debugger and I'm good when it comes to setting break points once a page is running. My problem is when I do either f5 or press enter on the URL line my break points disappear. How can I set a break point in code that happens when the page first loads?
我正在使用 chrome 的调试器，并且在页面运行后设置断点时我很好。我的问题是当我执行 f5 或在 URL 行上按 Enter 时，我的断点消失了。如何在页面首次加载时发生的代码中设置断点？
采纳答案by Brian Topping
Later versions of Safari and Firefox should work properly with breakpoints across reloads, but one needs to be sure that the query is exactly the same between requests. ExtJS 4, for instance, adds a _dc=<epoch>that will disable the cache.
更高版本的 Safari 和 Firefox 应该可以在重新加载时使用断点正常工作，但需要确保请求之间的查询完全相同。例如，ExtJS 4 添加了_dc=<epoch>将禁用缓存的 。
To stop that behavior, add the following:
要停止该行为，请添加以下内容：
Ext.Loader.setConfig({
disableCaching: false,
enabled: true
});
Hope that helps!
希望有帮助！
回答by Bennett McElwee
In Chrome's Developer Tools, go to the Sourcestab. On the right, open up Event Listener Breakpoints, and you can set breakpoints on events.
在 Chrome 的开发者工具中，转到Sources选项卡。在右侧，打开Event Listener Breakpoints，您可以在事件上设置断点。
It sounds as if you'll want to set your breakpoint on DOMContentLoaded, which is under the DOM Mutationsection.
听起来好像您想在DOMContentLoaded上设置断点，它位于DOM Mutation部分下。
After you do this, reload the page and you'll end up in the debugger.
执行此操作后，重新加载页面，您将最终进入调试器。
回答by Dolan Antenucci
Try putting debugger;in your code. That also works in FF's Firebug
尝试debugger;输入您的代码。这也适用于 FF 的 Firebug
回答by yoAlex5
I use the next approach that is suitable for Chrome, Safariusing Charles Proxy[About]and Rewrite Tool
我使用适用于的下一个方法Chrome，Safari使用Charles Proxy[About]和Rewrite Tool
debugger;
or if you need to make a browser console wait
或者如果您需要让浏览器控制台等待
setTimeout(function(){
debugger;
console.log('gets printed only once after timeout');
}, 7000);
setTimeoutis a function that will trigger after delay to give a user time to attach the console
setTimeout是一个延迟后触发的函数，让用户有时间连接控制台
回答by arockia helan
Debugger can be set also by using XHR/fetch breakpoint
也可以使用XHR/fetch 断点设置调试器
In chrome developertools -> sources tab, in the right pane you can see XHR/fetch breakpointusing that you can set breakpoint.
在Chrome 开发者工具 -> 源选项卡中，在右侧窗格中您可以看到XHR/fetch 断点，您可以使用它来设置断点。
- Add breakpoint
- Enter the string which you want to break on. DevTools pauses when this string is present anywhere in an XHR's request URL.
- 添加断点
- 输入要中断的字符串。当此字符串出现在 XHR 的请求 URL 中的任何位置时，DevTools 会暂停。
If breakpoint has to be set for all XHR or fetch, please check the option Any XHR or fetch
如果必须为所有 XHR 或 fetch 设置断点，请选中Any XHR 或 fetch选项
In firefox developer, tools -> debugger tab, adding to the above feature we can set debugger based on request methods.
在firefox developer，工具 -> 调试器选项卡中，添加到上述功能我们可以根据请求方法设置调试器。
