混合 App 打開 H5 調試開關

背景

隨着如今移動端設備的硬件性能的提升，如今web頁面的體驗逐漸變得能夠接受，如今不少的應用都採用的Hybrid開發模式，一方面有利用了原生設備的API的優點（性能好、用戶體驗好），另外一方面利用了web開發的優點（跨平臺，開發成本低）。好比微信、QQ、58同城、美團、愛奇藝等等應用都是採用的Hybrid開發模式。

Hybrid應用如何去作自動化呢？

Hybrid是native嵌套了web，對於native頁面，咱們能夠採用原生的自動化框架UIAutomator/XCUITest，而對於web頁面，咱們能夠採用ChromeDriver，二者相結合完成自動化測試。如今流行的說法是移動端內嵌的web能夠稱爲H5，雖然嚴格意義上來講H5不等同web。爲了實現H5頁面的自動化，其中H5頁面的調試開關咱們是必需要打開，不然經過inspector元素探測工具是定位不到頁面的元素信息。

有源碼的應用

針對公司內部團隊開發的App，咱們能夠要開發直接在源代碼中加上以下的代碼，而後從新編譯打一個debug包

if (0 != (getApplicationInfo().flags & ApplicationInfo.FLAG_DEBUGGABLE)) {
    WebView.setWebContentsDebuggingEnabled(true);
}

無源碼的應用

對於無源碼的應用，如第三方線上App。這裏分紅兩種狀況，其一：App使用的是系統原生webview，如58同城、檸檬班App，其二：App使用的是通過定製過的webview，如微信、QQ騰訊系應用使用的是定製過的X5內核。

原生webview應用（root狀態）

準備工具

• Xposed APK包
• WebviewDebugHook APK包

此種方法須要提早對手機進行root，至於如何root能夠在對應的機型論壇搜索解決方案，每家手機的方案都不一樣。若是是模擬器，通常模擬器都是支持root的，如夜神：

安裝xposed框架到系統中，激活Xposed框架

安裝WebviewDebugHook到系統中，在Xposed中選擇模塊勾選

以58同城舉例，打開以後進行到H5頁面，便可點擊inspect探測到當前H5頁面信息

原生webview應用（非root狀態）

準備工具

• VirtualXposed APK包
• Xposed APK包
• WebviewDebugHook APK包

安裝VirtualXposed到系統中，此應用的工做原理相似於應用分身功能，會將應用安裝到一個獨立的環境當中。

將要調試的應用、WebviewDebugHook、Xposed 安裝到VirtualXposed中，勾選模塊管理->WebviewDebugHook

在VirtualXposed中打開58同城

X5內核應用（微信、QQ）

針對微信版本在7.0如下，能夠只須要在任意聊天窗口輸入debugx5.qq.com便可打開

針對微信版本在7.0+，微信有對H5開關作了調整，須要在聊天窗口輸入以下：

• http://debugmm.qq.com/?forcex5=true
• http://debugx5.qq.com

進入到搜一搜->搜索微信小程序->進入到小程序中，便可識別到到URL: