Debugging

Service workers run in a separate thread in the browser from the pages they control. There are ways to communicate between workers and pages, but they execute in a separate scope. That means you will not have access to the DOM of those web pages from the service worker script, for example. Because of this, we cannot use the DevTools on the same web page to debug service worker scripts. We need to open a separate inspector to debug the service worker thread.

Service workers do most of their work by listening for relevant events and responding to them in a productive way. In the life cycle of service workers, different events are triggered at different points in a service worker's life cycle. So, if we want to cache assets, it is a good time to do that during the install state by listening to the install event. In the same way, we can debug service workers by adding breakpoints to the relevant event handlers.

Getting ready

To get started with service workers, you will need to have the service worker experiment feature turned on in your browser settings. If you have not done this yet, refer to the previous recipe: Setting up service workers. Service workers only run across HTTPS. To find out how to set up a development environment to support this feature, refer to the following recipes: Setting up GitHub pages for SSL, Setting up SSL for Windows, and Setting up SSL for Mac.

How to do it...

Follow these instructions to set up debugging for service workers:

1. To find out your currently running service workers, type the following into your browser: chrome://inspect/#service-workers:
   
2. Otherwise, type the following into your browser: chrome://serviceworker-internals to find out the registered workers. If there aren't any listed, then there are no currently running service workers.
   
3. To debug your service worker with Chrome DevTools, navigate to the service worker page and open DevTools. (Cmd + Alt + I in Mac or F12 in Windows)
4. You can add a breakpoint to inspect your code.
   

   The service worker will be displayed in the Threads list, and the Service Workers tab lists all the Active Running service workers this page belongs to.

   

   We can use the console for debugging as well. Any errors during the installation process will be printed on the console page. The console is useful for inspecting the service worker context.

   
5. You will also find the debugging panel in the Resources tab of the DevTools useful. In order to view network activity of the worker, click the inspect link on the Resources tab to launch a dedicated DevTools window for the worker.
   

The resulting page chrome://serviceworker-internals shows the registered service workers. It also shows basic action buttons, which are explained in detail as follows:

• Terminated: Unregisters the worker.
• Start/Stop: Starts/stops the worker. This will happen automatically when you navigate to a page in the worker's scope.
• 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.

There's more...

When you are working with DevTools open, you might want to check to make sure that the Disable cache is not checked in the Network tab. If that option is checked, the requests will go to the network instead of the service worker.