How to debug service worker script?

[Zheng Yinbo]

I have set a debugger in my background.js file.

But it seems that there is no way too open dev tools for background.js before debugger is hit.

I also tried to click "Service Worker" first then reload the extension, but the script seems running in another thread.

[Roberto Oneto]

Hi, try to implement a workaround like this: LINK

[wOxxOm]

This is reported in https://crbug.com/1159283.

The workaround:

1. open a normal extension tab, it can be even manifest.json URL like chrome-extension://your-extension-id/manifest.json
2. go to the devtools Sources panel, switch to the service worker context and set a breakpoint
   
3. edit your background script and add something new like a comment with a number that you increase each time //1
4. in devtools console run (self.registration || await navigator.serviceWorker.ready).update()

[Zheng Yinbo]

Hi, wOxxOm
What do you mean by " switch to the service worker context"?

I have less knowledge about service worker.

[Zheng Yinbo]

Hi, I have read your post.

But what I am trying to do is not to see the error but stop the code and inspect some variables.

[wOxxOm]

>What do you mean by " switch to the service worker context"?

See the screenshot.

> stop the code and inspect some variables 

That's exactly what my post was about.

[Zheng Yinbo]

Thanks! It looks like I need to reload extension one time first otherwise bg.js in the screenshot is not available.

[Zheng Yinbo]

I have followed your work around but found that only first time run   (self.registration || await navigator.serviceWorker.ready).update()
works for me.

If I let the break point pass and run the code one more time, break point will not be hit.

On Thursday, June 3, 2021 at 3:02:53 AM UTC+8 wOxxOm wrote:

[wOxxOm]

No need to reload the extension, instead just start the service worker manually in the Application panel:

> only first time works for me.

The update() routine works only if the file has changed so you will have to edit your background script and add something new like a comment with a number that you increase each time //1 and then //2 and so on.

[Zheng Yinbo]

Hi, many thanks for your help!

Finally I found my way to debug my service worker.

There is subtle differences between your solution and mine.

I guess the reason is we have different chrome versions installed separately.

The following is my solution to the problem:

1. Open URL specific for your extension like: 

chrome-extension://[extension-id]/manifest.json or chrome-extension:// [extension-id]/background.js

2. If js file is not listed under Sources panel, like this:

go to Application panel and click start

now go back to Sources panel and your js file will be available now.

3. Set breakpoint(s) on the left of the source code

go back to Application panel and click stop then start:

4. You can adjust your code and update your code by click update:

It is likely that you will rerun your original source code but don't worry.

You will see a hint below in the Application panel like this:

I don't know why new source code is not updated and still waiting. Hopefully you can provide some hints about this behavior.

Then just click skipWaiting and you will see your updated code and a new number.

Just click stop then start:

Alright. Just repeat these steps and tweak your code. Happy coding.

[Zheng Yinbo]

Chrome version: 91.0.4472.77 (64bit)