Service-worker.js not available in the for debugging in the chrome dev tools

Question

I understand service-worker runs as a separate thread parallel to the main thread. I have an android app that runs Webview. My app is in react and i use workbox strategies for caching. Service worker updates everytime I do a new build. However the source file of service-worker.js is not available in the chrome dev tools for me to debug. Any idea how i can get the file there so that i can put breakpoints and debug ?

PS: just few days before i could get the file for debugging the dev tools. I am not sure what has changed. I havent changed any settings the the browser.

Answer 1

You can inspect your extension's service worker but it's tricky, I don't know why Chrome doesn't show the service worker in the default chrome extension devtools.

here is how you can do it:

1. open chrome://serviceworker-internals/?devtools
2. find your extension there, there is a textarea that shows console logs, every console log will show the extension path in chrome e.g.

Console: {"lineNumber":688,"message":"[crx-helper] connection error","message_level":3,"sourceIdentifier":3,"sourceURL":"chrome-extension://aobpjedackhiamobjolncblfckdgfjbk/background.bundle.js"}

3. get that sourceUrl chrome-extension://aobpjedackhiamobjolncblfckdgfjbk/background.bundle.js yours will have a different id, which you can also see in chrome://extensions paste that path in a new tab and open devtools (screenshot).