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. 解决linux .so的链接时符号依赖问题

    问题描述 target: a.out SO:libmyfile.so 依赖描述: a.out: libmyfile.so libmyfile.so:  libssl.so.1.0.0 libssl.s ...

  2. Winform使用DevExpress的WaitDialogForm画面

    使用了DevExpress的WaitDialogForm 在应用程序加载开始时新建一个线程,并将loading画面show起来,在应用程序画面弹出前将该线程终止. 代码: private DevExp ...

  3. 简单的html5 File base64 图片上传

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. BAE 环境下 hibernate annotations 配置

     annotations 配置 首先需要加入 hibernate-jpa-2.0-api-1.0.1.Final.jar 和 ejb3-persistence.jar 这两个包 ejb3-persis ...

  5. ASP.NET关于引用bootstrap.css导致Gridview Header无法居中

    HorizontalAlign="Center"  属性因不知名原因被覆盖掉. 可以使用<HeaderStyle  CssClass="text-center&qu ...

  6. Google为何这么屌

    概述: 在移动市场上,从来没有一个公司像Google一样的玩法,以后可能也不会有.因为这根本就不是一个商业模式.它可以调动极大的资源而几乎没有盈利压力,它力逾千钧又身段灵活.它从来不尊重这个市场原有的 ...

  7. Sereja ans Anagrams

    Codeforces Round #215 (Div. 1) B:http://codeforces.com/problemset/problem/367/B 题意:给你两个序列a,b,然后给你一个数 ...

  8. 用Java实现非阻塞通信

    用ServerSocket和Socket来编写服务器程序和客户程序,是Java网络编程的最基本的方式.这些服务器程序或客户程序在运行过程中常常会阻塞.例如当一个线程执行ServerSocket的acc ...

  9. aix ipcs使用说明

    ipcs: -q   Writes information about active message queues -o             Writes the following usage ...

  10. Effective c++ 第一章 让自己习惯C++

    条款 01:c++是一个语言联邦而不是一种单一的语言, 它包括: 1.C语言:没有模版.没有异常.没有重载…… 2.Object-Oriented C++:class.析构函数.构造函数.封装.继承. ...