移动端调试解决方案-转载

移动端的方案

手机端的浏览器或者 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 时，常常会遇到这个状况。

总结

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