在本地主机上运行时,为什么Service Worker似乎无法在Google Chrome浏览器中写入控制台?

拉德德武斯

我有一个使用新的Service Worker(渐进式Web Apps)的非常简单的示例-有关更多信息,参见https://developers.google.com/web/fundamentals/getting-started/primers/service-workers

当我从本地主机运行应用程序时,该示例似乎无法在console.log()上编写。但是,它确实可以在我创建的插件中使用。以下是在plunkr上运行它的步骤:

1.使用以下URL(从您的Google Chrome Web浏览器),然后将显示Plunkr编辑器:https ://plnkr.co/edit/FgG2krKDuSmIddR1Pskd?p = preview

这是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上)时,看不到获取语句输出到控制台。(这是ServiceWorker.js文件中的代码)我只看到初始注册。

看起来像: 服务人员注册

我尝试过的事情

  1. 停止并重新启动IIS Express
  2. 更改为Chrome Dev工具的“应用程序”标签并强制执行更新(请参见下图)
  3. 更改为Chrome Dev工具的“应用程序”标签,并强制取消注册再次运行并重新注册(请参见下图)

更新和注销

In Chrome you will never see the console updated with the fetch items.

4. Run Locally In Firefox

However, I ran the same code in FireFox and that console does show the fetch items: Firefox控制台

EDIT Someone asked if this problem occurs because of a Console.log filter so here's a snapshot showing there are no filters on and all console.log entries are indeed shown. This is numerous runs (reloads of the page). 没有控制台过滤器

raddevus

Wow. Okay, so it looks like Chrome will not output the ServiceWorker console statements to the "main" console.log -- as I showed in my question.

Instead, you have to :

1. click the Inspect link under the Application tab.

2. A window will pop up.

3. After that, you have to switch to that (pop up) window's Console tab and you will see the output.

However, the output still does not show up on the main console of the app. This is a bit of a pain. Also, that inspect link disappears at times and you have to restart the service worker. :(

Here's what it looks like: (I've layered the windows so you can see it in the image. See the "Inspect" link at the bottom right in the lower window.) 通过应用程序检查

EDIT and PART 2 -- With Second Solution

Okay, there is actually more to this than meets the eye. I had previously turned on the option, Update On Reload, so that my dev changes would be reloaded. It looks like the following: update on reload

这应该迫使服务人员每次重新加载。好吧,确实如此。但是,在这种情况下,使用此确切的代码示例会产生副作用。它将导致每次进行初始注册。但是,获取代码仅在第二次加载页面时运行。

这意味着,如果启用了此选项(“更新时重新加载”),它似乎在注册服务工作程序,但从未命中获取代码。这就是它在主控制台中的行为。因此,我通过关闭“重新加载时更新”进行了测试,现在我在Chrome的主控制台中看到了fetch语句。但是,如果您在进行开发,这会有些问题,因为您必须知道来回切换。

这是快照:

console works

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

什么是服务工作者控制台?&Chrome浏览器在哪里?

无法在本地主机上启动Go服务器

Google AppEngine开发应用服务器不会在本地主机上运行

在开发服务器(在本地主机上)上运行Google Cloud Endpoints的API Explorer不再起作用

应用程序缓存:为什么Chrome浏览器在控制台日志中显示带下划线的文件?

在firefox中,Web控制台和浏览器控制台有什么区别

hasOwnProperty()在Chrome浏览器中无法运行

如何在本地主机上的浏览器中运行Java .class小程序

超级客户端无法查找在IPv6本地主机上运行的服务器的地址信息

如何循环延迟1秒“ Google Chrome浏览器内部控制台”

由Apache重定向时,无法从Web访问本地主机上运行的闪亮服务器

通过Google Chrome浏览器控制台在Netflix上设置视频播放速率

在本地主机上运行时,Google Optimize不触发

如何在Google Chrome浏览器中运行Postman

与浏览器控制台相比,stackoverflow片段中的console.log()不同-为什么?

如何在python中从Web浏览器控制台运行命令?

Google Chrome浏览器到本地主机的速度很慢

什么是Google Chrome浏览器中的“钥匙扣”?

什么是Google Chrome浏览器中的密钥生成?

Google Chrome浏览器在离线时不会加载本地主机网站

Google Chrome浏览器中的createPeriodicWave()的参数是什么?

jQuery无法在我的浏览器(本地主机)上运行

chrome-从浏览器控制台“ undefined”运行javascript函数

为什么控制台返回正确的数据,而不返回浏览器?

Firefox与Chrome浏览器类似的类似多行控制台是什么?

仅当Jetty应用程序在本地主机上运行时,非英语(希伯来语)字符才能很好地插入到mysql DB中!(部署到heroku)

网页可以在本地主机上正常运行,但是当我将其托管在Google驱动器中时却无法正常运行

为什么jQuery脚本可以在本地主机上运行但不能在Web服务器上运行?

Docker 容器无法连接到在本地主机上运行的服务器

TOP 榜单

热门标签

归档