Android WebView 調試方法

調試Android WebView中的h5頁面，一般就是經過alert和抓包工具來定位問題，效率低且沒法直接調試樣式或打斷點，可謂是事倍功半。本文介紹一下我在項目中使用的新方法，可以經過chrome的開發工具在原生 Android 應用中調試 WebView。

前提條件：

Android4.4+

基本原理：

1.在APP中啓用 WebView 調試，開啓調試後，Chrome DevTools才能對WebView進行遠程調試；

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卡的根目錄下便可。