移动端前端开发真机调试攻略
一、IOS 移动端 （Safari开发者工具）
手机端：设置 → Safari → 高级 → Web 检查器 → 开。
mac端：Safari → 偏好设置 → 高级 → 在菜单栏中显示“开发”菜单。
在 OS X 中启动 Safari 之后，以 USB 电缆正常接入 iOS 设备，并在此移动设备上启动 Safari。此时点击计算机上的 Safari 菜单中的“开发”，可以看到有 iOS 设备的名称显示，其子菜单项即为移动设备上 Safari 的所有标签页，点击任意一个开始调试。
便捷，简单，还可以调试外壳包裹的浏览器如微信。
备注：顺便提一下，要调试不同版本的ios，可以进xcode 进行下载不同的系统包（当然是在没有设备的情况下，土豪略过）
二、安卓移动端
1、chrome 调试方法
首先确保手机上和PC机上装有最新版本的chrome浏览器，其次是将手机的开发者选项打开并允许调试，然后将数据线将两台设备连接起来。在PC机上打开chorme，输入chrome://inspect ，然后在手机上打开chrome，然后手机会弹框询问是否允许调试，当然确定啦。有时候手机锁屏会断开，请拔掉usb重来。
点击inspect打开DevTools后，你可以选中页面中的DOM元素，同时设备中对应元素也高亮显示，也可使用DevTools中的Inspect Element 选中目标元素，可以实时与移动设备页面交互，方便的定位问题所在，进行代码调试，就能像pc端一样愉快的玩耍了。如果有问题，请检查chrome版本。
chrome的调试一般只可以调试chrome页面，但是其官方文档说还可以调试WebViews：
“On your computer, the chrome://inspect page displays every connected device, along with its open tabs and debug-enabled WebViews.”
需要说明调试WebView需要满足安卓系统版本为Android 4.4+，并且需要再你的APP内配置相应的代码，在WebView类中调用静态方法setWebContentsDebuggingEnabled，如下：
if (Build.VERSION.SDK_INT >=Build.VERSION_CODES.KITKAT) {
WebView.setWebContentsDebuggingEnabled(true);
}
以上配置方法适用于安卓应用内所有的WebView情形。
安卓WebView是否可调试并不取决于应用中manifest的标志变量debuggable，如果你想只在debuggable为true时候允许WebView远程调试，请使用以下代码段：
if (Build.VERSION.SDK_INT>= Build.VERSION_CODES.KITKAT) {
if (0 != (getApplicationInfo().flags &=ApplicationInfo.FLAG_DEBUGGABLE{
WebView.setWebContentsDebuggingEnabled(true);
}
}
我这里只写了个大概，如果有其他问题或者欲查看详细文档，看下面链接（自备梯子）：
https://developer.chrome.com/devtools/docs/remote-debugging
注意：同样的你也可以在电脑上装安卓的虚拟机，推荐Genymotion ，一样的，想测什么版本，就自己下rom ，当然土豪当我没说。
2、UC开发者浏览器
由于不推荐移动端使用UC（大家应该自觉抵制移动端毒瘤），所以我只简单说一下，如果是在有兴趣，请自行查看： http://www.uc.cn/business/developer/
它的调试方法与chrome差异不大。
3、使用 Weinre 调试
该方法是比较老的一种方法，对于其他的调试方法来说属于刀耕火种型的。weinre是一个调试包，本身提供一个JavaScript，需要你在项目文件中加入该js。首先安装Weinre，我们用nodejs安装之，使用-g全局命令，以便可以在各个目录下访问：
npm install -g weinre
安装weinre之后再设置监听本机的ip:
然后打开返回的地址的说明文档，然后把返回的js写入到调试的文档中，注意我箭头所指向的地方。
这样访问页面的时候，加载这个 JS，就会被 Weinre 监听到进行控制。
小提示：这个 JS 后面的 #anonymous 起到一个标识作用，为了区别，我们可以将其修改成 #test 放到页面中。这时候，我们的 Inspect 面板的地址就不是 http://172.16.0.2:8080/client/#anonymous 了，而是 http://172.16.0.2:8080/client/#test 。
当我们访问页面的时候，就会出现在监听列表中，如果有多个网页，你可以从列表中选择一个。然后就可以使用后面的 Elements、Console 等面板来进行调试操作了：
Weinre 非常灵活，只需要在页面中加载这个 JS，然后访问即可，因此 WebView 可以用这种方法调试，一些低版本的 Android、iOS 也可以支持，Window Phone 也是可以用的。在调试移动设备时你可能需要在本地搭建一个局域网 IP 的服务器，将设备与本机网络连接成一个局域网，用移动设备访问这个网页即可。
当然 Weinre 也不是万能的，相比 Chrome 的调试工具，它缺少 JavaScript debug 以及 Profiles 等常用功能，但是它兼容性强，可以实现基础调试功能。
4、mihtool 测试
MIHTool 是国人开发的，基于 Weinre，用于 iOS 设备的前端开发测试。
与Weinre 的调试方式大体一样，即开启一个服务器，然后将 JS 插入到页面中，访问进行调试。
MIHTool 将这个过程简化了，它是一个 APP，可以直接安装到你的 iOS 设备里面，然后内置一个简单的浏览器可以打开你的测试页面，当它开启时，会自动向页面中插入 Weinre 的 JS，并告知 Weinre 控制台 URL 等信息，让你可以访问进行调试。
它还提供了一个公共的 Weinre 调试服务，生成类似 http://i.mihtool.com/dev/client/#AwAj 这样的链接，打开即可调试，非常方便，就是有些卡。
5、移动设备在线测试
移动端设备如此之多，小公司或者团队，没有这么多资金和精力购买如此多的测试设备进行测试。于是就有人买了这些设备，连接起来，提供在线调试服务。
一般就是他的真实手机设备打开，然后截屏出来供预览。
比如： https://www.browserstack.com 等，当然一般比较卡。
（话说这种貌似可以刷一点pv和uv出来。。。）
三、总结
调试方法很多，层出不穷，关键是要看自己是否顺手和熟练，关键在于按时按量的完成开发任务。
关键在于平时多积累跨坑姿势，少写一点不兼容的代码，调试就舒心一点。
如果这还不满足的话，可以查看更多资料：
移动端前端开发调试： http://www.cocoachina.com/webapp/20141231/10815.html
移动开发真机调试： http://www.cnblogs.com/constantince/p/4711098.html
remote_inspect_web_on_real_device： https://github.com/jieyou/remote_inspect_web_on_real_device
remote-debugging： https://developer.chrome.com/devtools/docs/remote-debugging
移动端Web开发调试之Chrome远程调试(Remote Debugging)： http://blog.csdn.net/freshlover/article/details/42528643
安成健
2015/11/3 于百词斩
正文到此结束
热门推荐
相关文章
近期评论
-
文章和留言都翻到11页了 没有OOM
-
-
朋友，翻页到11页，及以后，会出现OOM，无法访问
-
-
搞个gitee的项目
-
-
版本号是多少，你可以下载哪个代码仓库，jdk选1.8 直接跑就行
-
-
-
Loading...
![[HBLOG]公众号](https://www.liuhaihua.cn/img/qrcode_gzh.jpg)
