Nextjs 删除工作箱 console.log 消息

Posted 2023-02-19

【中文标题】Nextjs 删除工作箱 console.log 消息

【英文标题】：Nextjs remove workbox console.log messages

【发布时间】：2021-05-03 06:02:35

【问题描述】：

知道如何在 NextJS 项目中禁用来自workbox 的这些 console.log 消息吗？我刚刚开始了一个新的仓库，它给了我太多我现在不需要的信息

【参考方案1】：

来自next-pwa docs，提示部分：

您需要做的就是在项目的根目录下创建worker 目录并将index.js 文件放入其中：

// To disable all workbox logging during development, you can set self.__WB_DISABLE_DEV_LOGS to true
// https://developers.google.com/web/tools/workbox/guides/configure-workbox#disable_logging

// eslint-disable-next-line no-underscore-dangle,no-restricted-globals
self.__WB_DISABLE_DEV_LOGS = true;

然后重新启动服务器 - 控制台中必须没有日志。

---

我还发现另一个有用的选项 - 在开发过程中完全禁用 sw。您可以使用next.config.js 中的disable 选项来实现，例如：

const path = require('path');
const withPWA = require('next-pwa');
const runtimeCaching = require('next-pwa/cache');

module.exports = withPWA(
  pwa: 
    dest: 'public',
    scope: '/',
    runtimeCaching,
    disable: process.env.NODE_ENV === 'development',
  ,
  sassOptions: 
    includePaths: [path.join(__dirname, 'assets/jss/vendor')],
  ,
);

服务器重启后，sw将不再接收更新，但需要手动删除旧的：

【参考方案2】：

看起来我在过去从事 PWA 项目时注册了一个指向我的 http://localhost:3000 的 ServiceWorker。 我通过从我的 Chrome 开发工具 chrome://serviceworker-internals/?devtools 中删除（取消注册）Service Worker 来解决此问题@

首先，我取消注册我的localhost

其次，我也从我的 chrome 开发工具中注销了它（我已经这样做了，所以没有显示）

就是这样，这个问题帮助了我 How do I uninstall a Service Worker?

【讨论】：

我遵循了这些步骤，但每当我刷新页面时，服务人员都会再次注册自己，并且我会收到工作箱控制台日志消息的垃圾邮件。这只是我吗？

我也遇到了这个问题，但是我通过删除 ServiceWorker 来修复它（也许可以调查更多关于它的信息），这是我在 NextJS 中使用 PWA 时添加的。祝你好运

【参考方案3】：

将 pwa 模式设置为生产会禁用控制台日志记录。试试这个：

next.config.js

// inside of next.config.js
module.exports = withPWA(
    pwa: 
      dest: 'public',
      mode: 'production'
    ,
 );

这对我有用。在以下位置找到：https://www.npmjs.com/package/next-pwa#user-content-tips

强制 next-pwa 通过指定 选项模式：next.config.js 的 pwa 部分中的“生产”。 虽然 next-pwa 自动生成 worker box 开发 在开发期间构建（通过运行下一个）和工作盒生产 在生产期间构建（通过运行下一个构建和下一个启动）。你 即使在开发过程中，也可能仍想强制它进行生产构建 您的网络应用程序出于以下原因：减少由于以下原因导致的日志记录噪音 生产版本不包括日志记录。稍微提高性能 由于生产版本被优化和缩小。

【参考方案4】：

这些消息仅在开发中显示。您可以禁用它们。

workbox.setConfig( debug: false );

或者在您的service worker 中（确保在使用workbox 之前这样做）

self.__WB_DISABLE_DEV_LOGS = true

【讨论】：

您能说得更具体一点吗？我应该在哪里添加它们？我在 next.config.js 中添加了第一个，但我得到了 ReferenceError: workbox is not defined

您如何以及在何处加载工作箱脚本？

我使用npx create-next-app my-project创建了一个全新的NextJS项目

【参考方案5】：

在 Chrome 的控制台中，仅选择顶部上下文

然后，选择此选项以仅按活动上下文过滤日志