對 Service Worker 無法進行偵錯。您正在處理的生命週期、更新、快取,以及這些項目之間的互動。幸好,Workbox 讓 Service Worker 的開發作業變得更簡單,有了豐富的記錄功能,也能讓偵錯作業更輕鬆。本頁面將介紹一些可用的偵錯工具,並說明 Workbox 記錄的運作方式與設定方式。
可用的疑難排解工具
在開發 Service Worker 時,瀏覽器中有許多用於偵錯和疑難排解的工具。以下資源可協助您開始使用偏好的瀏覽器。
Chrome 和 Edge
Chrome (以及以 Blink 引擎為基礎的最新版 Edge) 擁有一組強大的開發人員工具。我們先前在這份說明文件中特別介紹過其中部分工具 (尤其是 Chrome 開發人員工具),但更多值得探索的是:
Firefox
Firefox 使用者可以參考下列資源:
Safari
Safari 目前僅提供一組較少的開發人員工具,可用於偵錯服務工作人員。建議您透過下列資源進一步瞭解這些內容:
Workbox 記錄
Workbox 提供豐富資訊的記錄,是開發人員的重要體驗。記錄功能啟用後,Workbox 會透過獨特且功能的方式記錄幾乎所有活動。
Workbox 的開發版本預設會開啟記錄功能,而實際工作環境版本則預設為關閉。在開發和正式版本之間切換,請依照建立,或透過 workbox-sw
使用預先組合的副本採取不同步驟。
不論有沒有搭售箱
Bundler 是一種工具,可從個別模組擷取程式碼,並建立可在瀏覽器中執行的 JavaScript 輸出內容。使用 bundler 時,您也可以利用 bundler 專用的 Workbox 外掛程式 (例如 workbox-webpack-plugin
) 進行預先快取,也可以單純組合 Workbox 執行階段快取邏輯。無論是哪一種方式,您都可以在 Bundler 的設定中設定實際工作環境模式,藉此影響 Workbox 的記錄:
- 在 webpack 中,
mode
設定選項可設為'production'
或'development'
。根據這個值,workbox-webpack-plugin
會在 Workbox 中使用實際工作環境或開發記錄。 - 針對 Rollup,
rollup-plugin-workbox
接受mode
設定選項,該選項也會影響 Workbox 是否要將任何內容記錄至控制台。如果您使用的 Rollup 沒有 Workbox 專屬外掛程式,就必須設定@rollup/plugin-replace
,以'development'
或'production'
替代process.env.NODE_ENV
。
假設在開發過程中必須覆寫預設的記錄行為。在這種情況下,適合您的 Bundler 專用 Workbox 外掛程式,應該可讓您在設定中對偵錯紀錄進行硬式編碼。舉例來說,您可以透過 GenerateSW
方法透過 workbox-webpack-plugin
的 mode
選項,在 Workbox 中停用記錄功能。
不搭售箱
雖然整合工具很方便,但並非每個專案都需要搭配運用。有時候,如果您想將 Workbox 新增至未使用 bundler 的專案,不妨參考 workbox-sw
。
workbox-sw
模組可簡化載入其他 Workbox 模組 (例如workbox-routing
、workbox-precaching
等) 從 CDN。是否載入開發版或正式版套件,取決於用於存取網頁應用程式的網址。根據預設,如果網頁應用程式是在 http://localhost
上執行,則 workbox-sw
會載入 Workbox 的開發版本,在其他時間則載入正式版套件。
如要覆寫預設行為,您可以呼叫 Workbox 的 setConfig
方法,將 debug
選項設為 true
:
// Load workbox-sw from a CDN
importScripts('https://storage.googleapis.com/workbox-cdn/releases/6.2.0/workbox-sw.js');
// This must come before any other workbox.* methods.
workbox.setConfig({
debug: true
});
// Now use workbox.routing.*, workbox.precaching.*, etc.
關閉任何工作流程中開發版本的記錄功能
無論您是否使用 bundler,都可以將 true
指派給特殊的 self.__WB_DISABLE_DEV_LOGS
變數至 Service Worker,藉此關閉開發版本中的所有記錄:
//
self.__WB_DISABLE_DEV_LOGS = true;
// The rest of your Workbox service worker code goes here
這種做法的好處,在於完全不必依賴整合器設定,而且無論您是直接使用 workbox-sw
,還是仰賴 bundler 來為您封裝 Workbox 技術的 Service Worker,皆可正常運作。
其他資訊
如果還是難以找出發生錯誤的服務工作處理程序,但記錄功能已無法滿足這個需求,請前往帶有 workbox
標記的 Stack Overflow 提問。如果在這裡找不到答案,請回報 GitHub 問題 (請先詳閱提供指南)。這麼做不僅能讓大量開發人員閱讀及回答問題,還能在日後遇到相同情況時,參考您的回答內容。