3

我的项目有一个使用 Workbox 的服务工作者的旧部分实现。我一直在努力更新它并在此过程中添加功能。在这个过程中的某个地方，我在开发控制台（Chrome 版本 81.0.4044.129）中丢失了 Workbox 日志。

我不确定这发生在什么时候，因为我在尝试升级和添加工作箱窗口时并没有过多关注它们，但我现在希望它们回来。

我正在使用 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$/]
      }),

我的服务工作者文件如下所示：

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包在 localhost 上运行。

我检查了工作箱调试页面，这就是我在该行中添加的原因，self.__WB_DISABLE_DEV_LOGS = false但这没有任何区别。

有什么想法可以让我找回日志吗？当我尝试向服务人员添加移动功能时，这将使我的生活变得更加轻松。我还仔细检查了 Chrome 开发者工具中的所有日志级别，包括详细日志。

我还添加了自己的日志，它们确实出现了，所以我知道正在调用服务人员。

4

1 回答 1

3

不幸的是，这在当前文档中被埋没了一点，但我认为文档的“将仅开发人员的代码排除在包之外”部分解释了正在发生的事情。

Workbox 的非捆绑源代码包含许多由if (process.env.NODE_ENV !== 'production') {...}子句保护的详细日志记录语句。webpack自动替换 process.env.NODE_ENV为'development'或'production'基于您的mode配置选项的值。

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

self.__WB_DISABLE_DEV_LOGS = false如果您使用的是 Workbox 的开发版本（即，如果在捆绑步骤中process.env.NODE_ENV被替换为'development'）但您仍想禁用详细日志记录，这将非常有用。

于 2020-04-30T14:19:09.290 回答