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. ubuntu 14.04.02 LTS 启动项误写入 /dev/sda1 (win 7 loader) 修复

    问题描述: 在win7下安装Ubuntu14.04,由于启动项 /boot loader 安装位置错误(/dev/sda1 (win 7 loader) )导致无法进入Windows(在GRUB界面能 ...

  2. extjs下拉框添加复选框

    给ComboBox组件配置listConfig 下拉框代码: var gyslxcm = Ext.create('Ext.form.field.ComboBox',{ id : 'gyslxcm', ...

  3. TatukGIS - GisDefs - DateTimeToXMLString 函数

    函数名称  DateTimeToXMLString 所在单元  GisDefs 函数原型           function DateTimeToXMLString(_dtm: TDateTime; ...

  4. 使用Python操作Redis

    1. 安装pyredis 首先安装pip   1 2 3 4 5 6 7 8 <SHELL># apt-get install python-pip ...... <SHELL> ...

  5. GPUImage 自定义滤镜

    GPUImage 自定义滤镜 GPUImage 是一个基于 GPU 图像和视频处理的开源 iOS 框架.由于使用 GPU 来处理图像和视频,所以速度非常快,它的作者 BradLarson 称在 iPh ...

  6. [BZOJ 1692] [Usaco2007 Dec] 队列变换 【后缀数组 + 贪心】

    ---恢复内容开始--- 题目链接:BZOJ - 1692 题目分析 首先,有个比较简单的贪心思路:如果当前剩余字符串的两端字母不同,就选取小的字母,这样显然是正确的. 然而若两端字母相同,我们怎么选 ...

  7. iso 开发学习--简易音乐播放器(基于iPhone4s屏幕尺寸)

    三个按钮  一个进度条 贴图(软件中部分图片,来自网络,如果侵犯了您的权益,请联系我,会立刻撤下) 核心代码 // // ViewController.m // 08-10-MusicPlayer / ...

  8. Caption,Text,WindowText的区别——TControl也有FText,是为了模拟一个窗口

    TControl = class(TComponent) // 控件的Windows功能从TControl开始 property Caption: TCaption read GetText writ ...

  9. 【HDOJ】1760 A New Tetris Game

    博弈,主要是求SG值.终于做出点儿感觉. /* 1760 */ #include <cstdio> #include <cstring> #include <cstdli ...

  10. Integer Intervals(贪心)

    Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 12123   Accepted: 5129 Description An i ...