App Inspector 功能详解
前言:
App Inspector:浏览器端的移动设备 UI 查看器,使用树状态结构查看 UI 布局,自动生成 XPaths
官网:https://macacajs.github.io/app-inspector/cn/
本次教程仅支持Android,windows
环境安装:
1、安装Node.js
注意:(version >= v7.x)
2、安装macaca
执行cmd命令:npm i -g macaca-cli
如果看到如下可爱的图案,那恭喜你安装成功啦!重新安装则会覆盖更新。
![](http://upload-images.jianshu.io/upload_images/7116457-8e341dc7d4ed08ee.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
3、安装 JDK,要求 1.8 或更高版本
4、安装 Android SDK
Build-tools 25.0.2、Android Support Repository(此处注意Build-tools应和API相互对应)
5、安装app-inspector
执行cmd命令:npm install app-inspector -g
6、macaca环境检查
执行cmd命令:macaca doctor,可以检查环境是否配置成功。
如下图所示则表示环境均配置正常,如果有标红提示,则点击环境部署详情,进行部署。
![](http://upload-images.jianshu.io/upload_images/7116457-3ce44e1d9e83dad3.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
使用教程:
1、获取设备ID
>>adb devices -l
![](http://upload-images.jianshu.io/upload_images/7116457-53950eedd1738c8d.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
2、从命令行启动
>> app-inspector -u DEVICE-ID (上一步获取的设备ID号)
![](http://upload-images.jianshu.io/upload_images/7116457-51e6d53ebd079cf8.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
3、chrome浏览器自动打开地址:http://192.168.21.101:5678/ (推荐用 Chrome 浏览器)
![](http://upload-images.jianshu.io/upload_images/7116457-ed01b5c2e36b0b0c.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
4、点击页面元素,即可获取resource-id和xpath
![](http://upload-images.jianshu.io/upload_images/7116457-c432863f8b124404.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
5、若切换页面,需现在手机上切换,然后刷新浏览器,则获取手机的最新页面。
![](http://upload-images.jianshu.io/upload_images/7116457-4ce073d44b39c394.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
我遇到的坑:
Android SDK无法更新:
解决办法:请设置tools-option,网址:mirrors.neusoft.edu.cn,端口:80
以上
作者:小喜
出处: http://www.cnblogs.com/xiaoxi-3-/
如果对您有帮助,请关注我的同名简书:https://www.jianshu.com/u/da1677475c27
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。