PWA InjectManifest workbox console / debug output suddenly disabled (Vue.js / Quasar Framework)

Question

I'm building a PWA with Vue.js / Quasar Framework and recently added the PWA capability. I changed the "workboxPluginMode" property to "InjectManifest" and at first Workbox gave me debug / console as expected. Also, the "custom-service-worker.js" definetly gets picked up by the process because it displays an error when i remove this line:

precacheAndRoute(self.__WB_MANIFEST)

So the file is recognized and actively using the defined caching strategies (i think), but it won't provide me any debug info or console.log's on console anymore. I really don't know what i have changed to do that.

My "custom-service-worker.js" looks like this:

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

console.log('custom service worker active')

// Use with precache injection

precacheAndRoute(self.__WB_MANIFEST)

// Caching strategies

registerRoute(
    ({url}) => {
        console.log(url)
        // url.pathname.startsWith('/images')
    },
    new StaleWhileRevalidate()
);

self.addEventListener('fetch', function(event) {
    console.log(event)
    event.respondWith(fetch(event.request));
})

Answer 1

I have no clue why, but the console debug output of workbox was only displayed in my default browser (Vivaldi). I wanted to work on plain Chromium because I couldn't install my PWA with Vivaldi (no installation prompt popped up), but that also works now. Have literally no explanation for this, but this is PWA development I guess, it is what it is. Anyways, problem solved for me.