使用 WebView 開發人員工具應用程式偵錯

WebView 開發人員工具應用程式是裝置上的公用程式,可管理及偵錯系統 WebView 元件本身。這與 Chrome 開發人員工具有所不同,後者會在開發電腦上執行,可讓您遠端偵錯 WebView 執行個體中執行的即時網頁內容 (HTML、CSS 和 JavaScript)。

WebView 開發人員工具是隨附應用程式,會與 WebView 系統元件一起自動安裝到裝置上。應用程式分為四個區域:

  • 首頁:查看版本資訊,並將預設 WebView 切換為搶先版管道版本。
  • 當機:列出及上傳 WebView 當機報告。
  • 旗標:設定開發人員旗標,變更 WebView 的行為。
  • 網路記錄:列出並分享 WebView 低階網路記錄。

執行 WebView 開發人員工具

在啟用開發人員模式的 Android 16 以上版本裝置上,依序前往「設定」 >「系統」 >「開發人員選項」 >「WebView 開發人員工具」,即可啟動 WebView 開發人員工具。

在所有近期的 Android 版本中,您都可以使用 adb 指令啟動 WebView 開發人員工具:

adb shell am start -a "com.android.webview.SHOW_DEV_UI"

或者,如果您安裝 WebView 的預先發布版 (例如 Beta 版開發人員版Canary 版),可以使用 WebView 開發人員工具啟動器圖示。

WebView 開發人員工具啟動器圖示。
圖 1:裝置上安裝的應用程式的 WebView 開發人員工具圖示。

首次執行 WebView 開發人員工具時,系統會要求通知權限,以便顯示持續性通知,列出您啟用的開發人員標記。

切換至預先發布版

最新 WebView 功能和錯誤修正項目會先在預先發布管道中提供。您可以透過 WebView 開發人員工具切換裝置的 WebView 提供者,測試應用程式是否能因應這些變更。測試預先發布管道,有助於確保應用程式與即將向使用者發布的 WebView 版本相容。

  1. 視您偏好的穩定程度和最新變更的存取權而定,安裝 Beta 版開發人員版Canary 版的 WebView。
  2. 開啟 WebView 開發人員工具應用程式,然後輕觸「變更供應商」
  3. 如果沒有看到這個選項,請輕觸右上角的三點圖示,然後選取「變更 WebView 提供者」

詳情請參閱「試用 WebView Beta 版、開發人員版或 Canary 版」。

WebView 版本

WebView 版本是以 Chrome 發布版本為基礎。每個管道代表不同程度的程式碼穩定性和新穎度。以下簡要說明各 WebView 管道的適用時機:

  • Canary:每天更新。這個管道會提供最新變更,包括併入 Chromium 程式碼庫的新功能和錯誤修正。如果您想測試網頁應用程式在 WebView 中執行時,最近合併的變更會造成什麼影響,請使用這個管道。不過請注意,這個管道可能不穩定或含有錯誤。

  • 開發版:每週更新一到兩次。這個版本比 Canary 更穩定,但仍包含尖端變更。適合想測試新功能,但希望降低不相關錯誤風險的開發人員。

  • Beta 版:大約每週更新一次,每 4 週進行一次重大更新。 這個管道可讓您提前 4 到 6 週試用 WebView 下一個穩定版的功能。使用這項功能,針對即將發布的 WebView 版本測試網路應用程式,確認相容性。

  • 穩定版:每 4 週更新一次主要版本,每 2 到 3 週更新一次次要版本,以修正緊急錯誤。這是 WebView 的正式版管道,已向所有使用者推出。這是最穩定的管道,因為已在其他管道經過測試。如果您想在 WebView 中體驗網頁應用程式,就像大多數使用者目前的情況一樣,或許是為了重現他們回報的錯誤,請使用這個選項。

當機 UI

如果您在開發應用程式時遇到 WebView 異常終止的問題,可以使用 WebView 開發人員工具列出、上傳及提交相關錯誤報告。

  1. 應用程式異常終止後,請重新啟動應用程式,確保系統產生異常終止報告。
  2. 開啟 WebView 開發人員工具應用程式,然後輕觸「當機」

詳情請參閱 Crash UI 說明文件

旗標 UI

您可以使用 WebView 開發人員工具應用程式設定多個實用標記,變更裝置上所有 WebView 的行為。大多數標記僅用於開發 WebView 本身,但有少數標記對 Android 應用程式開發人員很有用。

  • highlight-all-webviews:在 WebView 上方新增黃色色調,以識別 WebView。
  • net-log:啟用 WebView 網路活動的低層級記錄。
  • webview-log-js-console-messages:在 Logcat 中顯示 JavaScript 控制台記錄。
WebView 開發人員工具應用程式,顯示「Flags」UI。
圖 2. WebView 開發人員工具應用程式中的「Flags」使用者介面。

詳情請參閱「Flag UI 說明文件」。

網路記錄

如果無法使用 Chrome 開發人員工具解決 WebView 中的伺服器連線問題,請使用 WebView 開發人員工具擷取低階網路記錄。

  1. 在應用程式程式碼中啟用 WebView 偵錯功能
  2. 在 WebView 開發人員工具中開啟「Flags」,找到 net-log 並開啟。 重新啟動應用程式,標記就會生效。
  3. 執行會觸發要偵錯網路行為的動作。重現問題後,請關閉應用程式。
  4. 開啟 WebView 開發人員工具的「網路記錄」部分,找出並分享網路記錄檔案。
  5. 您可以將 JSON 記錄檔載入 Netlog Viewer (網路記錄檢視器),這項線上工具可將網路記錄視覺化,方便您檢查低階網路事件、通訊端資訊和時間詳細資料。

詳情請參閱「在 WebView 中進行網路偵錯」。