Enabling logging when using workbox-webpack-plugin

Question

My project had an old partial implementation of a service worker using Workbox. I've been tyring to update it and add functionality along the way. Somewhere in this process I've lost the Workbox logs in the dev Console (Chrome Version 81.0.4044.129).

I'm not sure at what point this happened because I wasn't paying much attention to them while I was trying to upgrade and add in workbox-window, but I'd like them back now.

I'm using v5.1.3 of both workbox-webpack-plugin and workbox-window.

My webpack configuration looks like this:

      new WorkboxWebpackPlugin.InjectManifest({
        swSrc: './src/src-serviceWorker.js',
        swDest: 'serviceWorker.js',
        exclude: [/\.map$/, /asset-manifest\.json$/]
      }),

My service worker file looks like this:

import { precacheAndRoute } from 'workbox-precaching'
import { registerRoute } from 'workbox-routing'
import { CacheFirst } from 'workbox-strategies'


precacheAndRoute(self.__WB_MANIFEST)
self.__WB_DISABLE_DEV_LOGS = false


registerRoute(
  /https:\/\/api\.***\.com\/graphql/,
  new CacheFirst()
)

The app itself is a react app that was originally created with create-react-app but has since been ejected. I'm only looking for the logs when I do production build and then run on localhost using the http-server package.

I've checked the workbox debugging page which was why I added in the line self.__WB_DISABLE_DEV_LOGS = false but that has made no difference.

Any ideas how I could get the logs back? It would make my life a lot easier as I'm trying to add move features to the service worker. I've also double checked that I have all the levels of logging visible in the Chrome Developer tools including the verbose ones.

I've also added logs of my own, and they do show up, so I know the service worker is being called.

Answer 1

This is buried a bit in the current docs, unfortunately, but I think that the "Keeping dev-only code out of the bundle" section of the docs explains what's going on.

Workbox's unbundled source code contains a lot of verbose logging statements guarded by if (process.env.NODE_ENV !== 'production') {...} clauses. webpack automatically substitutes process.env.NODE_ENV with either 'development' or 'production' based on the value of your mode config option.

So if you’re using mode: 'production' in your webpack compilation, you'll get a Workbox bundle that's much smaller, but which doesn't contain any of the verbose logging statements. (There will still be some less-verbose error logging.)

self.__WB_DISABLE_DEV_LOGS = false is useful if you're using a development build of Workbox (i.e. if process.env.NODE_ENV gets replaced with 'development' during the bundling step) but you want to disable the verbose logging anyway.