debugging 访问扩展background.js的控制台和devtools

kiz8lqtg  于 2022-11-14  发布在  其他
关注(0)|答案(9)|浏览(227)

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

当我加载扩展时,出现了警报,但我没有看到任何东西被记录到控制台。我做错了什么?

mwg9r5ms

mwg9r5ms1#

您看错地方了。这些控制台消息不会出现在网页中,而是出现在不可见的背景页(ManifestV2)或服务工作进程(ManifestV3)中。
要查看正确的控制台,请打开devtools以查看后台脚本的上下文:
1.访问chrome://extensions/或右键单击扩展图标并选择“管理扩展”。
1.启用开发人员模式
1.按一下名为background page(信息清单V2)或service worker(信息清单V3)的链接。
ManifestV2扩展的屏幕截图:

ManifestV3扩展的屏幕截图:

6ie5vjzr

6ie5vjzr2#

我遇到了同样的问题,在我的例子中,在Chrome开发者工具的控制台选项卡中,日志记录被设置为“隐藏所有”。我甚至没有意识到这是一个选项,我不记得我关闭了它

b91juud3

b91juud33#

对于那些希望看到chrome扩展的“内容脚本”的调试控制台的追随者来说,可以通过执行一个普通的“显示开发者控制台”,然后使用下拉箭头选择它的“javascript环境”,然后你就可以访问它的方法,等等。

b5lpy0ml

b5lpy0ml4#

另外地
如果要查看manifest.jsoncontent_script js文件(未设置“background”属性时)

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

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

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

z9gpfhce

z9gpfhce5#

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

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

wpx232ag

wpx232ag6#

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

thtygnil

thtygnil7#

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

xiozqbni

xiozqbni8#

其他答案适用于background.js,但如果您要从弹出窗口中查找console.logs,则可以尝试:

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

我用cra开发,这对我很有效。

qmelpv7a

qmelpv7a9#

对于开发Firefox扩展的用户:
TL;DR版本:您需要使用Ctrl+Shift+J调出浏览器控制台窗口,然后单击右上角的设置图标,并确保选中“显示内容消息”。
一个相关stackoverflow问题的详细解释:How do I see the console.log output of a background script in a Firefox WebExtension?

相关问题