如何调试Chrome扩展首次安装后首次运行的newtab.js

方法一：用开发者工具的“暂停执行”提前拦截 #

• 打开扩展管理页，找到你的扩展，进入对应的开发者工具（别先打开新标签页）
• 在Sources面板右上角，点击暂停执行按钮（切换为蓝色激活状态）
• 现在打开新标签页，Chrome会在脚本执行前立刻暂停，此时可手动在newtab.js中设置断点

方法二：修改脚本加载逻辑，给调试留缓冲时间 #

• 在newtab.js最顶部添加暂停逻辑，比如：

// 首次加载时弹窗暂停，方便打开调试工具
alert('请打开开发者工具设置断点，点击确定继续');

• 首次打开新标签页时，弹窗会卡住脚本执行，你可以趁这个时间打开开发者工具、设置断点，再点击确定继续执行

方法三：用Network面板阻止脚本加载，提前设断点 #

• 先打开一次新标签页，在Network面板找到newtab.js的请求记录
• 右键该请求，选择「阻止请求」，刷新页面，Chrome会阻止脚本加载
• 切换到Sources面板，找到newtab.js文件并设置断点，之后取消阻止请求、刷新页面，脚本会在断点处暂停

注意事项 #

• 尽量用隐身窗口测试，避免缓存干扰首次加载的调试场景
• 若debugger;语句首次无效，是Chrome即时编译优化导致，提前锁定脚本上下文可解决这个问题

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