如何调试清单 v3 的 chrome 扩展服务工作者？

Question

我正在试验 chrome 扩展清单 v3（在 chrome 金丝雀上），但我找不到任何方法来调试 manifest.json 中定义的服务工作者脚本。对于清单 v2，chrome://extensions/ 页面上有一个 link 可以打开后台页面控制台。有什么方法可以在 manifest v3 service worker 脚本中查看日志吗？

我正在使用清单 v3 服务工作者扩展的这个最小工作示例进行测试：https://gist.github.com/dotproto/3a328d6b187621b445499ba503599dc0。

此调试页面上没有提及任何内容：https://developer.chrome.com/apps/tut_debugging

两份迁移指南中也未提及任何内容： https://developer.chrome.com/extensions/migrating_to_manifest_v3 https://developer.chrome.com/extensions/migrating_to_service_workers

Answer 1

经过一番搜索，我发现日志显示在应用程序下页面控制台内的服务工作者部分。您必须运行 service worker，然后单击 inspect 以查看 service worker 脚本生成的日志。

Answer 2

我们在 v2 中这样写 manifest.json：

{
  ...
  "manifest_version": 2,
  "background": {
    "scripts": ["background.js"]
  },
  ...
}

但参考 Simeon Vincent Talk 你应该在 v3

中这样写清单

{
  ...
  "manifest_version": 3,
  "background": {
    "service_worker": "background.js"
  }
  ...
}

然后刷新扩展你可以在chrome://extensions/上看到inspect view Service Worker，然后点击Service Worker link打开DevTools并显示控制台。

Answer 3

我猜你正在寻找你的扩展的 internal ServiceWorker（后端页面）及其连接。

您应该注意两个 URL：

chrome://inspect/#service-workers
chrome://serviceworker-internals/?devtools
您可能还想“调试调试器”，例如在您的扩展页面内设置断点。

1。注册的ServiceWorker列表(normal + internal)

chrome://inspect/#service-workers

2。 ServiceWorker activity（活动 connections/clients，控制台日志，...）

chrome://serviceworker-internals/?devtools

3。检查 DevTools 扩展

选项 A：来自上下文菜单
1. 打开扩展面板
2. 打开contextmenu和selectinspect
3. 第 2 个 DevTools 实例打开
选项 B：来自扩展页面
1. 打开chrome://extensions
2. 找到您的扩展点击“详细信息”

如何调试清单 v3 的 chrome 扩展服务工作者？

How to debug chrome extension service worker for manifest v3?

google-chrome-extension

chrome-canary

1。注册的ServiceWorker列表(normal + internal)

2。 ServiceWorker activity（活动 connections/clients，控制台日志，...）

3。检查 DevTools 扩展