Nextjs删除工作箱控制台日志消息

ezykj2lf  于 2023-01-20  发布在  其他
关注(0)|答案(6)|浏览(171)

知道如何在NextJS项目中禁用这些来自workbox的console.log消息吗?我刚刚启动了一个新的repo,它给了我太多我现在不需要的信息

y53ybaqx

y53ybaqx1#

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;

然后重新启动服务器-并且控制台中必须没有日志。
我还发现另一个有用的选项-在开发过程中完全禁用软件。你可以在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')],
  },
});

服务器重新启动后,软件将不再接收更新,但您需要手动删除旧的更新:

r7xajy2e

r7xajy2e2#

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

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

h6my8fg2

h6my8fg23#

看起来像是我以前在处理PWA项目时注册了一个指向我的http://localhost:3000的ServiceWorker。我通过从Chrome开发工具chrome://serviceworker-internals/?devtools中删除(取消注册)ServiceWorker修复了这个问题
首先,我取消注册我的localhost

其次,我也从chrome开发工具中注销了它(我已经注销了,所以没有显示)

就是这样,这个问题帮了我

p5cysglq

p5cysglq4#

将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生成工作框生产构建:“production”位于next.config.js的pwa部分。尽管next-pwa会在开发期间自动生成工作框开发构建版本(通过运行next),并在生产期间自动生成工作框生产构建版本(通过运行next build和next start)。您可能仍然希望强制其进行生产构建,即使在Web应用的开发期间也是如此,原因如下:减少测井噪音,因为生产构建不包括测井。提高性能一点,因为生产构建是优化和缩小。

juud5qan

juud5qan5#

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

workbox.setConfig({ debug: false });

或者在你的service worker里面(确保在你使用workbox之前这样做)

self.__WB_DISABLE_DEV_LOGS = true
cidc1ykv

cidc1ykv6#

您可以通过添加以下内容来禁用日志:

const withPWA = require('next-pwa')({
  // ...
  disableDevLogs: true,
  // ...
})

相关问题