访问扩展程序的 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"
  ]
}

background.js：

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

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

- grasaved

---

可能是如何调试Google Chrome后台脚本？的重复问题。 - ripper234

如果高亮的标签在其他选项卡上，如“无冗余”，请选择消息或信息。所选选项卡很重要。 - Siluveru Kiran Kumar

Answer 1

您正在看错地方。这些控制台消息不会出现在网页中，而是出现在不可见的后台页面（ManifestV2）或服务工作者（ManifestV3）中。

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

1. 访问chrome://extensions/或右键单击扩展图标并选择“管理扩展程序”。 2. 启用开发人员模式 3. 单击名为background page（ManifestV2）或service worker（ManifestV3）的链接。

ManifestV2扩展的截图：

ManifestV3扩展的截图：

- Rob W

---

@ggundersen 我已经更新了图片。三角形已被移除，当开发者模式被激活时，该步骤现在会自动发生。 - Rob W

你如何调试内容脚本呢？ - SuperUberDuper

@SuperUberDuper 通过运行内容脚本的选项卡中的开发工具。 - Rob W

当我点击那个时，什么也没有出现。 - velkoon

@velkoon，有时候它真的很容易出现错误，你需要禁用并重新启用扩展程序。 - strix25

Answer 2

我曾经遇到过同样的问题，在我的情况下，Chrome开发者工具中的控制台选项卡中日志记录设置为“全部隐藏”。

我甚至没有意识到这是一个选项，也不记得自己关闭了它。

- Michiel

Answer 3

对于希望查看他们的Chrome扩展程序中“内容脚本”的调试控制台的用户，可以通过正常的“显示开发者控制台”，然后使用下拉箭头选择其“JavaScript环境”，然后您将可以访问其方法等。

- rogerdpack

Answer 4

此外，如果您想在 manifest.json 中未设置 "background" 属性的情况下查看 content_script js 文件。

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

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

然后在扩展程序图标上右键单击，并点击检查弹出窗口，开发者窗口将打开，其中popup.html已打开，你可以在控制台选项卡中查看。

- diEcho

---

1. 这并没有回答问题。
2. 这是完全错误的；内容脚本将消息记录到注入的页面控制台中，即实际的浏览器标签页。我猜在你的代码中，popup.js被重用于popup.html，因此该副本的输出结果会发送到你提到的地方。但这是非常误导人的。

- Xan

这个答案帮助我检查作为弹出窗口运行的 Chrome 扩展程序的日志。 - RashFlash

Answer 5

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

清除筛选器后，我看到了这些消息。

- Tonio Liebrand

Answer 6

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

- Token Yi

Answer 7

其他答案适用于background.js，但是如果您正在寻找来自弹出窗口的console.logs，则可以尝试：

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

我使用 cra 进行开发，这对我很有效。

- Abhishek

Answer 8

我也遇到过这个问题。看起来我的网页没有更新到新保存的脚本。在 Chrome 浏览器中，按下 Ctrl + 刷新（或 Ctrl + F5）即可解决。

- user11510326

Answer 9

针对那些正在为 Firefox 开发扩展的人：

简短版：您需要使用 Ctrl+Shift+J 来调用浏览器控制台窗口，并单击右上角的设置图标，确保“显示内容消息”已被勾选。

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

- tst

Answer 10

在我的情况下，我不得不点击“检查弹出窗口”按钮，在“扩展”面板中打开一个新窗口，其中包含专用于扩展的控制台。

- Ovidijus Parsiunas