共用方式為


除錯 PWA

漸進式網頁應用程式 (PWA) 是透過網路技術建構的。 因此,Microsoft Edge DevTools 中所有可用的工具對 PWA 也很有幫助。 PWA 也使用 Web 應用程式清單,並能使用服務工作者及其他需要特殊除錯工具的特定功能與 API。

另請參閱:

開放開發工具

PWA 可以在本地安裝並獨立使用,或在網頁瀏覽器如網站中使用。

你也可以在 PWA 上用同樣方式開啟 DevTools。 要開啟 DevTools,請以下方式使用:

  • 在應用程式介面中右鍵點擊任一項目,然後選擇 檢查
  • 在 Windows、Linux) 按 Ctrl+Shift+I (macOS) 按 Command+Option+I (。
  • F12

欲了解更多,請參閱 Open DevTools中的 DevTools 概述

測試變更

開發 PWA 時,你會修改原始碼並進行測試。

測試變更最快的方法,就是在網頁瀏覽器中使用本地開發網址載入你的 PWA, http://localhost:8080例如。 在瀏覽器測試比較快,因為你不需要先在本地安裝 PWA。

要測試你的更改,請按 F5 刷新載入 PWA 的瀏覽器分頁。

一旦你有一個服務工作者來快取靜態檔案,按 F5 可能不一定會重新載入瀏覽器中最新的變更。 要強制瀏覽器重新載入你的更改,請使用以下其中一種方法:

  • 打開 DevTools,在瀏覽器工具列右鍵點選 「重新整理 」,然後點 選清空快取和硬刷新
  • 打開 DevTools,打開 應用程式 工具,點選 服務人員,然後選擇 「繞過網路」 的勾選框。

要測試透過在網頁應用程式清單中新增程式碼所啟用的 PWA 功能,您必須安裝 PWA。 如果你接著對網頁應用程式清單做進一步修改,必須卸載並重新安裝 PWA。 想了解如何解除安裝你的 PWA,請參閱 Use PWA in Microsoft Edge 中的「管理 PWA」。

除錯你的服務人員

你的 PWA 服務人員負責讓你的應用程式更快、更可靠地符合網路狀況。

服務工作者透過與你的應用程式平行運行並攔截網路請求來達成此目的。 它有自己的生命週期,獨立於你的應用程式生命週期。

要檢查你的服務工作者是否正確安裝,以及它目前處於生命週期的哪個狀態,請使用應用程式工具中的服務工作者面板。 欲了解更多,請參閱 PWA) 的「除錯漸進式網頁應用程式」中的服務工作者 (。

若要除錯服務工作執行緒中執行的 JavaScript 程式碼,使用斷點,請切換至 Sources 工具中的服務工作者執行緒。 欲了解更多,請參閱 JavaScript 除錯功能中的「變更執行緒上下文」。

服務人員即使應用程式未運行也能執行背景任務,讓應用程式保持最新狀態。 例如,他們可以從伺服器擷取資料或接收推播訊息。

要除錯你的服務工作者的背景任務,請使用應用程式工具中的背景服務區塊。 欲了解更多,請參閱 除錯背景服務

查看你的網頁應用程式清單

你的網頁應用程式清單定義了應用程式的名稱、描述、圖示和功能。 這些功能是否正確運作,取決於是否正確輸入在 manifest JSON 檔案中。

要檢查 Microsoft Edge 是否偵測到你的清單檔案及其功能,請使用應用程式工具的清單面板。 欲了解更多,請參閱 PWA) 的「除錯漸進式網頁應用程式」中的網頁應用程式清單 (。

某些 PWA 清單功能有專用工具。 例如,你可以 測試 Progressive Web App (PWA) 協定處理

查看與編輯本地資料

為了為使用者提供豐富且快速的體驗,你的 PWA 可以將資料儲存在本地。 要查看、編輯及刪除儲存資料,請參考以下 DevTools 文件,視你選擇的儲存方式而定:

要查看 PWA 使用的總資料量、可用配額並刪除資料,請使用 Application 工具的儲存面板。 欲了解更多,請參閱 PWA) (除錯漸進式網頁應用程式中的儲存功能。

模擬不同螢幕尺寸

使用 Progressive Web Apps,你可以從一個程式碼庫提供適用於所有裝置的應用程式。 為了確保你的應用程式能適應所有裝置的螢幕尺寸,請使用 DevTools 中的 裝置模擬 工具。

欲了解更多,請參閱「 行動裝置模擬」 (「裝置模擬) 」。

請注意, 裝置模擬 工具僅在瀏覽器中使用 DevTools 時可用,且在已安裝的 PWA 中使用時則無法使用。 已安裝的 PWA 有自己的獨立視窗,非常容易調整大小,用來測試不同螢幕尺寸下的應用程式。