我该如何关闭Workbox浏览器控制台消息？

Question

简单来说，我想在调试时禁止浏览器控制台中出现重复的 Workbox 消息。例如，我不需要看到：

WorkBox: Using NetworkFirst to respond to '/fonts/KFOlCnqEu92Fr1MmEU9fBBc-.woff'

它混乱了我的FireFox控制台，这是我非常不喜欢的事情。如果你喜欢它，那很好，请不要试图改变我对这种对我来说毫无用处的信息的益处的看法。 你知道怎么关掉它吗？ 出于信息的考虑，我正在使用Quasar和Vue创建一个SPA——甚至不是PWA。 谢谢。

- murmeister

Answer 1

只需在 service worker (sw.js) 文件的顶部添加 self.__WB_DISABLE_DEV_LOGS = true。

与此处发布的答案相反，解决方案不是：

• 注销您的服务工作者以消除消息。您的应用程序可能需要它才能正常运行。
• 添加 workbox.setConfig({debug: false})，除非知道它的作用：
  它在生产构建和调试构建之间切换。当在本地主机上运行时，workbox会自动选择调试构建。

- arvymetal

---

这对我不起作用。 - warmwhisky

相关文档：https://developer.chrome.com/docs/workbox/troubleshooting-and-logging/#turn-off-logging-in-development-builds-in-any-workflow - undefined

Answer 2

对我有用的方法： 控制台 -> 应用程序标签 -> 服务工作者 -> sw.js 注销

- Antonina K

---

非常感谢您的见解。您的解决方案适用于Chrome，但不适用于FireFox。然而，由于您的答案，我也能够找到FireFox的解决方案。我将另外发布该解决方案。再次感谢您引领我找到解决方案！ - murmeister

这对我有用，那些日志太烦人了。谢谢！ - Jacob Broughton

我认为这是最好的答案。因为在此项目之前，我正在同一localhost端口开发PWA，所以需要将其注销以供新项目使用。 - Shahriar

请注意下面arvymetal的答案，因为注销服务工作者可能会导致您的应用程序运行不正常，而您可能不希望这样。 - Ruslan Zhomir

我又可以呼吸了，多亏了这个。 - Robbie

Answer 3

您可以使用workbox.setConfig({ debug: false });来使用生产版本构建并删除额外的日志记录，否则请相应调整网页控制台日志级别过滤器。

文档：https://developers.google.com/web/tools/workbox/guides/troubleshoot-and-debug 您可以在导入之后的服务工作器配置文件中添加此设置。例如：

importScripts(`https://storage.googleapis.com/workbox-cdn/releases/4.3.1/workbox-sw.js`);
if (workbox) {
    console.log(`Yay! Workbox is loaded `);
} else {
    console.log(`Boo! Workbox didn't load `);
}
// Switch debug logging on/off here. Default is on in dev and off in prod.
workbox.setConfig({debug: false});

更多信息请参见https://developers.google.com/web/tools/workbox/guides/configure-workbox#configure_debug_builds_vs_production_builds

。 涉及到此问题的更多信息，请参见上述链接。

- chrisdns

---

我非常感谢您的回复（迄今为止仅有的回复）。在Quasar模板中，我没有看到可以添加您建议的命令的代码块。我也在其他帖子中看到过这个选项，但是没有人指出应该包含该命令的文件。至于过滤，我在FireFox中找不到关闭workbox消息的选项。即使使用正则表达式也无效。 - murmeister

过滤工作箱日志无效。您可以将其设置为“隐藏所有”，但它们仍然存在。在您的示例中，为什么要在检查工作箱是否存在之外使用setConfig方法？它应该放在if (workbox)条件内部。 - Dylan Maxey

请注意下面arvymetal的答案，因为workbox.setConfig({ debug: false })不仅仅是禁用日志。它会切换构建类型，你可能不想要这个。 - Ruslan Zhomir

Answer 4

这就是你一直在寻找的。将其添加到你的 service-worker.js 文件的顶部：

workbox.setConfig({ debug: false, logLevel: 'warn' });

别忘了注释调试属性！！！

- Dragos Catalin

Answer 5

感谢Antonina K提供的答案，我成功找到了FireFox的解决方法。如果还有其他人需要，就像Antonina提到的，在Chrome中，控制台有一个应用程序选项卡，其中包含浏览器使用的所有服务工作者的引用。FireFox没有这个选项卡（或者至少我的版本没有）。 在FireFox中，打开一个新标签页，将about:serviceworkers输入到地址栏中。滚动列表以找到workbox服务工作者。对我来说，它被列为localhost:8080。我注销了该工作者，现在控制台中不再显示大量的workbox消息。我终于可以再次调试我的应用程序了！ 这是我参考的解决问题的链接： 在FireFox和Chrome中管理服务工作者

- murmeister

---

这只是禁用输出还是完全删除服务工作者？听起来像是完全删除了工作者。 - Sam

是的，它完全删除了服务工作器。不过我不在乎，因为我并不想构建一个PWA，而且服务工作者对我没有明显的价值——只会产生许多令人恼火的控制台消息。 - murmeister

谢谢，这对我也有用。 - Jonos

请注意下面arvymetal的答案，因为注销服务工作者可能会导致您的应用程序运行不正常，而您可能不希望这样。 - Ruslan Zhomir