移动端调试解决方案转载

移动端的方案

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

iOS 平台

Safari Mobile

safari 支持远程调试&＃xff0c;需要做如下的几步&＃xff1a;

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

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

iOS webview

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

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

Android 平台

Chrome Mobile

Chrome for android 32 以及之后的版本具有远程调试的功能&＃xff0c;你需要做的是&＃xff1a;

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

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

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

Android Webview

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

if(Build.VERSION.SDK_INT >&＃61; Build.VERSION_CODES.KITKAT) { WebView.setWebContentsDebuggingEnabled(true); }

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

使用 Android 模拟器

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

其他方式

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

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

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

总结

综上所述&＃xff0c;可以根据下图来选择最优的调试方案&＃xff1a;