Missed the action at the 2018 Chrome Dev Summit? Catch up with our playlist on the Google Chrome Developers channel on YouTube. Watch now.

遠程調試 WebView

使用 Chrome 開發者工具在您的原生 Android 應用中調試 WebView。

在 Android 4.4 (KitKat) 或更高版本中,使用 DevTools 可以在原生 Android 應用中調試 WebView 內容。

TL;DR

  • 在您的原生 Android 應用中啓用 WebView 調試;在 Chrome DevTools 中調試 WebView。
  • 通過 chrome://inspect 訪問已啓用調試的 WebView 列表。
  • 調試 WebView 與通過遠程調試調試網頁相同。

配置 WebViews 進行調試

必須從您的應用中啓用 WebView 調試。要啓用 WebView 調試,請在 WebView 類上調用靜態方法 setWebContentsDebuggingEnabled

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
    WebView.setWebContentsDebuggingEnabled(true);
}

此設置適用於應用的所有 WebView。

提示:WebView 調試不會受應用清單中 debuggable 標誌的狀態的影響。如果您希望僅在 debuggabletrue 時啓用 WebView 調試,請在運行時測試標誌。

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
    if (0 != (getApplicationInfo().flags & ApplicationInfo.FLAG_DEBUGGABLE))
    { WebView.setWebContentsDebuggingEnabled(true); }
}

在 DevTools 中打開 WebView

chrome://inspect 頁面將顯示您的設備上已啓用調試的 WebView 列表。

要開始調試,請點擊您想要調試的 WebView 下方的 inspect。像使用遠程瀏覽器標籤一樣使用 DevTools。

在 WebView 中檢查元素

與 WebView 一起列示的灰色圖形表示 WebView 的大小和相對於設備屏幕的位置。如果您的 WebView 已設置標題,標題也會一起顯示。

故障排除

chrome://inspect page 上無法看到您的 WebView?

  • 驗證已爲您的應用啓用 WebView 調試。
  • 在設備上,打開應用以及您想要調試的 WebView。然後,刷新 chrome://inspect 頁面。