You can debug with chrom dev tool:

1. Use console to debug service worker:

Swith to sw.js context then you can access 'self' object

2. Set breakpoint:

You can see all the event object.

3. You can see the active service worker:

4. Once you change the code, you can see the waiting servie worker:

4. After you close and reopen the page, the waiting service work become the active one.

[PWA] 3. Devtool的更多相关文章

  1. PWA 学习笔记(四)

    Service Worker 简介: 1.Service Worker 是 PWA 技术基础之一,脱离浏览器主线程的特性,使得 Web App 离线缓存成为可能, 更为后台同步.通知推送等功能提供了思 ...

  2. [webpack] devtool配置对比

    文件结构 -src -views -essay -list.js -detail.js -index.js -webpack.config.js 文件内容 [/src/.../index.js] im ...

  3. 说说 PWA 和微信小程序--Progressive Web App

    作者:云图图链接:https://zhuanlan.zhihu.com/p/22578965来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 利益相关:微信小用户,谷歌小 ...

  4. [PWA] Keynote: Progressive Web Apps across all frameworks

    PWA: Add to home screen Angular Universal Server side rendering: for achieving better proference on ...

  5. PWA - 渐进式网络应用初认识

    Progressive Web Apps 简称PWA,是一种接近原生用户体验的渐进增强的web-app.从浏览器演进而来,沉浸式的体验,改进web的性能低下等.是Google 在2015年提出,今年才 ...

  6. 《微信小程序七日谈》- 第六天:小程序devtool隐藏的秘密

    <微信小程序七日谈>系列文章: 第一天:人生若只如初见: 第二天:你可能要抛弃原来的响应式开发思维: 第三天:玩转Page组件的生命周期: 第四天:页面路径最多五层?导航可以这么玩: 第五 ...

  7. DevTool开发者工具

    DevTool开发者工具 chrome的开发者工具可以说是十分强大了,是web开发者的一大利器,作为我个人而言平时用到的几率很大,相信大家也很常见,但是不要仅仅停留在点选元素看看样式的层面上哦,跟着我 ...

  8. 轻松把你的项目升级到PWA

    什么是PWA PWA(Progressive Web Apps,渐进式网页应用)是Google在2015年推出的项目,致力于通过web app获得类似native app体验的网站. 优点 1.无需客 ...

  9. PWA学习心得

    PWA学习心得 一.什么是PWA Progressive  Web  App , (渐进式增强 WEB 应用) 简称 PWA ,是提升WebApp的体验的一种新方法,能给用户原生应用的体验. PWA ...

随机推荐

  1. functools学习有感

    functools的内容不多,包含四个函数(partial,reduce,update_wrapper,wraps)和一个python对象(partial Objects). functools的四个 ...

  2. TestNG目录

    1 - 简介  2 - 注解  3 - testng.xml  4 - 执行 TestNG  5 - 测试方法, 测试类 和 测试组    5.1 - 测试方法    5.2 - 测试组    5.3 ...

  3. jQuery-弹窗登录

    在jQuery中实现弹窗常要用到的方法有: width()  :元素的宽度 outerWidth()  元素的宽度 盒子的padding+border 总的宽度 scrollTop()  鼠标滚轮自上 ...

  4. POJ2524-宗教问题-并查集-ACM

    太难的搞不过,只能来写简单的了 POJ2524 无所不在的宗教 世界上宗教何其多.假设你对自己学校的学生总共有多少种宗教信仰很感兴趣.学校有n个学生,但是你不能直接问学生的信仰,不然他会感到很不舒服的 ...

  5. css实现三角的一些方法

    css实现三角没有想象中的那么难,只要明白border的各种属性的意思就很好明白css三角是如何实现的. 一下是几个很简单的例子:   css三角形状的制作:     css样式:    .trian ...

  6. coreseek(sphinx)错误:WARNING: attribute 'id' not found - IGNORING

    coreseek(sphinx)错误:WARNING: attribute 'id' not found - IGNORING原因及解决方法 coreseek(sphinx)建立索引时提示错误: WA ...

  7. DataNode工作原理(四)

    DataNode的作用:提供真实文件数据的存储服务.以文件块进行存储. 文件块(block):最基本的存储单位.对文件内容而言,一个文件的长度大小是size,那么从文件的0偏移开始,按照固定的大小,顺 ...

  8. Solr4.8.0源码分析(25)之SolrCloud的Split流程

    Solr4.8.0源码分析(25)之SolrCloud的Split流程(一) 题记:昨天有位网友问我SolrCloud的split的机制是如何的,这个还真不知道,所以今天抽空去看了Split的原理,大 ...

  9. BZOJ 1043 下落的圆盘

    Description 有n个圆盘从天而降,后面落下的可以盖住前面的.求最后形成的封闭区域的周长.看下面这副图, 所有的红色线条的总长度即为所求.  Input n ri xi y1 ... rn x ...

  10. 转:阿里旺旺导致python安装包失败的解决办法

    我以前使用web.py没事,今天运行时报错, mimetypes.init() # try to read system mime.types File "D:\ProgramFiles\p ...