Blink‎ > ‎ServiceWorker‎ > ‎

Service Worker Debugging

Q: How do I tell if it is "working"?

A: If you expect a ServiceWorker to be running, chrome://inspect/#service-workers ; otherwise chrome://serviceworker-internals to see the registrations. If there are none, they will be empty.


Q: It's not working!

A:  In the Inspector, see if navigator.serviceWorker is defined. If not:

First, check that you are using at least Chrome 38. On Windows and OS X use Chrome Dev Channel or Chrome Canary. On Linux, you can build Chromium or use Chrome Dev Channel. On Android, you can build Chrome Shell. Service Workers are not supported by Chrome on iOS.

Next, open chrome://flags/#enable-experimental-web-platform-features and check that Experimental Web Platform Features is enabled.


Q: How do I debug?

A: chrome://inspect/#service-workers . If you need to debug the event listener wire-up use chrome://serviceworker-internals .

There are some newer advanced debugging techniques described below.


Q: When I have Developer Tools open, requests go straight to the network; the Service Worker does not get a fetch event.

A: On the Developer Tools' Network tab, if Disable cache is checked, requests will go to the network instead of the Service Worker. Uncheck that.


Q: I get an error message about "Only secure origins are allowed"

A: Service Workers are only available to "secure origins" (HTTPS sites, basically) in line with a policy to prefer secure origins for powerful new features. However http://localhost is also considered a secure origin, so if you can, developing on localhost is an easy way to avoid this error.


Q: What are those buttons on chrome://serviceworker-internals?

A: This page shows your registered workers and provides some basic operations.

Unregister: Unregisters the worker.
Start: Starts the worker. This would happen automatically when you navigate to a page in the worker's scope.
Stop: Stops the worker.
Sync: Dispatches a 'sync' event to the worker. If you don't handle this event, nothing will happen.
Push: Dispatches a 'push' event to the worker. If you don't handle this event, nothing will happen.
Inspect: Opens the worker in the Inspector.


Q: I made a change to my service worker. How do I reload?

A: See the "development flow" section of the getting started page for our recommendation.


Q: The cache API doesn't match the spec.

A: Currently, it's just an interim polyfill. Feel free to star the native cache API bug to get updates on our progress toward the real thing.


Q: I have a different question.

A: Leave a comment here or reach us out via blink-dev with Service Worker in the subject of your email.




Experimental Service Worker Debugging functionality



 Step-wise SW debugging

Chrome 44 required, but no experiments needed. Debugging message flow using conventional breakpoint debugging on both ends (page and the sw). You can kill the worker to debug its installation, you can debug the way it serves resources, etc.


Active SW in Sources

  • Navigate to a page w/ service worker, opens DevTools
  • Worker is displayed in the Threads list
  • Service Workers tab lists Active Running service workers this page (its iframes) belong to




Console execution

  • Console displays contexts for frames as well as workers
  • One can execute expressions in the SW context and filter by context






Console errors

  • Should there be any installation errors (syntax errors in main script), they are available in the page console
  • Clicking on the error message reveals the erroneous script






Breakpoints

  • User can set breakpoints in the service worker scripts
  • Should user set the breakpoint, Stop the service worker and reload the page, service worker will stop on that breakpoint



SW debugging panel in Resources

  1. Turn on DevTools experiments (in about:flags)
  2. In DevTools, Go to Settings -> Experiments, hit Shift 6 times
  3. Check "Service worker inspection", close and reopen DevTools
  4. Now you have this experiment enabled.

This experiment unlocks a view in Resources just like you asked.




Currently, to view network activity of the worker, click the "inspect" from Resources to launch a dedicated devtools window for the worker itself.

Comments