How can I turn off the workbox browser console messages?

user_5108353 0
Viewed 10956

Very simply, I would like to disable the display of the repeated workbox messages that appear in my browser console while I am debugging. For instance, I don't need to see:

WorkBox: Using NetworkFirst to respond to '/fonts/KFOlCnqEu92Fr1MmEU9fBBc-.woff'

It clutters my FireFox console and it is something I dislike very much. If you like it, fine, please don't try to change my mind about the benefit of such useless (to me) messages. Do you know how to turn it off? For info sake, I am using Quasar and Vue to create a SPA - not even a PWA. Thanks.

workbox quasar vue.js console javascript
4 Answers

Simply add self.__WB_DISABLE_DEV_LOGS = true at the top of your service worker (sw.js) file.

Contrarily to what answers posted here say, the solution is not:

  • to unregister your service worker to get rid of the messages. Your app may need it to run properly
  • to add workbox.setConfig({debug: false}) unless knowing what it does:
    it switches between a production build and a debug build. workbox automatically selects the debug build when running on localhost.
user_30028050

For me worked: Console -> Application tab -> Service workers -> sw.js unregister

user_71082470

You can use workbox.setConfig({ debug: false }); in order to use production build and remove extra logging, otherwise adjust your web console log level filtering accordingly.

Doc : https://developers.google.com/web/tools/workbox/guides/troubleshoot-and-debug

You add this setting in your service worker definition file, after the import. For example:

importScripts(`https://storage.googleapis.com/workbox-cdn/releases/4.3.1/workbox-sw.js`);
if (workbox) {
    console.log(`Yay! Workbox is loaded `);
} else {
    console.log(`Boo! Workbox didn't load `);
}
// Switch debug logging on/off here. Default is on in dev and off in prod.
workbox.setConfig({debug: false});

For more information on this see https://developers.google.com/web/tools/workbox/guides/configure-workbox#configure_debug_builds_vs_production_builds

user_96571540

Thanks to the answer provided by Antonina K, I was able to locate an answer for FireFox. In case anyone else needs this. As Antonina mentioned, in Chrome, the console has an application tab that has references to all the service workers used by the browser. FireFox does not have the tab (or, at least my version does not). In FireFox, open a new tab and place about:serviceworkers in the address bar. Scroll through the list to find the workbox service worker. For me, it was listed as localhost:8080. I deregistered that worker and I no longer see the multitude of workbox messages in my console. I can finally debug my app again! Here is the link that I referenced to fix the problem: Manage Service Workers in FireFox and Chrome

user_51083530
Related