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. mongo db安装和php，python插件安装

    安装mongodb 1.下载,解压mongodb(下载解压目录为/opt) 在/opt目录下执行命令 wget fastdl.mongodb.org/linux/mongodb-linux-x86_6 ...

  2. 24种设计模式--多例模式【Multition Pattern】

    这种情况有没有?有!大点声,有没有?有,是,确实有,就出现在明朝,那三国期间的算不算,不算,各自称帝,各有各的地盘,国号不同.大家还 记得那首诗<石灰吟>吗?作者是谁?于谦,他是被谁杀死的 ...

  3. C# 控制台程序设置字体颜色

    这几天做了个程序,程序本身很简单.大体功能是输入查询条件,从数据库里取出结果计算并显示.但是用户的要求是使用控制台(console)来实现功能.由于功能简单,程序很快就做完了,在面向用户演示程序时,突 ...

  4. [jQuery编程挑战]004 针对选择框词典式排序

    <!DOCTYPE html> <html lang="zh"> <head> <meta charset="utf-8&quo ...

  5. PHP android ios相互兼容的AES加密算法

    APP项目用户密码传输一直没有用HTTPS,考虑到用户的隐私暂时先用AES对密码加密,以后也可以用于手机端与服务端加密交互. PHP的免费版phpAES项目,手机端解码各种不对. 好不容易找了PHP ...

  6. codeforces C. Prime Swaps

    题意:给你n个数,然后在交换次数小于等于5×n的情况下使得这个序列变成升序,输出次数; 思路:哥德巴赫猜想:任何一个大于5的数都可以写成三个质数之和.尽可能的找大的素数,从1的位置向右逐步的调整,每一 ...

  7. iOS 颜色选择器 仿ps 调色板

    前几天写东西,需要到调色板,自己网上搜了一下,好多都写得很麻烦,自己手敲了一个,使用很简单,飞虎不多说,上图,上代码,上使用教程,希望大家喜欢,(基于xcode7.0版本) 最后更新于15/12/14 ...

  8. Git skills in reseting files

    How to uncommit files that were committed long time a ago?Note: Since all changes in the current wor ...

  9. Sumdiv(各种数学)

    http://poj.org/problem?id=1845 题意:求A^B的所有约数的和再对9901取模: 做了这个学到了N多数学知识: 一:任意一个整数都可以唯一分解成素因子的乘积:A = p1^ ...

  10. Validate Binary Search Tree——LeetCode

    Given a binary tree, determine if it is a valid binary search tree (BST). Assume a BST is defined as ...