# 6）在Chrome中调试你的PWA

> 前几篇文章介绍了PWA中的一些功能与背后的技术。工欲善其事，必先利其器。这一篇会介绍如何调试我们的PWA。

### 1. Service Worker

新版的chrome调试工具中集成了Service Worker调试工具。

开启chrome调试工具，选择Application选项卡。在左侧的列表选择Application --> Service Worker，就会显示当前站点下的Service Worker。

![](https://user-gold-cdn.xitu.io/2018/4/29/16310656fb567e8f?w=1196\&h=494\&f=png\&s=88288)

在Service Worker下有三个复选框：

* **Offline**：切换为无网环境。通过勾选可以方便查看应用在无网环境中的表现。
* **Update on reload**：每次reload都更新Service Worker。一般来说，当访问站点发现Service Worker有更新后，为了保证本次访问，不会立即激活新的Service Worker，只会在安装后进入等待状态，在下一次访问时激活。勾选该选项就可以使每次Reload后都重新安装与激活Service Worker。
* **Bypass for network**：使用网络请求。我们知道Service Worker可以拦截客户端请求，勾选该选项后所有请求都会直接走网络请求。

面板右上角的Upadte按钮可以手动触发Service Worker的更新；而Unregister类似于代码中的unregister，用于注销当前的Service Worker。

从下方“Service workers from other domain”中，可以查看在这个client上所有注册过的Service Worker：

![](https://user-gold-cdn.xitu.io/2018/4/29/163107b914043f63?w=1195\&h=894\&f=png\&s=129528)

Service Worker主面板区域包括了：Source、Status、Clients、Push和Sync五个项目。

![](https://user-gold-cdn.xitu.io/2018/4/29/163106e9284cbc26?w=601\&h=242\&f=png\&s=28360)

* **Source**：展示了当前注册所使用的Service Worker脚本（sw\.js），点击可以查看脚本内容。同时还展示了该Service Worker的安装时间。
* **Status**：展示Service Worker所处的生命周期。通过点击stop按钮可以暂停该Service Worker。其中，`#1201`表示Service Worker的版本，当sw\.js文件未更改时，reload站点该数字是不会增加的；但是当勾选Update on reload后，由于每次reload都会触发Service Worker重新安装，因此该数字会增加。
* **Clients**：显示了当前Service Worker所作用的root。focus按钮用来帮你快速切换到该Service Worker对应的tab（当你打开多个站点的tab时，点击可以快速切换）。
* **Push**：用来模拟进行推送。
* **Sync**：用来模拟进行后台同步。

在Service Worker中`console.log`的信息也会显示在Console中。此外，由于默认情况下，reload页面会清空console，为了保存一些日志信息，可以打开Preserve log来保留Console信息。

![](https://user-gold-cdn.xitu.io/2018/4/29/163108561231f344?w=1195\&h=264\&f=png\&s=73587)

### 2. Manifest

在Application中，点击Manifest即可看到当前应用所使用的Manifest配置：

![](https://user-gold-cdn.xitu.io/2018/4/29/163108efbea4b61d?w=1196\&h=748\&f=png\&s=78387)

同样，点击manifest.json出链接可以查看manifest文件。点击“Add to homescreen”可以把应用添加到桌面。除了点击“Add to homescreen”，也可以使用chrome中的添加到应用文件夹。

![](https://user-gold-cdn.xitu.io/2018/4/29/1631097d137fb789?w=285\&h=437\&f=png\&s=53243)

### 3. Cache

除了Service Worker与Manifest，在我们的WebApp中还用到了Cache。在Application中也支持查看Cache：在Cache列表的Cache Storage中查看。

![](https://user-gold-cdn.xitu.io/2018/4/29/163109e551b9cd0f?w=1197\&h=393\&f=png\&s=89517)

其中bs-0-2-0和api-0-1-1就是我们的“图书搜索”Web App所创建与使用的两个cache。在bs-0-2-0中缓存了包括页面、js、css、图片在内的一些静态资源；在而api-0-1-1中则缓存了图书检索的XHR请求。

![](https://user-gold-cdn.xitu.io/2018/4/29/16310a142d0c794d?w=1197\&h=503\&f=png\&s=116464)

如果想删除某些cache，可以右键点击，然后选择Delete；也可以点击上方的×。除了在这里清除cache，还可以在Application下的Clear Storage中清除包括Service Worker、Cache与Storage（cookie/localstorage/IndexedDB……）等数据。

![](https://user-gold-cdn.xitu.io/2018/4/29/16310a439ef7c605?w=1196\&h=664\&f=png\&s=88822)

### 写在最后

在下一篇文章里，我们会继续了解另一个经常与Push API组合在一起的功能——消息提醒，Notification API。


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://pwa.alienzhou.com/6-zai-chrome-zhong-tiao-shi-ni-de-pwa.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.