提问人：grasaved 提问时间：4/21/2012 最后编辑：wOxxOmgrasaved 更新时间：11/20/2023 访问量：130612
访问扩展后台 .js 的控制台和开发工具
Accessing console and devtools of extension's background.js
问：
我刚开始使用 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!")
当我加载扩展时，会出现警报，但我没有看到任何记录到控制台的内容。我做错了什么？
答：
439赞
Rob W
4/21/2012
#1
你看错了地方。这些控制台消息不会显示在网页中，而是显示在不可见的后台页面 （ManifestV2） 或 Service Worker （ManifestV3） 中。
若要查看正确的控制台，请打开后台脚本上下文的 devtools：
- 访问或右键单击扩展程序图标，然后选择“管理扩展程序”。
chrome://extensions/ - 启用开发人员模式
- 单击名为 （ManifestV2） 或 （ManifestV3） 的链接。
background pageservice worker
ManifestV2 扩展的屏幕截图：
ManifestV3 扩展的屏幕截图：
评论
0赞
jds
10/23/2014
@RobW，我没有三角形按钮来展开扩展，也看不到任何活动视图。这个答案不再是最新 Chrome 版本的解决方案，还是我遗漏了什么？
1赞
Rob W
10/23/2014
@ggundersen我已经更新了图片。三角形已被移除，该步骤现在在激活开发人员模式时自动发生。
0赞
SuperUberDuper
7/6/2017
那么如何调试内容脚本呢？
1赞
Rob W
7/6/2017
@SuperUberDuper 通过运行内容脚本的选项卡中的 devtools。
1赞
strix25
8/25/2022
@velkoon有时您必须禁用并重新启用扩展程序，但它确实存在错误
7赞
xkeshav
10/14/2014
#2
此外
如果你想在manifest.json中查看js文件（当“background”属性未设置时）content_script
"content_scripts": [{
"matches": ["<all_urls>"],
"js": ["popup.js"],
}]
"browser_action": {
"default_icon": "icon_32.png",
"default_popup": "popup.html"
}
然后右键单击扩展图标，然后单击检查弹出窗口，开发人员窗口打开，弹出.html打开，在那里您会看到控制台选项卡。
评论
9赞
Xan
10/23/2014
1）这不能回答问题，2）这完全是错误的;内容脚本将消息记录到它被注入到的页面的控制台中，即实际的浏览器选项卡。我想在您的代码中，在 中重用，因此该副本的输出会转到您提到的地方。但这完全具有误导性。popup.jspopup.html
3赞
RashFlash
3/5/2015
这个答案帮助我检查作为弹出窗口运行的Chrome扩展程序的日志
9赞
rogerdpack
10/19/2016
#3
对于希望看到其 chrome 扩展程序的“内容脚本”的调试控制台的追随者，可以通过执行普通的“显示开发人员控制台”然后使用下拉箭头选择其“javascript 环境”来获得它，然后您将可以访问其方法等。
17赞
Michiel
8/10/2017
#4
我遇到了同样的问题，就我而言，日志记录在 Chrome 开发人员工具的控制台选项卡中设置为“全部隐藏”。 我什至没有意识到这是一个选项，我不记得关闭了它
5赞
Tonio Liebrand
6/11/2019
#5
与Michiel的回答类似，我也有一个有趣的控制台配置： 我不记得设置的过滤器：
清除过滤器后，我看到了消息。
0赞
user11510326
6/27/2019
#6
我也有这个问题。似乎我的网页没有更新到新保存的脚本。这是通过在 chrome 浏览器中按 + 刷新（或 +）来解决的。CtrlCtrlF5
1赞
Token Yi
1/10/2020
#7
如果我们想从弹出页面读取打印到控制台的消息，我们可以单击扩展图标打开弹出页面，然后在任何地方右键单击弹出页面，将显示一个下拉菜单，我们只需单击“检查”菜单即可打开开发人员工具。请注意，弹出页面必须保持打开状态。如果它被关闭（通过 window.close（）），开发者工具也将关闭。
1赞
Abhishek
9/24/2021
#8
其他答案适用于background.js，但是，如果您正在从弹出窗口中查找console.logs，则可以尝试：
var bkg = chrome.extension.getBackgroundPage();
bkg.console.log('foo');
我正在使用 cra 进行开发，这对我有用。
0赞
tst
9/29/2022
#9
对于那些为 Firefox 开发扩展的人：
TL;DR 版本：您需要使用 Ctrl+Shift+J 调出浏览器控制台窗口，然后单击右上角的设置图标，并确保选中“显示内容消息”。
来自相关堆栈溢出问题的更长的解释：如何在 Firefox WebExtension 中查看后台脚本的控制台.log输出？
0赞
Ovidijus Parsiunas
11/20/2023
#10
就我而言，我必须单击“Exntensions”面板中的“检查弹出窗口”按钮，该按钮会打开一个新窗口，其中包含扩展的专用控制台。
评论