Android 中 WebView 的除錯方法

除錯Android WebView中的h5頁面，通常就是通過alert和抓包工具來定位問題，效率低且無法直接除錯樣式或打斷點，可謂是事倍功半。本文介紹一下我在專案中使用的新方法，能夠通過chrome的開發工具在原生 Android 應用中除錯 WebView。

前提條件：

Android4.4+

基本原理：

1.在APP中啟用 WebView 除錯，開啟除錯後，Chrome DevTools才能對WebView進行遠端除錯；

1	WebView.setWebContentsDebuggingEnabled(true);

2.通過訪問chrome://inspect/#devices訪問已啟用除錯的 WebView 列表；

 

3.除錯Webview與遠端除錯普通頁面相同，遠端除錯普通頁面也就是在安卓手機中安裝Chrome瀏覽器，使用USB 連線 PC，然後在 PC 的 Chrome 瀏覽器中開啟 chrome://inspect/#devices 即可。

使用場景

1.測試包

如果團隊中有Android開發人員能夠提供測試包，只要在測試包中開啟Webview的debug模式就可以了。

2.線上包

對於線上的APP，一般debug開關都是關閉的，這就需要藉助第三方工具，才能將debug開關開啟，這個工具就是Xposed和WebviewDebugHook。

Xposed是一個框架，能夠整合很多功能模組，這些模組能夠在不修改APK的情況下，修改APP的執行方式。這裡我們就需要WebviewDebugHook模組來開啟APP的WebView debug模式。下面主要介紹一下安裝的步驟：

（1）獲取手機的root許可權，這個推薦使用KingRoot，可能一次獲取root許可權會失敗，建議失敗後多試幾次；

 

（2）下載適合版本的Xposed和WebviewDebugHook，並安裝。

目前Xposed的官網上給出的連結是這樣的：

Android5.0+：https://forum.xda-developers.com/attachment.php

Android4.0.4-4.4.4：de.robv.android.xposed.installer_v33_36570c.apk

而WebviewDebugHook的安裝檔案是git專案https://github.com/feix760/WebViewDebugHook原始碼中的WebViewDebugHook.apk。

（3）啟用Xposed和WebViewDebugHook模組

下圖是Android5.0+下的截圖，通過點選【安裝/更新】啟用Xposed，並切換選單到模組功能，然後勾選上WebViewDebugHook。

   

 

 

安裝完畢後，接下來就可以開開心心的除錯Webview了。

另外還有兩個小Tips：

（1）訪問chrome://inspect/#devices如果chrome沒有檢測到Remote Target中的頁面，可能需要安裝一下chrome的ADB外掛；

（2）對於騰訊系的APP，預設採用X5核心，需要將WebViewDebugHook的git目錄下的debug.conf檔案拷貝到SD卡的根目錄下即可。