在Chrome的开发者工具中，进入源代码标签，在右边打开事件监听器断点，你可以在事件上设置断点。
听起来好像您要在DOMContentLoaded上设置断点，它位于DOM Mutation部分下面。
完成此操作后，重新加载页面，您将进入调试器。

试着把debugger;放到你的代码中，这在FF的Firebug中也是有效的

Safari和Firefox的后续版本应该可以在重载时使用断点，但需要确保请求之间的查询完全相同。例如，ExtJS 4添加了一个_dc=<epoch>，它将禁用该高速缓存。
要停止该行为，请添加以下内容：

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

希望能有所帮助！

Chrome浏览器JavaScript调试器

我使用下一种方法，它适用于Chrome，Safari使用Charles ProxyAbout(https://stackoverflow.com/a/54516008/4770877)和Rewrite Tool

debugger;

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

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

setTimeout是一个函数，它将在延迟后触发，以便为用户给予连接控制台的时间

也可以使用XHR/fetch breakpoint设置调试器
在chrome developertools -〉sources选项卡的右窗格中，您可以看到XHR/fetch breakpoint，使用它可以设置断点。
1.添加断点
1.输入您要中断的字符串。当此字符串出现在XHR请求URL的任何位置时，DevTools将暂停。
如果必须为所有XHR或提取设置断点，请选中选项任何XHR或提取
在firefox developer中，工具-〉调试器选项卡，添加到上面的特性，我们可以根据请求方法设置调试器。

如果你想在javascript第一次加载到浏览器的时候停止它（而不是在DOMContentLoaded事件监听器被触发的时候），只需点击chrome调试器中的暂停按钮，然后用F5键盘按钮重新加载你的页面。