Vue.js/Quasar框架下InjectManifest模式Workbox控制台调试输出突然失效

问题解决步骤 #

以下是对应问题的排查和修复方案：

1. 检查构建压缩配置是否删除了console语句

Quasar 生产构建默认会通过 terser 移除所有console相关代码，这是最常见的日志丢失原因：

• 开发阶段直接运行 quasar dev -m pwa 启动PWA开发模式，该模式默认不会移除console语句，且自动开启Workbox调试日志
• 如果需要在生产构建保留日志，修改quasar.config.js的build配置：

module.exports = function (/* ctx */) {
  return {
    build: {
      terserOptions: {
        compress: {
          // 保留console和debugger语句
          drop_console: false,
          drop_debugger: false
        }
      }
    }
  }
}

2. 强制开启Workbox调试日志

默认生产环境Workbox会关闭调试输出，可以手动强制开启：

• 方案一：在custom-service-worker.js最顶部添加代码：

self.__WB_DISABLE_DEV_LOGS = false

• 方案二：修改quasar.config.js的pwa配置，强制开启debug模式：

module.exports = function (/* ctx */) {
  return {
    pwa: {
      workboxPluginMode: 'InjectManifest',
      workboxOptions: {
        debug: true,
        // 其他原有配置保持不变，比如swSrc: 'src-pwa/custom-service-worker.js'
      }
    }
  }
}

3. 确认日志查看路径正确

Service Worker的运行上下文和普通页面隔离，日志默认不会输出到普通页面的控制台：

• 打开Chrome DevTools → 切换到「应用」标签 → 左侧菜单选择「服务工作进程」 → 找到当前站点的服务进程 → 点击「检查」弹出专门的SW调试窗口，所有SW内的日志都会在这里输出
• 也可以在普通页面控制台顶部的上下文选择下拉框（默认值为top），选中对应Service Worker上下文，即可直接在当前控制台查看SW日志

4. 确保SW已更新为最新版本

浏览器默认会缓存旧版本的Service Worker，修改代码后需要手动触发更新：

• 在「服务工作进程」面板勾选「重新加载时更新」，之后每次刷新页面都会强制拉取最新的SW代码
• 也可以手动点击「跳过等待」按钮，直接激活最新版SW，刷新页面后即可查看新添加的日志输出

补充说明：你当前代码中registerRoute的匹配回调函数没有返回布尔值，会导致对应缓存策略永远不生效，写完匹配规则后需要返回true/false指定是否命中该路由规则。

内容的提问来源于stack exchange，提问作者MyNameIsLinuxx