如何从页面加载最开始阶段启动Chrome debugger调试JavaScript

该需求完全可以实现，你可以通过Chrome DevTools的内置断点能力，覆盖页面load事件触发前所有JS资源的加载执行流程调试，具体操作步骤如下：

操作步骤 #

• 打开Chrome DevTools（快捷键F12/Ctrl+Shift+I/Command+Option+I），切换到*源代码（Sources）*面板
• 找到右侧「事件监听器断点（Event Listener Breakpoints）」配置区，展开Script分类，勾选Script First Statement选项：该配置会让浏览器在每一个从服务器获取到的JS资源（包括同步加载脚本、异步加载脚本、动态插入脚本以及HTML内嵌脚本）执行第一行代码前自动触发断点，完全覆盖load事件触发前的所有JS执行时机
• 如果需要同时调试绑定在load事件中的回调代码，继续在「事件监听器断点」配置区展开Load分类，勾选load选项：所有绑定在window.load、document.load上的回调函数执行前都会自动触发断点，不管是load事件触发前绑定还是后续动态绑定的回调都会被捕获
• 完成配置后直接刷新页面，浏览器会按照配置的断点规则自动暂停执行，你可以逐行调试代码、查看调用栈、快照变量值等

调试优化技巧 #

如果页面引入了大量不需要调试的第三方脚本，可以在源代码面板的「忽略列表（Ignore List）」中添加对应域名或文件规则，配置后第三方脚本不会触发断点，避免干扰你调试业务代码。

内容的提问来源于stack exchange，提问作者Nicolas Bourdon