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

Question

我正在尝试使用 chrome 扩展清单 v3（在 chrome canary 上），但找不到任何方法来调试 manifest.json 中定义的服务工作者脚本。对于 manifest v2，chrome://extensions/ 页面上有一个链接，可以打开后台页面控制台。有没有办法在清单 v3 服务工作者脚本中查看日志？

我正在使用清单 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

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

您应该注意两个 URL：

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

---

1.注册的ServiceWorker列表（普通+内部）

chrome://inspect/#service-workers

---

2. ServiceWorker 活动（活动连接/客户端、控制台日志……）

chrome://serviceworker-internals/?devtools

---

3. 检查 DevTools 扩展

• 选项 A：从上下文菜单

  1. 打开你的扩展面板

  2. 打开contextmenu并选择inspect

  3. 第二个 DevTools 实例打开

     

• 选项 B：从扩展页面

  1. 打开chrome://extensions

  2. 找到您的扩展点击“详细信息”

     

Answer 2

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

Answer 3

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

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

但请参阅 Simeon Vincent Talk您应该在 v3 中像这样编写清单

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

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