Troubleshoot and debug

Building a service workers can be challenging, especially when starting out. This page will cover a few general resources for debugging service workers, focused on Chrome's Developer Tools, and explain how to enable additional debugging when using with Workbox.

Get to know the available tools

Chrome & Edge

Chrome (and recent versions of Edge, featuring a similar underlying codebase) have a robust set of Developer Tools for inspecting service workers and the Cache Storage API. The following resources provide an overview of those tools and tips for how to use Chrome's Developer Tools effectively:

Firefox

Firefox users can refer to the following resources:

Safari

Safari users currently have a more limited set of Developer Tools available for debugging service workers. You can learn more about them at:

Debugging Workbox

If you are finding it difficult to debug something specific to Workbox, rather than a general service worker problem, there are a few things you can do to get some extra logging information via the libraries' development builds.

Bundled Workbox runtime usage

If you're using generateSW/GenerateSW with Workbox v5+ to create your bundled service worker, then you can toggle between the development and production builds of Workbox by changing the mode parameter.

If you're bundling your own copy of the Workbox libraries, you can learn more about using NODE_ENV to switch between the production and development builds.

Legacy workbox-sw usage

If you are loading Workbox via workbox-sw, then you have dynamic control over whether the development or production builds are run.

By default, workbox-sw will detect whether your service worker is currently running on http://localhost, and use that as a signal to load the development builds of the Workbox libraries. Otherwise, the production builds will be used.

You can explicitly override this default behavior, and explicitly control whether the production or development builds are loaded, via workbox.setConfig():

importScripts('https://storage.googleapis.com/workbox-cdn/releases/5.1.2/workbox-sw.js');

// This needs to come before any other workbox.* methods.
workbox.setConfig({
  debug: true,
});

// Now use workbox.routing.*, workbox.precaching.*, etc.

Stack Overflow

If you are still struggling to figure out your problem, try posting a question to Stack Overflow with the workbox tag. This enables a wide audience of people to view, answer and learn from your question.