Android WebView 除錯方法

bzt820801發表於2017-08-20

除錯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開關開啟,這個工具就是XposedWebviewDebugHook

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

(1)獲取手機的root許可權,這個推薦使用KingRoot,可能一次獲取root許可權會失敗,建議失敗後多試幾次;

 

(2)下載適合版本的XposedWebviewDebugHook,並安裝。

目前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)啟用XposedWebViewDebugHook模組

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

   

 

 

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

另外還有兩個小Tips:

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

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

相關文章