Firefox扩展调试器显示“This page has no sources”问题求助

我之前在Firefox 70版本也碰到过几乎一样的问题，用官方示例扩展调试时总是显示没有源码，后来发现是新调试器的上下文切换逻辑搞的鬼，给你几个亲测有效的排查步骤：

• 切换调试器上下文：新的附加组件调试器默认会加载扩展的后台页面上下文，如果你的示例扩展只有内容脚本（content script），后台页面是空的，自然会显示“This page has no sources”。你需要点击调试器右上角的上下文选择下拉框（通常显示当前的上下文名称，比如扩展ID或者“无”），选择和你正在测试的页面对应的内容脚本上下文，切换后就能看到你的源码了。

• 检查manifest配置与页面匹配：虽然你的扩展已经能给页面加边框，但还是确认下manifest.json里的content_scripts字段的matches规则是否覆盖了你当前打开的测试页面，比如如果规则是["https://*/*"]，那你得打开一个HTTPS页面才能触发内容脚本，调试器也才能捕获到对应的上下文。

• 重置调试器缓存：有时候Firefox的调试器缓存会出现异常，你可以尝试完全关闭Firefox（包括所有后台进程），然后重新打开，再加载临时附加组件并点击“Inspect”，大概率能解决缓存导致的加载问题。

• 验证调试相关配置：在about:config页面中，确保以下两个选项是true：

  • devtools.debugger.remote-enabled
  • devtools.chrome.enabled
    这两个是调试器正常工作的基础配置，默认是开启的，但如果之前被修改过就会影响调试。

• 测试带后台脚本的扩展：如果上面的方法都没用，你可以给示例扩展加一个简单的后台脚本试试。在manifest.json里添加：

"background": {
  "scripts": ["background.js"]
}

然后创建background.js文件，写入console.log("Background script loaded");。加载这个修改后的扩展，调试时应该能看到后台脚本的源码，这能帮你确认调试器本身是否正常工作，再回到原扩展排查内容脚本的问题。

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