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

Question

我有一个使用新的 Service Worker（渐进式 Web 应用程序）的非常简单的示例 - 请参阅https://developers.google.com/web/fundamentals/getting-started/primers/service-workers

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

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

以下是 ServiceWorker.js 中的代码，它应在控制台中显示 fetch 语句。

//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 的本地主机上）时，我看不到输出到控制台的 fetch 语句。（这是ServiceWorker.js文件中的代码）我只看到初始注册。

看起来像：

我尝试过的事情

1. 停止并重新启动 IIS Express
2. 更改为 Chrome 开发工具“应用程序”选项卡并强制更新（参见下图）
3. 更改为 Chrome 开发工具“应用程序”选项卡并强制“未注册”再次运行并重新注册（参见下图）

在 Chrome 中，您永远不会看到控制台因获取项目而更新。

4. 在 Firefox 中本地运行

但是，我在 FireFox 中运行了相同的代码，该控制台确实显示了获取项目：

编辑 有人问此问题是否由于 Console.log 过滤器而发生，因此这里的快照显示没有打开过滤器，并且确实显示了所有 console.log 条目。这是多次运行（页面重新加载）。

Answer 1

哇。好吧，看来 Chrome 不会将 ServiceWorker 控制台语句输出到“主”console.log - 正如我在问题中所示。

相反，你必须：

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

2.将弹出一个窗口。

3.之后，您必须切换到该（弹出）窗口的控制台选项卡，您将看到输出。

但是，输出仍然没有显示在应用程序的主控制台上。这有点痛苦。此外，该检查链接有时会消失，您必须重新启动服务工作人员。:(

它看起来像这样：（我对窗口进行了分层，以便您可以在图像中看到它。请参阅下部窗口右下角的“检查”链接。）

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

好吧，实际上这比表面上看到的要复杂得多。我之前打开了“重新加载时更新”选项，以便重新加载我的开发更改。它看起来像下面这样：

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

这意味着如果启用此选项（重新加载时更新），它似乎会注册服务工作线程，但永远不会命中获取代码。这就是它在主控制台中的行为方式。因此，我通过关闭“重新加载时更新”来测试它，现在我在 Chrome 的主控制台中看到了 fetch 语句。然而，如果您正在进行开发，这有点问题，因为您必须知道来回切换。

这是一个快照：