Mobile Web 调试指南（2）：远程调试

原文：http://blog.jobbole.com/68606/

第一篇中讲解了如何让手机来请求我们开发电脑上的源码，做到了这步后，我们可以改完代码立即看到效果，但是对于调试还是远远不够的。这篇文章我们继续讲目前常用的几种 Developer tools。

PC 端的经验

在使用桌面浏览器开发时，几乎每种浏览器都有自己的开发者工具，比如大家常用的 firebug , chrome develper tools , safari developer tools . 哪怕是 IE 甚至 IE6，也有自己的开发者工具。我们利用这些工具来检查调试样式、javascript，查看修改 cookie , 查看网络请求等等。这些大家都非常熟悉了。

移动端的方案

手机端的浏览器或者 webview 不可能在手机上集成一个 developer tools ，因为屏幕太小。好在各大厂商还是很关注开发者的便利性的，现在有多种远程调试的方案。也就是在手机上加载页面，在电脑上来展示调试工具。下面我们看看目前主流的一些工具。

iOS 平台

Safari Mobile

safari 支持远程调试，需要做如下的几步：

在手机里找到设置 -> safari -> 高级 -> Web 检查器，打开此功能。
用数据线连接到你的 Mac（没有 Mac ? 找老板要去！）。
打开 Mac 下的 safari , 到偏好设置里，高级一栏最下部，勾选在菜单栏中显示“开发”菜单
用手机 safari 访问一个网页，在Mac上的 safari 开发菜单里找到你的手机，二级菜单里找到这个网页

做完这些，我们就进入了熟悉的 safari developer tools ，调试 css , js 网络请求等。

iOS webview

iOS APP 里的 webview 同样支持远程调试，不过限制更多一点。这个 APP 必须是自己编译安装进手机的，也就是你必须要有 iOS 开发者账号。对于做 Hybrid APP 开发的来说，这不是什么难事，团队肯定有开发者账号。你需要做的是了解一点 iOS 开发基础，起码能自助把代码编译安装到你的手机。

对于自己编译进去的 APP ，只需要在 APP 里载入你要调试的页面，其他步骤和 safari 的远程调试一样。

Android 平台

Chrome Mobile

Chrome for android 32 以及之后的版本具有远程调试的功能，你需要做的是：

开启 Android 的 USB 调试功能。
用 USB 先连接到你的电脑（windows 用户需要安装 Android 驱动）。
在 Chrome for android 上打开你要调试的网页。
在电脑上打开 chrome （同样最低需要 32 版本），进入菜单 -> 工具 -> 检查设备页面，确保 Discover USB devices 被勾选

如果设置正确的话，现在就可以看到你手机上打开的页面了，点击 inspect 进入我们熟悉的 Chrome develper tools 。

由于 Android 手机各种各样，如果遇到麻烦，请仔细阅读官方文档

Android Webview

Android 4.4 开始，默认的浏览器已经是 chrome 了，所以 webview 也是 chrome 了，这就给了 webview 远程调试的能力。我们需要在 Android 里针对 Webview 做以下设置：

if(Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {

WebView.setWebContentsDebuggingEnabled(true);

}

然后在你的 App 里打开要调试的页面，其余步骤和使用 Chrome for Android 一样，进行远程调试。

使用 Android 模拟器

鉴于目前 Android 4.4 的手机还比较少，你可以选择使用模拟器来进行调试。官方的模拟器太慢，推荐大家使用 genymotion , X86 架构的模拟器，速度和真机没什么两样了。对于只做 webview 调试的前端来说，只需要使用个人免费版就可以了。

其他方式

如果你的调试条件不能满足上面讲的任何一种，还可以使用 weinre 。只需要在页面里插入一段脚本，就可以进行远程调试，基本没其他限制。但是使用这个也是有明显的缺点的：

不能给 javascript 打断点，基本只能用 console 来调试
不支持查看元素的样式是写在 css 第几行，也不支持显示在哪个文件
由于是通过网络来连接的，所以在调试移动网络的情况时，不好操作（需要服务端运行在一个移动网络可以访问到的机器上）

总之，weinre 仅仅适用于你没办法使用 Safari 或者 Chrome 进行远程调试的情况下，聊胜于无，调试 Android hybrid APP 时，经常会遇到这个情况。

总结

综上所述，可以根据下图来选择最优的调试方案：

由于我目前只接触了 iOS 和 Android 平台的开发调试，其他的移动平台不了解，所以本文没涉及到 windows phone 等平台。欢迎大家留言或者 email 交流各种远程调试方案。