这是自动化比较好的助力,比如在某app中时进行操作时,要跳转到某个网页,这时用app查看元素是查看不了的,因为这是h5的页面,所以查看app的工具是查询不到的。
1.安装
终端输入:brew install ios-webkit-debug-proxy
出现问题1:
The following directories are not writable by your user:
/usr/local/share/man/man5
/usr/local/share/man/man7
解决方法:因为是该目录无权限无法写入的问题,所以直接sudo给上权限就可以了,然后再使用安装命令就可以了,示例如下图:
2.手机端开启safair web检查器
设置 --> safari --> 高级 --> web检查器
3.启动proxy
3.1 先usb连接iPhone
3.2 终端输入:ios_webkit_debug_proxy(启动方式一)
3.3可直接指定位置启动(启动方式二)
// -f 参数直接指定使用chrome的devtools作前端。
终端输入:ios_webkit_debug_proxy -f chrome-devtools://devtools/bundled/inspector.html
4.打开chrome,然后输入以下地址进行连接(在次之前记得打开手机safair)
4.1.先输入地址:http://127.0.0.1:9222 查看
4.2复制链接到新窗口地址栏粘贴就可以抓取手机页面元素,以下就是从手机端投射过来的(其实到这步就算是完结了,后面只是记录的一些实验记录,看看效果)
实验记录:
5.2.查看元素网址:
5.2.1官方地址:http://chrome-devtools-frontend.appspot.com/static/27.0.1453.93/devtools.html
5.2.2直接查看的地址:chrome-devtools://devtools/bundled/inspector.html?ws=localhost:9222/devtools/page/1
官方还没研究透,不知道为啥显示不出元素来,感觉是没实际性内容的原因,有可能;直接可看的地址,在safair上点击操作,网页会对应上所点元素位置
有问题的话可以查看此文:proxy详解
https://github.com/google/ios-webkit-debug-proxy/blob/master/README.md(直接给出来吧,插入的连接咋点不动)