移动端真机调试方法总结

最近要分析web页面，在安卓和ios上的性能差别，除了操做系统自己不一样以外，应该还多地方要探究的，第一步就是要在真机上分析。因此总结一下几个方法。

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。还能够代理不一样环境，具体教程见：avwo.github.io/whistle/rul…

缺点：能够说是极简主义了，步骤简单、调试简单、能调的也简单（就是查查元素，看看控制台，不能像chrome那些分析工具同样)

vConsole+whistle

步骤：

1. 安装 whistle 后打开面板，在 value 中新建 vConsole.js，而后到 github.com/Tencent/vCo… 拷贝代码到 vConsole.js 中
2. 写代理规则，如

https://baidu.com/ js://{vConsole.js}
复制代码

这样在手机看，就会有个控制台出现，能看到 console.log 出来的东西，如图：

缺点：功能有限，没法看到dom结构等，只能看一些输出

最后

• 这是一篇以前写的博客，这里是迁移了过来～～
• 了解更多内容，欢迎关注个人blog, 给我个star～
• 以为内容有帮助能够关注下个人公众号 「前端Q」，一块儿学习成长～～