前言:无调试,不前端
业务简介:最近要分析web页面,在安卓和ios上的性能差异,除了操作系统本身不同之外,应该还多地方要探究的,第一步就是要在真机上分析,所以总结一下几个方法。
一、iPhone版
设备
Mac+iPhone+Lightning+Safari浏览器
步骤
1.使用Lighting线将Mac与iPhone相连
2.iPhone打开Web检查器(设置->Safari->高级->Web检查器)
3.iPhone用Safari打开要进行分析的页面
4.Mac打开Safari浏览器(菜单->开发->对应的手机名称->要调试的页面),点击即进入Safari Developer Tools,如图:
5.可以见到的调试界面是这样的:
缺点:不能调试webView里的页面
二、安卓版
设备
安卓手机+安卓数据线+电脑
步骤
1.使用数据线将手机与电脑相连
2.手机开启use调试(安卓不同机型开启的步骤不尽相同,不知道的百度一下)
3.打开chrome,输入chrome://inspect/#devices,勾选Discover USB devices
4.用手机chrome打开要调试的网页(如果是其他webView页面,需要在app配置启动代码,详见官方教程)
5.选择你要调试的页面进入
6.可以见到是这样的调试界面
缺点:亲测,mac中调试界面与小米6手机的界面经常不同步,操作非常不方便,还好控制台还是能正常看东西
三、WEINRE
步骤
1.可以直接npm install weinre,然后启动,打开管理界面即可
2.直接安装whistle,自带了weinre。还可以代理不同环境,具体教程见:https://avwo.github.io/whistle/rules/weinre.html
缺点:可以说是极简主义了,步骤简单、调试简单、能调的也简单(就是查查元素,看看控制台,不能像chrome那些分析工具一样)
四、vConsole+WHISTLE
步骤
1.安装 whistle 后打开面板,在 value 中新建 vConsole.js,然后到 https://github.com/Tencent/vConsole/blob/dev/dist/vconsole.min.js 拷贝代码到 vConsole.js 中
2.写代理规则,如:
3.这样在手机看,就会有个控制台出现,能看到 console.log 出来的东西,如图:
缺点:功能有限,无法看到dom结构等,只能看一些输出
五、幸福时刻
六、一带一路
本文来自公众号「前端q」投稿
原创作者winty(shopee前端工程师)
如果想了解更多,可点击「阅读原文」