More control over enabling/disabling debug logging

[jiayihu]

Currently, it's not possible to disable debugging logs in localhost, and it's a very annoying experience. It would be nice to allow adding a debug option to GenerateSW configuration and, since we're here, customising log level should also be possible.

[jeffposnick]

The general approach to changing the log level is at https://developers.google.com/web/tools/workbox/guides/configure-workbox#configure_log_levels

This is fairly straight forward when using InjectManifest mode, since you "own" the code for your service worker file.

If you'd like to do the same in GenerateSW mode, I'd recommend putting workbox.core.setLogLevel(workbox.core.LOG_LEVELS.silent); into a standalone JavaScript file, and then reference it in the importScripts option when configuring GenerateSW.

We're of the opinion that the logs can catch a lot of problems during the development cycle that you'd otherwise run into during production, and given that there is a workaround, making it much easier than that to disable them on localhost when using GenerateSW is not a priority.

[ImanMh]

@jeffposnick What do you think about adding a debug or logLevel option to workbox-webpack-plugin ?

[ImanMh]

@jeffposnick and by the way, LOG_LEVELS is undefined cause it's not exported.
https://github.com/GoogleChrome/workbox/blob/master/packages/workbox-core/index.mjs

[bam-tbf]

We have the reverse issue: We would like to show workbox debug messages on a deployed server, and this is also not possible. Please reopen this and add debug level configuration as a option regardless of host.

[philipwalton]

@ImanMh, LOG_LEVELS was removed in v4. You can see this mentioned under the breaking changes section of the v4 release notes:

Workbox log levels have been removed since now all developer tools support filtering visible logs by level. As a result, workbox.core.setLogLevel(), workbox.core.logLevel, and workbox.core.LOG_LEVELS have all been removed. [#1831]

@jeffposnick's comment above was made before v4 was released, but everything else he said is still true today. You can see the debug level logs by configuring devtools to show them.

[jrgtt]

Is there a workaround to remove those logs if you're using firefox? Workbox messages polute the console, this LOG_LEVEL was actually a pretty neat feature.

[getkey]

It's possible to turn off some messages but not all of them (see screenshot).

The developer experience is extremely poor because of this. The workaround I found is to develop on 127.0.0.1 instead of localhost.

---

@JRigotti the log levels on Firefox are on the top left of the console, but as I explained before they don't remove absolutely everything.

[a7madgamal]

please give us a way to prevent all this noise in the devtools

[jeffposnick]

We're re-opening this issue due to continued feedback from the community asking for alternatives.

In Workbox v5, this debug logging is enabled/disabled based on the value of process.env.NODE_ENV at the time the Workbox bundles are created. I understand that there might be scenarios in which you're using a development bundle but still want to be able to toggle Workbox's logging on and off on demand, via a runtime call to something like workbox.core.setConfig().

(There are a number of service worker "gotchas" that the debug logging helps you avoid, and I feel pretty strongly that we should keep logs enabled by default for development builds until someone takes the affirmative step of disabling them.)

[jeffposnick]

The mechanics of this are a little tricky in v5, when folks are pulling in specific pieces of the Workbox runtime and won't necessarily have direct access to a hypothetical method like workbox.core.disableDevLogs().

So we're going to go ahead with an approach that relies on a global boolean variable, (tentatively self.__WB_DISABLE_DEV_LOGS ) which can then be toggled at runtime as needed. We'll also support an option for generateSW (tentatively disableDevLogs) which will allow you to automatically set an initial value for this boolean.

We're still, by default, going to enable the logs, so you'd have to specifically disable them, rather than the other way around.

[StephanBijzitter]

What about production builds, though? I'd like to be able to include the logs on our staging environments (and only keep them turned off for the live environment). I tried setting mode: 'development' for InjectManifest (webpack plugin), but that seems to have absolutely no effect.

[jeffposnick]

Workbox uses process.env.NODE_ENV to enable/disable the execution of verbose logging.

When using the InjectManifest webpack plugin, the NODE_ENV setting from the parent compilation's mode should be inherited, i.e. https://webpack.js.org/guides/production/#specify-the-mode

[sneakyfildy]

Just in case, filtering workbox using console filters seems to do not work