Workbox debug messages clutter console

[iandunn]

Problem

Workbox's debug mode is currently tied to WP_DEBUG:

https://github.com/xwp/pwa-wp/blob/a4bcf446cda9f6e308da356eb665668bb9c5831f/wp-includes/components/class-wp-service-worker-configuration-component.php#L69-L70

The messages from Workbox are so noisy that they clutter the log to the point where it's very distracting, and almost unusable for me. That's still the case with the 700+ console.debug messages filtered off, so that only console.log messages are being displayed.

I think the devex here should conform to the same principle that the UX would: under normal circumstances, nothing should be output to the console. For developers, having WP_DEBUG enabled is a normal circumstance. I should only see Workbox logging when I explicitly enable it, in order to debug something.

Potential Solution

Ideally, I don't think this should be tied to WP_DEBUG at all, but should have a separate constant like WORKBOX_DEBUG.

At the very least, though, there should be a filter around $options so that developers can disable that for themselves.

I haven't thought a lot about the proper way to solve this, though, so I'm not strongly tied to either of those, they were just the first ideas that came to mind.

[westonruter]

You're right. Tying this to WP_DEBUG is not ideal.

There is only really one config option, debug, we'd want to be allow filterable: https://developers.google.com/web/tools/workbox/reference-docs/latest/workbox#.setConfig

So either we add a filter specifically for debug, or we add a constant for debug.

Alternatively, what about using the SCRIPT_DEBUG constant? This would be more appropriate than WP_DEBUG actually. This should also be used in:

https://github.com/xwp/pwa-wp/blob/a4bcf446cda9f6e308da356eb665668bb9c5831f/wp-includes/components/class-wp-service-worker-configuration-component.php#L57-L62

This is particularly appropriate here because here it is forcing the use of non-production Workbox files, which is what the constant does in core as well.

[iandunn]

🤔

I typically leave SCRIPT_DEBUG enabled all of the time as well, but I've done that for so long that I don't actually remember why :)

I can't think of any tangible consequences to leaving it off most of the time, so tying Workbox's debug to that seems acceptable to me.

Although, if I were trying to debug something w/ the bundled version of React or whatnot, I probably still wouldn't want Workbox stuff cluttering the console, so there does seem to be a fundamental difference between "i want source files instead of compiled" and "i want workbox debug messages", even if there's sometimes overlap in the context of working on PWAs.

So, I think a filter/constant specifically for Workbox debugging would probably be ideal IMO, but using SCRIPT_DEBUG wouldn't bother me all that often either.

[westonruter]

In regards to the log levels, I just saw this in Migrate from Workbox v3 to v4:

In Workbox v3 the verbosity of log levels could be controlled via the workbox.core.setLogLevel() method, which you'd pass one of the values in the workbox.core.LOG_LEVELS enum. You could also read the current log level via workbox.core.logLevel.

In Workbox v4, all of these have been removed since all modern developer tools now ship with rich log filtering capabilities (see filtering the console output for Chrome Dev Tools).

[westonruter]

I just remembered why it is important to have SCRIPT_DEBUG enabled, when you're running trunk:

[westonruter]

Otherwise, with the changes in #173 I can indeed set SCRIPT_DEBUG to false and I then see no log messages.

[westonruter]

@felixarntz What do you think of adding a new SERVICE_WORKER_DEBUG constant?

[westonruter]

Related: GoogleChrome/workbox#2284

[westonruter]

We should be able to now to define __WB_DISABLE_DEV_LOGS to turn off these messages in dev mode. See GoogleChrome/workbox#2284

[westonruter]

Now that Workbox v5 is almost ready for release, there is now a mechanism available to disable the logging. See #173 for the proposed constant to opt-in to the logging which is only enabled now if SCRIPT_DEBUG is enabled.