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. phpcms源码跟踪(1)

    本次跟踪解决几个问题: 1.缓存文件从哪里来,过程中被删除了怎么办 2.模板html是如何被引入的 进入首页时,通过最初的调用,进入控制器\phpcms\modules\content\index.p ...

  2. ZOJ3870 Team Formation

    /** Author: Oliver ProblemId: ZOJ3870 Team Formation */ /* 思路 1.异或运算,使用^会爆,想到二进制: 2.我们可以试着从前往后模拟一位一位 ...

  3. 自定义复选框 checkbox 样式

    默认的复选框样式一般在项目中都很少用 ,看起来也丑丑的.这里提供一个优化样式后的复选框.原理就是隐藏掉默认样式,在用设计好的样式替代 html结构 <div> <input type ...

  4. DEDECMS使用SQL命令批量替换语句

    1.更改文章中的内容 update dede_addonarticle set body=replace(body,'原来的字符','替换后的字符') 2,替换文章标题 update dede_arc ...

  5. 一个CS出身的基本素养

    从前天10号提交Paper之后,连三个晚上之后突然正常起来竟然变成倒时差状态. 这周打算给自己一个空窗期,好好想想下两到三个月要做的事. 好吧,除了"一日一算法",当下两个月还有一 ...

  6. 不定参数函数原理以及实现一个属于自己的printf函数

    一.不定参数函数原理 二.实现一个属于自己的printf函数 参考博文:王爽汇编语言综合研究-函数如何接收不定数量的参数

  7. windows2008 R2 安装wampserver

    1. 在官网http://www.wampserver.com/下载,wampserver2.5; 2. 安装时候会缺少msvcr110.dll文件,所以先要安装这个文件: 3. 先从微软下载Visu ...

  8. Ubuntu系统使用技巧

    ======================vbox 显示模式=====================right_ctrl+c     自动缩放right_ctrl_home  显示菜单====== ...

  9. 【Java】java的内存浅析

    一.闲谈下 201407月记着那时候身体垮了下来,呵呵.想说,对自己的说,也是对大家的负责吧.那时候胸疼胸闷,然后几乎累垮了,我还坚持了一星期,那一星期真的迷迷糊糊.完全不能看代码,看代码就晕.一直想 ...

  10. Frequent values

    poj3368:http://poj.org/problem?id=3368 题意:给你一个非下降的序列,然后查询[l,r]内出现最多数字的次数. 题解:首先,因为序列是非下降的,所以相同的数字出现在 ...