快速查看Android原生应用中的H5页面

621 阅读2分钟

“这是我参与8月更文挑战的第3天,活动详情查看: 8月更文挑战

背景

现在各种移动应用中内嵌webview的场景越来越多了,我们经常会遇到这样的需求:当我们想要调试某个H5页面或者测试某个H5页面的性能的时候,我们需要得到该H5页面的地址,但是又一时找不到负责这个页面的开发同学,怎么办呢?今天就跟大家分享一下如何快速查看native应用中的H5页面地址。

方案

在正式开始之前,我们需要在电脑上安装好最新版本的Chrome浏览器,另外还需要一个自己应用的debug包(开发包),安装到测试手机上。

将装有debug包的手机连接好电脑,然后打开Chrome浏览器,在地址栏输入:

chrome://inspect 就可以看到当前H5页面的地址信息了。

image.png

使用上面的 DevTools 可以在原生 Android 应用中查看调试 WebView 内容,这是因为我们在debug包中开启了WebContentsDebuggingEnabled的开关,但是有时候我们可能还会有这样的需求:想要做竞品分析,或者一时拿不到被测包的debug版本,这时候就需要Xposed出场了。

首先我们要先准备一台root过的手机,然后下载好最新版的Xposed,如下图:

image.png

这里如果没有安装过的话就选择“安装/更新”,然后点“安装”会自动下载刷入,建议大家用小米或者华为荣耀低版本的机型,最好不要超过Android9.0。

接着安装WebViewDebugHook.apk,GitHub地址是:github.com/feix760/Web…

打开 Xposed 进入左侧的模块,然后启用需激活的模块,之后重启手机即可使用:

image.png

这时候再打开chrome://inspect 就可以看到H5链接地址信息了!