访问扩展程序 background.js 的控制台和开发工具答案

【问题标题】：Accessing console and devtools of extension's background.js访问扩展程序 background.js 的控制台和开发工具
【发布时间】：2012-05-02 16:37:23
【问题描述】：

我刚开始使用 Google Chrome 扩展程序，但我似乎无法从我的后台 js 登录到控制台。当发生错误时（例如由于语法错误），我也找不到任何错误消息。

我的清单文件：

{
  "name": "My First Extension",
  "version": "1.0",
  "manifest_version": 2,
  "description": "The first extension that I made.",
  "browser_action": {
    "default_icon": "icon.png"
  },
  "background": {
    "scripts": ["background.js"]
  },
  "permissions": [
    "pageCapture",
    "tabs"
  ]
}

background.js：

alert("here");
console.log("Hello, world!")

当我加载扩展程序时，会出现警报，但我没有看到任何内容被记录到控制台。我做错了什么？

【问题讨论】：

How to debug Google Chrome background script? 的可能重复项
如果突出显示的栏位于其他选项卡上，请选择消息或信息，例如 No verbose selected tab matters

标签： debugging google-chrome-extension console google-chrome-devtools

【解决方案1】：

你看错地方了。这些控制台消息不会出现在网页中，而是出现在不可见的背景页面（ManifestV2）或 Service Worker（ManifestV3）中。

要查看后台脚本上下文的正确控制台打开开发工具：

访问chrome://extensions/或右键单击扩展图标并选择“管理扩展”。
启用开发者模式
点击名为background page (ManifestV2) 或service worker (ManifestV3) 的链接。

ManifestV2 扩展的屏幕截图：

ManifestV3 扩展的屏幕截图：

【讨论】：

@RobW，我没有用于展开扩展的三角形按钮，也没有看到任何活动视图。这个答案不再是最新 Chrome 版本的解决方案，还是我遗漏了什么？
@ggundersen 我已经更新了图片。三角形已被移除，该步骤现在会在开发者模式激活时自动发生。
那你如何调试内容脚本呢？
@SuperUberDuper 通过运行内容脚本的选项卡中的 devtools。
当我点击它时什么都没有出现。

【解决方案2】：

我遇到了同样的问题，在我的情况下，Chrome 开发人员工具的控制台选项卡中的日志记录设置为“全部隐藏”。我什至没有意识到这是一个选项，我不记得把它关掉了

【讨论】：

【解决方案3】：

对于希望查看其 chrome 扩展的“内容脚本”的调试控制台的关注者，可以通过执行普通的“显示开发者控制台”然后使用下拉箭头选择其“javascript 环境”然后你'将可以访问其方法等。

【讨论】：

【解决方案4】：

另外

如果您想在 manifest.json

中查看content_script js 文件（未设置“背景”属性时）

"content_scripts": [{
    "matches": ["<all_urls>"],
    "js": ["popup.js"],
  }]

"browser_action": {
    "default_icon": "icon_32.png",
    "default_popup": "popup.html"
  }

然后在扩展图标上右键单击并单击检查弹出窗口并打开开发人员窗口并打开popup.html，您会看到控制台选项卡。

【讨论】：

1) 这不能回答问题，2) 这完全是错误的；内容脚本将消息记录到注入它的页面的控制台中，即实际的浏览器选项卡。我想在您的代码中，popup.js 在popup.html 中被重用，因此该副本的输出将转到您提到的位置。但这完全是误导。
这个答案可以帮助我检查作为弹出窗口运行的 chrome 扩展的日志

【解决方案5】：

与 Michiel 的回答类似，我也有一个有趣的控制台配置：我不记得设置的过滤器：

清除过滤器后，我看到了消息。

【讨论】：

【解决方案6】：

我也有这个问题。好像我的网页没有更新到新保存的脚本。通过在 chrome 浏览器中按 Ctrl + 刷新（或 Ctrl + F5）解决了这个问题。

【讨论】：

【解决方案7】：

如果我们想从弹出页面读取打印到控制台的消息，我们可以单击扩展图标打开弹出页面，然后在弹出页面的任意位置右键单击，将显示一个下拉菜单，我们只需单击“检查" 菜单打开开发者工具。请注意，弹出页面必须保持打开状态。如果被关闭（通过window.close()），开发者工具也会被关闭。

【讨论】：

【解决方案8】：

其他答案适用于 background.js，但是，如果您正在从弹出窗口中寻找 console.logs，那么您可以尝试：

var bkg = chrome.extension.getBackgroundPage();
bkg.console.log('foo');

我正在使用 cra 进行开发，这对我有用。

【讨论】：