首页 > 解决方案 > 无法调试 Chrome 扩展的“content_scripts”中列出的 JavaScript 代码

问题描述

有一个由许多 .js 文件组成的 Chrome 扩展程序,它的 manifest.json 列出了其中一些在content_scripts部分内,其中一些在background部分内

"content_scripts": [
    {
        "matches": ["<all_urls>"],
        "js": ["content/interestingScript.js"
        "match_about_blank": true,
        "all_frames": true
    },
],

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

我将 Chrome 切换到开发人员模式并添加此扩展程序。扩展完全按预期工作。我想在一段代码上设置一个断点interestingScript.js,我肯定知道在扩展操作期间会在其中执行。

当我到达 chrome://extensions/?id=longRandomString 的扩展磁贴时,它说我可以检查背景页面并且有一个链接。我点击链接进入 DevTools,然后进入“Sources”选项卡。列background.js在左侧,但未interestingScript.js在此处列出。

我试图遵循这个答案并调出“内容脚本”选项卡,但脚本也不存在。我试图进入“文件系统”选项卡并添加存储源的文件夹并添加脚本但没有命中断点。我试图添加“调试器;” 我确定正在执行该代码,但再次没有任何反应。我还尝试alert()在该代码中插入调用 - 即使我在扩展页面上单击“重新加载”(在 chrome://extensions/?id=longRandomString),它们也没有效果

我不明白。

如何在 Chrome DevTools 中调试此代码?我究竟做错了什么?

标签: javascriptdebugginggoogle-chrome-extensiongoogle-chrome-devtools

解决方案


推荐阅读