對 PWA 進行偵錯
漸進式 Web 應用程式 (PWA) 是使用 Web 技術所建置。 因此,Microsoft Edge DevTools 中所有可用的工具也適用於 PWA。 PWA 也會使用 Web 應用程式指令清單,而且可以使用服務工作者和其他需要特殊偵錯工具的特定功能和 API。
另請參閱:
開啟DevTools
PWA 可以安裝在本機,並用於獨立視窗中,也可以在網站之類的網頁瀏覽器中使用。
在這兩種情況下,您可以在 PWA 上以相同方式開啟 DevTools。 若要開啟 DevTools,請使用下列其中一種方式:
- 以滑鼠右鍵按兩下應用程式使用者介面中的任何項目,然後選取 [ 檢查]。
- 按 Ctrl+Shift+I (Windows、Linux) 或 Command+Option+I (macOS) 。
- 按 F12。
若要深入瞭解,請參閱DevTools概觀中的開啟DevTools。
測試變更
開發 PWA 時,您會變更原始程式碼,然後進行測試。
測試變更的最快方式是在網頁瀏覽器中使用其本機開發 URL 載入 PWA,例如 http://localhost:8080
。 在瀏覽器中測試的速度較快,因為您不需要先在本機安裝 PWA。
若要測試您的變更,請按 F5 重新整理載入 PWA 的瀏覽器索引標籤。
一旦您有快取靜態檔案的服務背景工作角色,按 F5 不一定會在瀏覽器中重載您最新的變更。 若要強制瀏覽器重載您的變更,請使用下列其中一種方式:
- 開啟 DevTools,以滑鼠右鍵按兩下瀏覽器工具列中的 [ 重新 整理],然後按兩下 [ 空白快取和硬式重新整理]。
- 開啟 DevTools,開 啟應用程式工具 ,按兩下 [服務背景工作角色],然後選取 [ 略過網络 ] 複選框。
若要測試在 Web 應用程式指令清單中新增程式碼所啟用的 PWA 功能,您必須安裝 PWA。 如果您接著對 Web 應用程式指令清單進行進一步的變更,您必須卸載並重新安裝 PWA。 若要瞭解如何卸載 PWA,請參閱在 Microsoft Edge 中使用 PWA 中管理 PWA。
對服務背景工作角色進行偵錯
您的 PWA 服務工作者負責讓您的應用程式更快速且更可靠地符合網路條件。
服務工作者會以平行方式執行您的應用程式,並攔截網路要求來執行這項作業。 它有自己的生命週期,與您的應用程式生命周期無關。
若要檢查您的服務工作者是否已正確安裝,以及目前處於其生命週期的狀態,請使用應用程式工具的 [服務背景工作角色] 窗格。 若要深入瞭解,請參閱偵錯漸進式 Web 應用程式中的服務工作者 (PWA) 。
若要偵錯在服務背景工作線程中執行的 JavaScript 程式代碼,請使用斷點,在 來源 工具中切換至服務背景工作線程。 若要深入瞭解,請參閱變更 JavaScript 偵錯功能中的線程內容。
即使您的應用程式未執行,服務工作者仍可執行,並執行背景工作,讓您的應用程式保持在最新狀態。 例如,他們可以從伺服器擷取數據或接收推播訊息。
若要對服務背景工作進行偵錯,請使用應用程式工具的[背景服務] 區段。 若要深入瞭解,請參 閱偵錯背景服務。
檢視 Web 應用程式指令清單
您的 Web 應用程式指令清單會定義應用程式的名稱、描述、圖示和功能。 這些功能是否正常運作,取決於是否已在指令清單 JSON 檔案中正確輸入這些功能。
若要檢查Microsoft Edge 是否偵測到您的指令清單檔案及其中的功能,請使用應用程式工具的 [指令清單] 窗格。 若要深入瞭解,請參閱偵錯漸進式 Web 應用程式中的 Web 應用程式指令清單 (PWA) 。
某些 PWA 指令清單功能具有專用工具。 例如,您可以 測試漸進式 Web 應用程式 (PWA) 通訊協定處理。
檢視和編輯本機數據
若要為您的使用者提供豐富且快速的體驗,您的 PWA 可以在本機儲存數據。 若要檢視、編輯和刪除儲存的數據,請參閱下列 DevTools 檔,視您選擇的記憶體選項而定:
若要檢視 PWA 所使用的預存資料總量、可用的配額,以及刪除資料,請使用應用程式工具的 [記憶體] 窗格。 若要深入瞭解,請參閱偵錯漸進式 Web 應用程式中的記憶體 (PWA) 。
模擬不同的螢幕大小
透過漸進式 Web Apps,您可以從一個程式代碼基底為所有裝置提供應用程式。 若要確定您的應用程式會適應所有裝置的螢幕大小,請使用 DevTools 中的 裝置模擬 工具。
若要深入瞭解,請 參閱模擬行動裝置 (裝置模擬) 。
請注意,裝置 模擬 工具只有在瀏覽器中使用 DevTools 時才可用,而在已安裝的 PWA 中使用 DevTools 時則無法使用。 已安裝的 PWA 有自己的獨立視窗,很容易重設大小,以在不同的螢幕大小下測試您的應用程式。