How to debug chrome extension service worker for manifest v3?

Question

I am experimenting with chrome extension manifest v3 (on chrome canary) and I can't find any way to debug the service worker script defined in the manifest.json. For manifest v2 there was a link on the chrome://extensions/ page that would open a background page console. Is there any way to view logs in the manifest v3 service worker script?

I am testing with this minimal working example of a manifest v3 service worker extension: https://gist.github.com/dotproto/3a328d6b187621b445499ba503599dc0.

There is nothing mentioned on this debugging page: https://developer.chrome.com/apps/tut_debugging

There is also nothing mentioned on either of the migration guides: https://developer.chrome.com/extensions/migrating_to_manifest_v3 https://developer.chrome.com/extensions/migrating_to_service_workers

Answer 1

After a bit of searching I found that logs are displayed in the Service Workers section of inside the page's console under Application. You must run the service worker and then click inspect to see logs generated by the service worker script.

Answer 2

we write the manifest.json in v2 like this:

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

but refer to Simeon Vincent Talk you should write manifest like this in v3

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

and then refresh the extension you can see the inspect view Service Worker on chrome://extensions/, then click the Service Worker link to open a DevTools and show the Console.

Answer 3

I guess you are looking for the internal ServiceWorker (backend page) of your extension and their connections.

There are two URLs you should be aware of:

1. chrome://inspect/#service-workers
2. chrome://serviceworker-internals/?devtools
3. You might also want to "debug the debugger" e.g. for breakpoints inside your extension page.

---

1. Registered ServiceWorker list (normal + internal)

chrome://inspect/#service-workers

---

2. ServiceWorker activity (active connections/clients, console logs, … )

chrome://serviceworker-internals/?devtools

---

3. Inspect DevTools extension

• Option A: From contextmenu

  1. Open your extension panel

  2. Open contextmenu and select inspect

  3. 2nd DevTools instance opens

     

• Option B: From extensions page

  1. Open chrome://extensions

  2. Find your extension click "Details"

     

Answer 4

Now you have a button in chrome://extensions/: