logging - 使用 workbox-webpack-plugin 时启用日志记录

Question

我的项目有一个使用 Workbox 的 service worker 的旧部分实现。我一直在尝试更新它并在此过程中添加功能。在此过程中的某个地方，我在开发控制台(Chrome 版本 81.0.4044.129)中丢失了 Workbox 日志。

我不确定这是什么时候发生的，因为我在尝试升级和添加 workbox-window 时并没有太注意它们，但我希望它们现在回来。

我正在使用 workbox-webpack-plugin 和 workbox-window v5.1.3。

我的 webpack 配置如下所示:

      new WorkboxWebpackPlugin.InjectManifest({
        swSrc: './src/src-serviceWorker.js',
        swDest: 'serviceWorker.js',
        exclude: [/\.map$/, /asset-manifest\.json$/]
      }),

我的 service worker 文件如下所示:

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


precacheAndRoute(self.__WB_MANIFEST)
self.__WB_DISABLE_DEV_LOGS = false


registerRoute(
  /https:\/\/api\.***\.com\/graphql/,
  new CacheFirst()
)

该应用程序本身是一个 React 应用程序，最初是使用 create-react-app 创建的，但后来被弹出。我只在进行生产构建时查找日志，然后使用 http-server 在本地主机上运行包。

我检查了 workbox debugging page这就是为什么我在行中添加了 self.__WB_DISABLE_DEV_LOGS = false 但这没有任何区别。

有什么办法可以取回日志吗？这会让我的生活更轻松，因为我正在尝试向服务 worker 添加移动功能。我还仔细检查了我是否在 Chrome 开发者工具中看到了所有级别的日志记录，包括详细的日志记录。

我还添加了自己的日志，它们确实显示了，所以我知道正在调用 service worker。

Answer 1

不幸的是，这在当前文档中隐藏了一点，但我认为文档的“Keeping dev-only code out of the bundle”部分解释了正在发生的事情。

Workbox 的未捆绑源代码 contains a lot of verbose logging statements由 if (process.env.NODE_ENV !== 'production') {...} 子句保护。 webpack automatically substitutes process.env.NODE_ENV 使用 'development' 或 'production' 基于您的 mode 配置的值选项。

因此，如果您在 webpack 编译中使用 mode: 'production'，您将获得一个小得多的 Workbox 包，但它不包含任何详细的日志记录语句。 (仍然会有一些不太详细的错误记录。)

self.__WB_DISABLE_DEV_LOGS = false 如果您使用的是 Workbox 的开发版本(即如果 process.env.NODE_ENV 获取在捆绑步骤中替换为 'development')，但无论如何您都想禁用详细日志记录。