26

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.

murmeister
  • 582
  • 1
  • 4
  • 7

5 Answers5

20

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.
arvymetal
  • 2,787
  • 1
  • 30
  • 39
19

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

Antonina K
  • 425
  • 4
  • 12
  • Thank you so much for the insight. Your solution works for Chrome, but not FireFox. However, thanks to your answer, I was able to find a solution for FireFox, as well. I am posting that solution separately. Thanks, again for leading to the solution! – murmeister Aug 26 '19 at 17:35
  • This worked for me, those logs were so annoying. Thank you! – Jacob Broughton Feb 16 '21 at 21:41
  • This is the best answer I think. Since I was developing a PWA in the same `localhost` port before this project, it needed to be unregistered for the new one. – Shahriar Sep 04 '21 at 15:32
  • Please, pay attention on the [answer](https://stackoverflow.com/a/66907705/3381938) of [arvymetal](https://stackoverflow.com/users/3002805/arvymetal) below, because unregistering service worker might make your app running improperly and you might not want it. – Ruslan Zhomir Oct 18 '21 at 13:53
  • I can breathe again, thanks to this – Robbie Feb 12 '22 at 22:26
10

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

daffinm
  • 177
  • 1
  • 13
chrisdns
  • 505
  • 1
  • 4
  • 9
  • 2
    I truly appreciate the response (only response thus far). Within the Quasar templates, I see no code block where I can add the command you suggested. I've seen this option in other posts, as well, but nobody identifies which file should contain the command. As for filtering, I find no option for turning off workbox messages in FireFox. Even regular expressions are ineffective. – murmeister Aug 15 '19 at 16:11
  • Filtering doesn't work for the workbox logs. You can set it to "hide all" and they'll still be there. In your example, why would you use the setConfig method outside of checking if workbox exists? It should go inside the `if (workbox)` condition. – Dylan Maxey Dec 15 '19 at 00:58
  • 1
    Please, pay attention on the [answer](https://stackoverflow.com/a/66907705/3381938) of [arvymetal](https://stackoverflow.com/users/3002805/arvymetal) below, because `workbox.setConfig({ debug: false })` does not just disable logs. It switches a build type and you might not want it. – Ruslan Zhomir Oct 18 '21 at 13:47
1

This is what you've all been looking for. Add this to your service-worker.js at the top:

workbox.setConfig({ debug: false, logLevel: 'warn' });

Don't forget to comment the debug property!!!

Dragos Catalin
  • 75
  • 2
  • 8
0

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

murmeister
  • 582
  • 1
  • 4
  • 7
  • Is this just disabling output or is it removing the service worker entirely? It sounds like it's removing the worker entirely. – Sam Sep 13 '19 at 13:24
  • 2
    Yes, it is removing the service worker entirely. I don't care, though, because I'm not trying to build a PWA and the service worker provides no apparent value to me - just a bunch of aggravating console messages. – murmeister Sep 15 '19 at 17:11
  • thanks this worked for me too. – Jonos Sep 23 '21 at 18:24
  • Please, pay attention on the [answer](https://stackoverflow.com/a/66907705/3381938) of [arvymetal](https://stackoverflow.com/users/3002805/arvymetal) below, because unregistering service worker might make your app running inproperly and you might not want it. – Ruslan Zhomir Oct 18 '21 at 13:55