如何调试Chrome扩展中的Service Worker与DevTools面板脚本？

MV3下这两类脚本的生命周期、运行上下文和普通网页脚本差异很大，手动在Sources面板点击添加的行断点经常因为上下文加载时机、休眠重建等问题无法命中，按以下方法操作即可正常调试：

• Service Worker脚本调试
  1. 打开chrome://extensions/扩展管理页，开启右上角「开发者模式」，找到目标扩展卡片
  2. 打开任意一个DevTools窗口，点击右上角齿轮图标进入设置，在「调试器」分类下勾选暂停Service Worker启动
  3. 回到扩展管理页，点击对应扩展卡片上的「Service Worker」链接打开专属调试窗口，此时Service Worker会直接断在启动第一行
  4. 此时再到Sources面板找到myextension.js，在需要的位置添加行断点，点击调试栏的继续执行按钮，断点即可正常命中
     注意：MV3 Service Worker在无事件触发30秒后会自动休眠，唤醒后之前手动添加的行断点会失效，最稳定的方式是直接在需要断点的位置写debugger;语句，不需要依赖调试器的断点绑定。
• DevTools页面、自定义面板脚本调试
  这部分脚本运行在DevTools自身的上下文里，普通的检查面板无法绑定到正确的执行上下文：
  1. 先打开任意网页的DevTools，切换到你扩展创建的「My Extension」自定义面板页，把DevTools设置为独立窗口弹出（点击DevTools右上角三个点，在「停靠位置」里选独立窗口图标）
  2. 保持这个独立DevTools窗口处于激活状态，按下Ctrl+Shift+I（Windows/Linux）/Cmd+Opt+I（Mac），会弹出第二层DevTools窗口，这个窗口才是绑定DevTools自身运行上下文的调试实例
  3. 不要直接在这个窗口里打行断点，先在devtools.myextension.js、panel.devtools.myextension.html对应的脚本开头添加debugger;语句，右键点击第一层DevTools窗口空白处选择「重新加载」，代码执行到debugger;位置会自动断住，此时再添加其他行断点就可以正常命中。

通用技巧：所有MV3扩展上下文调试中，硬编码的debugger;语句优先级和稳定性远高于调试器手动添加的行断点，不会因为上下文重建、脚本重载丢失断点绑定，适合排查生命周期不稳定的扩展脚本问题。

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