[PWA] 3. Devtool
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的更多相关文章
- PWA 学习笔记(四)
Service Worker 简介: 1.Service Worker 是 PWA 技术基础之一,脱离浏览器主线程的特性,使得 Web App 离线缓存成为可能, 更为后台同步.通知推送等功能提供了思 ...
- [webpack] devtool配置对比
文件结构 -src -views -essay -list.js -detail.js -index.js -webpack.config.js 文件内容 [/src/.../index.js] im ...
- 说说 PWA 和微信小程序--Progressive Web App
作者:云图图链接:https://zhuanlan.zhihu.com/p/22578965来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 利益相关:微信小用户,谷歌小 ...
- [PWA] Keynote: Progressive Web Apps across all frameworks
PWA: Add to home screen Angular Universal Server side rendering: for achieving better proference on ...
- PWA - 渐进式网络应用初认识
Progressive Web Apps 简称PWA,是一种接近原生用户体验的渐进增强的web-app.从浏览器演进而来,沉浸式的体验,改进web的性能低下等.是Google 在2015年提出,今年才 ...
- 《微信小程序七日谈》- 第六天:小程序devtool隐藏的秘密
<微信小程序七日谈>系列文章: 第一天:人生若只如初见: 第二天:你可能要抛弃原来的响应式开发思维: 第三天:玩转Page组件的生命周期: 第四天:页面路径最多五层?导航可以这么玩: 第五 ...
- DevTool开发者工具
DevTool开发者工具 chrome的开发者工具可以说是十分强大了,是web开发者的一大利器,作为我个人而言平时用到的几率很大,相信大家也很常见,但是不要仅仅停留在点选元素看看样式的层面上哦,跟着我 ...
- 轻松把你的项目升级到PWA
什么是PWA PWA(Progressive Web Apps,渐进式网页应用)是Google在2015年推出的项目,致力于通过web app获得类似native app体验的网站. 优点 1.无需客 ...
- PWA学习心得
PWA学习心得 一.什么是PWA Progressive Web App , (渐进式增强 WEB 应用) 简称 PWA ,是提升WebApp的体验的一种新方法,能给用户原生应用的体验. PWA ...
随机推荐
- CentOS中vsftp安装、配置、卸载
1. 安装VSFTP 1 [root@localhost ~]# yum -y install vsftpd 2. 配置vsftpd.conf文件 [root@localhost ~]# vi /et ...
- ffmepg命令行参数
ffmpeg使用 有些选项在每个流中都必须指定,例如比特率bitrate或编解码codec.指定流的字符串一般都会有各参数名称和参数,如编解码"-codec:a:1 ac3"表明第 ...
- Android中AppWidget的分析与应用:AppWidgetProvider .
from: http://blog.csdn.net/thl789/article/details/7887968 本文从开发AppWidgetProvider角度出发,看一个AppWidgetPrv ...
- 关于DEDECMS目录移动方法
最近在做一个美容医院的站,由于我的本地的PHP服务器上有几个站,又不能放在根目录下,只能在根目录下新建一个目录来存放这个站,于是就有了这篇文章. 如果我们直接将根目录下的A文件夹下的DEDECMS文件 ...
- linux系统删除空间后系统分区空间仍不释放问题
总结的原因: 1.删除文件文件后没有清空回收站; 2.删除的文件不在系统分区,在其他分区上; 3.删除的文件被保留在了/tmp分区下,而/tmp分区不是独立的分区,是在根分区/的基础上划分出来的分区; ...
- python【第三篇】函数
内容大纲: 1.函数基本语法与特性 2.参数与局部变量 3.返回值 4.递归 5.匿名函数lambda 6.函数式编程介绍 7.高阶函数 8.内置函数 1.函数基本语法与特性 函数的定义:函数是指将一 ...
- newman安装时遇到问题的解决
npm安装newman时系统提示需要安装.net framwork环境 通过查询文档安装visual studio express: 于是安装visual studio 2012 express. 安 ...
- 常用Firefox扩展
最近思维混乱,无心做事,故整理下东西.(PS:有些是firefox自带的.) 1.标签页管理器 2.1.41 用途:在新标签页打开书签.历史.地址.搜索. 主页:http://www.firefox. ...
- App适配iPhone 6/ Plus和iOS 8:10条小秘诀
App适配iPhone 6/ Plus和iOS 8:10条小秘诀 iPhone 6iOS 8适配 (原文:raywenderlich 作者:Jack Wu 译者:@TurtleFromMars ...
- ios+oc面试题
ios+oc面试题 浅复制和深复制的区别?//浅拷贝和深拷贝答案:浅层复制(copy):只复制指向对象的指针,而不复制引用对象本身.//通过对象的指针来访问这个对象深层复制(mutableCo ...