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

我刚开始使用GoogleChrome扩展，似乎无法从后台登录到控制台。例如，当由于语法错误而发生错误时，我也找不到任何错误消息

我的清单文件：

{
  "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!")

---

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

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

要查看正确的控制台，请打开后台脚本上下文的devtools：

参观chrome://extensions/ 或者右键单击扩展图标并选择管理扩展。 启用开发人员模式 单击名为background page ManifestV2或service worker ManifestV3的链接。 ManifestV2扩展的屏幕截图：

ManifestV3扩展的屏幕截图：

另外

如果您想在manifest.json中未设置后台属性时查看content_script js文件

---

然后右键单击扩展图标，然后单击Inspect popup（检查弹出窗口），开发者窗口打开，打开popup.html，您将看到控制台选项卡。

对于希望查看chrome扩展内容脚本的调试控制台的追随者，通过正常的ShowDeveloper控制台，然后使用下拉箭头选择它的javascript环境，然后您就可以访问它的方法，等等

---

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

---

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

---

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

我也遇到了这个问题。似乎我的网页没有更新到新保存的脚本。在chrome浏览器中按Ctrl+refresh或Ctrl+F5可解决此问题。

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

可能重复的请选择消息或信息如果高亮显示的栏位于其他选项卡上，如No verbose@RobW，我没有三角形按钮来扩展扩展，也看不到任何活动视图。这个答案不再是最新Chrome版本的解决方案，还是我遗漏了什么？@ggundersen我已经更新了图片。三角形已被删除，该步骤现在在开发者模式激活时自动发生。那么如何调试内容脚本？@SuperUberDuper通过内容脚本运行选项卡中的devtools。1这并没有回答问题，2这完全是错误的；内容脚本将消息记录到其注入的页面的控制台中，即实际的浏览器选项卡。我想在您的代码中，popup.js在popup.html中被重用，因此，该副本的输出将转到您提到的位置。但这完全是误导。这个答案帮助我检查作为弹出窗口运行的chrome扩展的日志

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

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