chrome 获取移动端页面元素信息

一：背景
在使用appium进行app端自动化测试的时候，一般使用的是uiautomatorviewer来给页面元素做定位。但如果遇到页面元素类型是webview的时候，则只能定位整个页面，而不能更进一步定位页面内容，这通常是不方便的。经过一番搜索，发现可以使用谷歌浏览器的inspect功能来实现类似功能，该功能一般用于调试前端代码。

二.功能

我们先看下最终想要达到的效果

上图的左边是手机上的chrome 截图，可以看到，当鼠标移动到某个span上时，手机上的这个区域高亮显示，右边则实时显示的是对应的html源码。这跟pc上调试某段代码效果一样，你可以修改代码，并直接在手机上反馈修改结果。

三，准备

为了完成这一亮骚的移动调试功能我们需要以下准备工作

1.pc端安装最新的chrome
2.手机端安装最新的chrome (Android机)
3.USB连接线

（感觉是不是too simple）

Tip:之前的的chrome如果要实现这种调试需要安装一个ADB插件（需要FQ）但是最新的chrome已经直接支持对Android的识别所以也不用再在chrome上安装ADB插件了但需要下载最新的chrome

四：步骤
下来我们逐步完成
1.假设你已经在电脑上下载了最新的chrome 也在手机上下载了最新的chrome

2.USB设置在你的手机里打开"设置"->"开发人员工具"->"USB调试" 打开USB调试。因为Android手机型号众多很多人找不到"USB调试这个选项在哪" 而且大多数手机"开发者选项"默认是影藏的，你需要看下自己的手机说明然后将手机调到"开发者模式" 就可以找到 "USB调试了"

3.假设你已经将手机设置为"USB调试"打开的状态将手机连接到电脑手机会弹出是否链接点击确定

4.打开电脑的chrome 在地址栏输入 chrome://inspect 选中 Discover USB devices 可以检测到你的设备可以看到监测到我的设备是SM-N9009。接着用chrome打开需要调试的页面

6.点击inspect 如下图就看到了文章开始一样的效果此时就是可以审查手机页面上的元素了

7.可以点击弹出的审查元素框右上角的方形小图标切换到视图模式这时会把你手机打开的页面拉到pc上显示

五：总结

基本上已经愉快的完成了总结下整个流程：pc端和Android手机端都下载最新的chrome ，在手机设置里将"USB调试"打开链接到电脑打开电脑chrome 输入chrome://inspect 打开手机chrome输入你想调试的页面点击inspect 开始调试。

备注：在首次点击inspect的过程中，可能会遇到页面空白，内容不能加载的情况，这个是因为chrome被墙了，需要合理使用工具翻过去，推荐使用***+ss。

巴特西

chrome 获取移动端页面元素信息

最新文章

热门文章