我该如何调试Chrome扩展程序？

Question

我正在通过示例学习Chrome扩展。这是我目前正在学习的示例：http://www.chrome-extensions.net/extensions/mappy/

此示例项目中有三个JavaScript文件：background.js、mappy_content_script.js和popup.js。

“mappy_content_script.js”显示在开发者工具的脚本选项卡的组合框中。
如果我右键单击扩展图标并选择“检查弹出窗口”，则可以找到“popup.js”。

问题是我无法调试“background.js”或在开发者工具中找到它。我尝试在此JavaScript文件中插入“debugger;”。我还尝试使用分析工具记录脚本执行。但是，当我单击“background.js”的链接时，会显示一个空白页面。

这是Chrome的错误还是我漏掉了什么？谢谢

- Xiong

Answer 1

background.js是在后台加载的。若要检查它，请访问chrome://extensions，找到已加载的扩展程序，并为后台脚本“检查活动视图”。

编辑

下面是Chrome扩展程序页面的截图。点击链接background page打开此扩展程序的后台页面。

附加信息

编辑于2020年

以下是如何查看内容脚本并进行调试的方法：

- abraham

---

太好了！非常感谢！我希望谷歌能将这三个调试上下文整合为一个。 - Xiong

不确定动画中发生了什么或者是否有所改变，但现在我可以通过chrome://extensions/ -> 检查视图：背景页面进入调试控制台。 - Jonathan Rys

Answer 2

如今，你需要安装一个Chrome扩展程序来允许你检查页面的视图，特别是开发和调试Chrome应用程序和扩展

- Nels Beckman

---

这个跟 chrome://extensions 相比有什么不同之处呢？界面看起来几乎一模一样。 - Michael

Answer 3

有一种简单的方法可以在 DevTool 中访问您的扩展代码并进行调试。

打开 DevTool（例如 F12），点击“Sources”选项卡，然后查找“Content Scripts”菜单，该菜单位于“Page”、“Filesystem”、“Overrides”等旁边，并单击它。

你应该在那里看到所有活动的扩展名，并且可以轻松地为每个JavaScript代码添加断点并重新加载页面以进行调试。

- pref