移动端真机调试实战经验

前言

在开发中前端免不了要进行移动端的开发，然而在电脑上看的样式和手机上还是有一定的差距的，因为手机上有顶部的状态栏和底部的菜单栏，特别是在qq内置浏览器中打开，差距还是蛮大的，所以在chrom中模拟手机显示的情况虽然有一定的效果，但是还是不能完全模拟，我们还需要在真机环境下测试。
本文介绍的调试方法有一下几种：

• iphone+safari
• android手机+pc
• 微信开发者工具
• weinre
• 使用webstorm
• 使用Fiddle抓包

这几种方法基本说涵盖了我们平时开发中所遇到的各种情况，各种主流设备都可以覆盖。其中最方便快捷的是使用webstorm自带的服务器，只需要一键就可以~，但是这样只能预览，不能调试。
我个人比较推荐的方法是iphone+safari或者安卓手机+pc的这种方式，比较简单方便快捷，然后根据具体的环境再选择更为合适的调试方法。
目前我认为使用weinre+fiddle是万能的，没有什么调试不了了~但是需要学习的成本也是最高的~
希望大家都能够写出漂亮的页面，不需要为调试发愁哈~

iphone+safari

之前使用的是mac，所以一直都是用的iphone+safari模拟真机环境，这种方法简单明了，只需要简单的设置一下以后都不要设置，插上数据线，打开mac上的safari就可以了，(๑•̀ㅂ•́)و，✧，但是对设备有要求，必须是iphone+mac的组合

* iphone上设置 *

设置 → Safari → 高级 → Web 检查器 → 开。

pc端safari设置

Safari → 偏好设置 → 高级 → 在菜单栏中显示“开发”菜单

设置完之后用数据线连接电脑，然后在iphone上用打开safari需要调试的网址，然后在pc端打开safari，最上面的菜单栏中的“开发”然后就可以看到有iphone设备的名称显示然后就可以看见你在iphone中的safari中打开了哪些网址，之后就和调试网页版的一样了.

* android手机+pc *

安卓手机只需要下载chrom浏览器，就可以再电脑上用chrom调试了，是不是很赞(づ￣3￣)づ╭

1. 首先需要装chrom浏览器
2. 打开手机的开发者模式，一般是：设置->关于手机->版本号连按5次，之后设置菜单中会多出一个开发人员选项，进入将其中的“usb调试”打开

1. 将手机与电脑通过usb连接，弹出对话框“是否允许usb调试”，选择确定
   

2. 在手机chrom上打开要调试的页面

3. 在电脑上打开chrom，新开一地址栏为chrome://inspect/的页面,然后就可以调试
   

4. 点击inspect弹出chrom调试工具

文章转载自：http://www.jianshu.com/p/b0234b7da021