混合 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 状态)

准备工具

此种方法需要提前对手机进行 root,至于如何 root 可以在对应的机型论坛搜索解决方案,每家手机的方案都不同。如果是模拟器,一般模拟器都是支持 root 的,如夜神:

image.png

安装 xposed 框架到系统中,激活 Xposed 框架

image.png

安装 WebviewDebugHook 到系统中,在 Xposed 中选择模块勾选

image.png

以 58 同城举例,打开之后进行到 H5 页面,即可点击 inspect 探测到当前 H5 页面信息

image.png

原生 webview 应用(非 root 状态)

准备工具

安装 VirtualXposed 到系统中,此应用的工作原理类似于应用分身功能,会将应用安装到一个独立的环境当中。

image.png

将要调试的应用、WebviewDebugHook、Xposed 安装到 VirtualXposed 中,勾选模块管理->WebviewDebugHook

image.png

在 VirtualXposed 中打开 58 同城

image.png

X5 内核应用(微信、QQ)

针对微信版本在 7.0 以下,可以只需要在任意聊天窗口输入 debugx5.qq.com 即可打开

image.png

针对微信版本在 7.0+,微信有对 H5 开关做了调整,需要在聊天窗口输入如下:

进入到搜一搜-> 搜索微信小程序-> 进入到小程序中,即可识别到到 URL:

image.png

1 操作
shakebabe 在 2020-08-06 17:39:40 更新了该帖
1 回帖
请输入回帖内容 ...