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:
- Debug Progressive Web Apps
- Inspect Network Activity In Chrome DevTools
- Video: Debugging Service Workers in Chrome
- Codelab: Debugging Service Workers
Firefox
Firefox users can refer to the following resources:
- Debugging service workers using the Firefox DevTools Application Panel
- Video: Debugging Service Workers in Firefox
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/6.0.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.