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. 工厂方法模式(Factory Method)

    1.本质:延迟到子类来选择实现 2.示意图: 3.主要功能: 让父类在不知道具体实现的情况下,完成自身功能的调用 类似于注入 4.备注: 1.工厂方法中,通常父类是一个抽象类,里面包含创建对象的抽象工 ...

  2. OA系统权限管理设计方案学习

    学习之:http://www.cnblogs.com/kivenhou/archive/2009/10/19/1586106.html 此为模型图: 据此写了sql语句: drop table if ...

  3. LGDT/LIDT-加载全局/中断描述符表寄存器

    将源操作数中的值加载到全局描述符表寄存器 (GDTR) 或中断描述符表寄存器 (IDTR).源操作数指定 6 字节内存位置,它包含全局描述符表 (GDT) 或中断描述符表 (IDT) 的基址(线性地址 ...

  4. python中去掉空行的问题

    在python中处理空行时,经常会遇到一些问题.现总结经验如下: 1.遇到的空行如果只有换行符,直接使用=='\n'或者 len(line)==line.count('\n') 2.有多个空格+换行符 ...

  5. sql 学习之 group by 及 聚合函数

    1.在使用 GROUP BY 子句时,Select列表中的所有列必须是聚合列(SUM,MIN/MAX,AVG等)或是GROUP BY 子句中包括的列.同样,如果在SELECT 列表中使用聚合列,SEL ...

  6. Java Socket Example

    1.服务端:server package com.socket; import java.io.BufferedReader; import java.io.IOException; import j ...

  7. 栈和队列的面试题Java实现

    栈和队列: 面试的时候,栈和队列经常会成对出现来考察.本文包含栈和队列的如下考试内容: (1)栈的创建 (2)队列的创建 (3)两个栈实现一个队列 (4)两个队列实现一个栈 (5)设计含最小函数min ...

  8. jQuery Validate 验证，校验规则写在控件中的具体例子

    将校验规则写到控件中 <script src="../js/jquery.js" type="text/javascript"></scrip ...

  9. 洛谷1001 A+B Problem

    洛谷1001 A+B Problem 本题地址:http://www.luogu.org/problem/show?pid=1001 题目描述 输入两个整数a,b,输出它们的和(|a|,|b|< ...

  10. POJ 3436 ACM Computer Factory

    题意:   为了追求ACM比赛的公平性,所有用作ACM比赛的电脑性能是一样的,而ACM董事会专门有一条生产线来生产这样的电脑,随着比赛规模的越来越大,生产线的生产能力不能满足需要,所以说ACM董事会想 ...