217

我刚开始使用 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!")

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

4

8 回答 8

411

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

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

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

ManifestV2 扩展的屏幕截图:

在此处输入图像描述

在此处输入图像描述

ManifestV3 扩展的屏幕截图:

在此处输入图像描述

于 2012-04-21T10:12:34.457 回答
16

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

在 chrome 开发工具的控制台选项卡中设置的屏幕截图

于 2017-08-10T09:54:10.930 回答
8

此外

如果您想在manifest.jsoncontent_script中查看js 文件(未设置“背景”属性时)

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

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

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

于 2014-10-14T11:03:26.623 回答
8

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

在此处输入图像描述

于 2016-10-18T22:37:31.967 回答
3

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

在此处输入图像描述

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

于 2019-06-10T22:44:02.953 回答
0

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

于 2019-06-27T12:42:41.730 回答
0

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

于 2020-01-10T02:33:13.563 回答
0

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

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

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

于 2021-09-23T18:25:49.090 回答