26

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

samuelstarbuck
  • 373
  • 1
  • 5
  • 13

3 Answers3

15

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

enter image description here

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

enter image description here

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

chrome://serviceworker-internals/?devtools

enter image description here

3. Inspect DevTools extension

  • Option A: From contextmenu

    1. Open your extension panel

    2. Open contextmenu and select inspect

    3. 2nd DevTools instance opens

      enter image description here

  • Option B: From extensions page

    1. Open chrome://extensions

    2. Find your extension click "Details"

      enter image description here

Exodus 4D
  • 2,207
  • 2
  • 16
  • 19
  • 8
    Unfortunately, when my chrome extension crashes early on in its service worker, I find no way of getting to see the extension's service worker log. Chrome just shows a hyperlink "service worker (Inactive)" that does nothing when clicked. It might look like if the extension is dead, getting to the line of error is much harder. – matanster Jul 31 '21 at 17:35
6

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.

enter image description here

samuelstarbuck
  • 373
  • 1
  • 5
  • 13
  • This helped me restart a service worker that was inactive and stuck, without having to reinstall the extension. – Vadorequest Jul 16 '22 at 17:00
1

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.

Benbinbin
  • 49
  • 5