如何调试Chrome扩展?

yrwegjxp  于 2023-05-20  发布在  Go
关注(0)|答案(3)|浏览(287)

我正在通过例子学习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文件中。我还尝试使用分析工具来记录脚本执行。然而,当我点击“background.js”链接时,出现了一个空白页面。

这是一个错误的 chrome 或我错过了什么?谢谢

gj3fmq9x

gj3fmq9x1#

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

编辑

下面是chrome扩展页面的截图。单击链接background page将打开此扩展的背景页面。

补充资料
编辑2020
下面是如何查看内容脚本和调试的方法,

kmpatx3s

kmpatx3s2#

现在,你必须安装一个Chrome扩展程序来检查页面的视图,特别是Develop and Debug Chrome Apps & Extensions

j5fpnvbx

j5fpnvbx3#

有一种简单的方法可以在DevTool中访问您的扩展代码并对其进行调试。
打开DevTool(例如F12),点击“源”标签,然后寻找“内容脚本”菜单旁边的页面,文件系统,覆盖等。然后点击它。

你应该看到所有活动的扩展都列在那里,你可以很容易地添加断点到每个js代码,并重新加载页面进行调试

相关问题