[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.

时间: 2024-09-29 11:05:12

[PWA] 3. Devtool的相关文章

DevTool开发者工具

DevTool开发者工具 chrome的开发者工具可以说是十分强大了,是web开发者的一大利器,作为我个人而言平时用到的几率很大,相信大家也很常见,但是不要仅仅停留在点选元素看看样式的层面上哦,跟着我的总结一起学习实践一下吧(能帮到你的话随便copy好了,开源时代赛高,感谢我就给我留个评论吧.但是码字就码了一两个小时,中午的午休都没了还啪啪啪的敲键盘打扰同事休息,一定要好好学啊). 目录: 一.概述 1.官方文档 2.打开方法: 3.前言: 二.九个模块: 1.设备模式Device Mode 2

如何使用chrome devtool调试Mobile网页?

凡是做过mobile网页web app开发的朋友一定对开发效率的底下会有吐槽.现在chrome dev tool改变了程序员们的苦比. 1. chrome://inspect/#devices 2. android手机中打开chrome android 3. usb连机 4. 在pc的chrome devtool中inspect即可! https://www.html5rocks.com/en/tutorials/developertools/mobile/

说说 PWA 和微信小程序--Progressive Web App

作者:云图图链接:https://zhuanlan.zhihu.com/p/22578965来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 利益相关:微信小用户,谷歌小员工 微信发布了微信小程序,虽然还在内测阶段,但是无论从技术上,还是以后要不要开发原生应用(native app)上引发了不少讨论.其实看到微信小程序的消息, 我第一时间想到的是 Google 之前推出的PWA(Progressive Web App),两者的目的是类似的(伪原生应用),但是形式却又

Project Server 2013新手入门 (一)为PWA添加用户并分享网站

之前做过Project server 2013的很多测试,一直没发上来.现在终于想着能写点自己会的东西,都比较简单,我也是新手. 之前测试的文档我会陆续的发上来,供新人参考,有不懂的,大家也可一起讨论. 我这里就不先写什么安装操作的文档啦,如果以后有需要,我再做.接下来的几篇稿子,我都写project PWA搭建好之后的一 些实际测试.那么,接下来我就开始分享我知道的东西. 一.为PWA新建用户 我们都知道微软的产品基本都是基于微软特有的AD活动目录的,这些产品像Exchange,Lync,Sh

Project Server 2013新手入门 (二)为PWA用户分配权限

上一篇文章我们讲到怎么为project server 2013 的PWA网站添加用户,那么用户添加好了,我们怎么给这些用户设置相应的权限,来对应我们项目管理中不同的角色(项目经理,资源经理.员工.负责人等),以便他们在项目整个过程中行使的权利和责任体现在我们的Project Server PWA的项目管理中心. 为用户分配PWA的全局权限(关于这个全局权限,我会在以后的文章中介绍) 执行完以上步骤之后,我们将在Project Server 2013 "服务器设置"下管理用户. 1)返回

sharepoint 2016 开启Project 2016 pwa网站

sharepoint 2016开启project service正常 进入project service无法看到添加pwa按钮: 采用powershell创建project网站集,具体步骤如下 1.输入License Enable-ProjectServerLicense –Key "23CB6-N4X8Q-WWD7M-6FHCW-9TPVP" 2.创建网站集 New-SPContentDatabase  -WebApplication  http://sp2016-1/ sp2016

[PWA] Keynote: Progressive Web Apps across all frameworks

PWA: Add to home screen Angular Universal Server side rendering: for achieving better proference on init loading Angular 2 CLI ng new myapp --mobile sw-precache: with webpack: sw-toolbox: run time caching angular2 material design: *shellRender and *s

PWA 渐进式实践 (3) - 用户体验 & 性能

为了让我们的网站能达到更高的评分(咦,为什么变成刷分了),我们最后需要进行用户体验和性能的优化. 页面加载性能 我们需要尽可能把其他所有页面做成异步的,如: function getSubmitCase(nextState, callback) { require.ensure([], (require) => { callback(null, require('./containers/case/SubmitCasePage').default); }, 'SubmitCasePage');

Project Server 2013新手入门 (十三)PWA安全模式切换

有些人问我,为啥他们装完的project server 2013 感觉缺少很多东西,用着还像在用sharepoint 2013一样,特别是在给用户分配权限等地方.下面我就给大家分享如何解决这个问题. 1.PWA的两种安全模式 ProjectServer 2013 提供两种安全模式,来控制用户对网站和项目拥有的访问权限类型: SharePoint 权限模式   在此模式(这是 Project     Server 2013 中的新增功能)中,会在与 Project Server 2013 关联的网