《PWA學習與實踐》系列文章已整理至gitbook - PWA學習手冊，文字內容已同步至learning-pwa-ebook。轉載請註明作者與出處。
本文是《PWA學習與實踐》系列的第六篇文章。
PWA作為時下最火熱的技術概念之一，對提升Web應用的安全、效能和體驗有著很大的意義，非常值得我們去了解與學習。對PWA感興趣的朋友歡迎關注《PWA學習與實踐》系列文章。
前幾篇文章介紹了PWA中的一些功能與背後的技術。工欲善其事，必先利其器。這一篇會介紹如何除錯我們的PWA。
Service Worker
新版的chrome除錯工具中整合了Service Worker除錯工具。
開啟chrome除錯工具，選擇Application選項卡。在左側的列表選擇Application --> Service Worker，就會顯示當前站點下的Service Worker。
在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：
Service Worker主皮膚區域包括了：Source、Status、Clients、Push和Sync五個專案。
- 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資訊。
Manifest
在Application中，點選Manifest即可看到當前應用所使用的Manifest配置：
同樣，點選manifest.json出連結可以檢視manifest檔案。點選“Add to homescreen”可以把應用新增到桌面。除了點選“Add to homescreen”，也可以使用chrome中的新增到應用資料夾。
Cache
除了Service Worker與Manifest，在我們的WebApp中還用到了Cache。在Application中也支援檢視Cache：在Cache列表的Cache Storage中檢視。
其中bs-0-2-0和api-0-1-1就是我們的“圖書搜尋”Web App所建立與使用的兩個cache。在bs-0-2-0中快取了包括頁面、js、css、圖片在內的一些靜態資源；在而api-0-1-1中則快取了圖書檢索的XHR請求。
如果想刪除某些cache，可以右鍵點選，然後選擇Delete；也可以點選上方的×。除了在這裡清除cache，還可以在Application下的Clear Storage中清除包括Service Worker、Cache與Storage（cookie/localstorage/IndexedDB……）等資料。
寫在最後
如果你喜歡或想要了解更多的PWA相關知識，歡迎關注我，關注《PWA學習與實踐》系列文章。我會總結整理自己學習PWA過程的遇到的疑問與技術點，並通過實際程式碼和大家一起實踐。
在下一篇文章裡，我們會繼續瞭解另一個經常與Push API組合在一起的功能——訊息提醒，Notification API。
《PWA學習與實踐》系列
- 第一篇：2018，開始你的PWA學習之旅
- 第二篇：10分鐘學會使用Manifest，讓你的WebApp更“Native”
- 第三篇：從今天起，讓你的WebApp離線可用
- 第四篇：TroubleShooting: 解決FireBase login驗證失敗問題
- 第五篇：與你的使用者保持聯絡: Web Push功能
- 第六篇：How to Debug? 在chrome中除錯你的PWA（本文）
- 第七篇：增強互動：使用Notification API來進行提醒
- 第八篇：使用Service Worker進行後臺資料同步
- 第九篇：PWA實踐中的問題與解決方案
- 第十篇：Resource Hint - 提升頁面載入效能與體驗
- 第十一篇：從PWA離線工具集workbox中學習各類離線策略（寫作中…）