为什么当在本地主机上运行时，Service Worker 在 Google Chrome 中似乎无法写入控制台？

Question

为什么当在本地主机上运行时，Service Worker 在 Google Chrome 中似乎无法写入控制台？

10

我有一个非常简单的样例使用新的Service Worker（渐进式Web应用程序）--了解更多信息请访问https://developers.google.com/web/fundamentals/getting-started/primers/service-workers

当我从本地主机运行我的应用程序时，似乎无法在console.log()上写入样例。但是，在我创建的plunkr中，它确实可以正常工作。以下是在plunkr上运行它的步骤：

1.在Google Chrome网络浏览器中使用以下URL，Plunkr编辑器将出现：https://plnkr.co/edit/FgG2krKDuSmIddR1Pskd?p=preview

下面是应该在console中显示fetch语句的ServiceWorker.js代码。

//serviceWorker.js

console.log("well, I'm in serviceWorker.js");
self.addEventListener("fetch", function(event) {
  console.log("Fetch request for:", event.request.url);
});

2. 进入该页面后，打开Chrome开发者控制台(以便查看输出) - 提示：在Chrome浏览器中按下F12即可打开控制台。

运行Plunkr。你应该可以看到以下输出：

问题出现

当我在本地运行此代码(在运行IISExpress的localhost上)，我看不到将fetch语句输出到控制台。(这是ServiceWorker.js文件中的代码) 我只能看到初始的注册。

它看起来像：

我尝试过的事情

停止并重新启动IIS Express
切换到Chrome Dev工具应用程序选项卡并强制更新(参见下一图像)
切换到Chrome Dev工具应用程序选项卡并强制注销以再次运行并重新注册(参见下一图像)

在Chrome浏览器中，您永远无法看到控制台更新的fetch内容。

4. 在Firefox中本地运行

然而，我在FireFox浏览器中运行相同的代码，那里的控制台确实显示了fetch内容：

编辑有人问是否由于控制台日志过滤器导致此问题，因此这里提供一个快照，显示没有过滤器，并且所有控制台日志条目都确实显示。这是多次运行(页面重新加载)得到的结果。

- raddevus

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- raddevus · Accepted Answer

哇。好的，看起来Chrome不会将ServiceWorker控制台语句输出到“主”console.log中 - 就像我在问题中展示的那样。

相反，您需要：

1. 单击应用程序选项卡下的检查链接。

2. 将会弹出一个窗口。

3. 然后，您必须切换到该（弹出）窗口的Console选项卡，然后您将看到输出内容。

但是，输出仍然不显示在应用程序的主控制台上。这有点烦人。此外，检查链接有时会消失，您必须重新启动Service Worker。:(

以下是它的外观： （我将窗口层叠在一起，以便您可以在图像中看到它。请参见下方较低窗口右下角的“检查”链接。）

编辑和第二部分--使用第二个解决方案

好的，实际上比眼睛所见还要多一些。我之前已经打开了“更新后重新加载”的选项，以便我的开发更改将重新加载。它看起来像这样：

这应该强制Service Worker每次重新加载。好吧，确实如此。但是，在这种情况下，它具有副作用。它会导致每次都发生初始注册。但是，获取代码仅在第二次加载页面时运行。

这意味着，如果打开了此选项（更新后重新加载），它似乎会注册服务工作者，但从不触发获取代码。这就是它在主控制台中的行为。因此，我通过关闭“更新后重新加载”来测试它，并在Chrome的主控制台中看到了获取语句。然而，如果您正在进行开发，这可能有些问题，因为您必须知道何时切换。

以下是一个快照：