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

Question

我刚刚开始使用 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"
  ]
}

背景.js：

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

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

Answer 1

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

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

1. 访问

   chrome://extensions/

   或右键单击扩展程序图标并选择“管理扩展程序”。
2. 启用开发者模式
3. 单击名为

   background page

   (ManifestV2) 或

   service worker

   (ManifestV3) 的链接。

ManifestV2 扩展的屏幕截图：

ManifestV3 扩展的屏幕截图：

Answer 2

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

Answer 3

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

Answer 4

另外

如果你想在

manifest.json

中查看 content_script

js 文件（当未设置“background”属性时）

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

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

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

Answer 5

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

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

Answer 6

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

Answer 7

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

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

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

Answer 8

我也遇到这个问题了。我的网页似乎没有更新到新保存的脚本。通过在 Chrome 浏览器中按

Ctrl

+ 刷新（或

Ctrl

+

F5

）可以解决此问题。

Answer 9

对于那些开发 Firefox 扩展的人：

TL;DR版本：您需要使用Ctrl+Shift+J调出浏览器控制台窗口，然后单击右上角的设置图标并确保选中“显示内容消息”。

相关 stackoverflow 问题的更长解释：如何在 Firefox WebExtension 中查看后台脚本的 console.log 输出？

Answer 10

就我而言，我必须单击Exntensions面板中的Inspect Pop-up按钮，该按钮会打开一个新窗口，其中包含用于扩展的专用控制台。