教科书式的移动端真机调试方法总结

前言：无调试，不前端

业务简介：最近要分析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前端工程师）

• 如果想了解更多，可点击「阅读原文」