移动端开发调试总结

一、Android 虚拟机测试

1、Genymotion是一个很棒的 Android 虚拟机。但是首次安装配置需要麻烦一些。由于基于 VirtualBox 内核，所以要先安装 VirtualBox，然后需要注册账号 Genymotion，可以免费使用，但是有功能限制。如果遇到重要的项目，临时买一两个月高端账号也是 OK 的。安装好的虚拟机与你 Host 本机处于一个局域网，这样你就可以用 BrowserSync 之类的，开启一个局域网 IP 本地服务器，在移动设备上同步测试了。Genymotion 虚拟机里面安装 APP 好像比较麻烦，安装 Chrome 不太方便，这样不方便连接桌面版 Chrome 进行调试，只能使用 Weinre 调试。

2、Parallels是基于 Mac 平台的虚拟机，使用它创建虚拟机的时候，可以直接下载 Android 系统并安装，超级傻瓜的操作，但是超级好用。安装完虚拟机，就可以用里面的浏览器打开网页进行测试了，虚拟机与本机处于一个局域网，可以用局域网 IP 来调试本地页面。虚拟机不是真机，但是要比直接用浏览器测试强一些，在桌面操作比较方便，还可以安装多个版本测试。

二、Android 真机调试

移动端浏览器可以用数据线连接设备，然后用电脑上的 Chrome DevTools 来调试移动设备上的页面。首先， Chrome 版本必须高于 32。其次测试机 Android 系统高于 4.0，测试机安装 Chrome for Android 才可以使用 Chrome 远程调试这项功能。

先用数据线将 Android 测试机连接到电脑上。需要打开测试机上面“开发者选项”中的 “USB 调试”功能。在 Android 4.2+ 系统上“开发者选项”默认是隐藏的，所以你需要先开启“开发者选项”（开启方法：设置 -》 关于本机 -》猛击版本号（Build number）多次 即可开启开发者选项）然后在桌面版 Chrome 打开 chrome://inspect 即可查找你的设备，在设备上的 Chrome 打开网页，即可看到，然后就可以在桌面版 Chrome DevTools 调试移动设备上的页面了。（电脑需要开翻墙代理 lantern 或 switchysharp）

三、使用 Weinre 调试

Weinre 是一个相当简单好用的调试工具。它会在你本地创建一个监听服务器，并提供一个 JavaScript，你只需要在需要测试的页面中加载这段 JS，就可以被 Weinre 监听到，在 Inspect 面板中调试你这个页面。Chrome 功能很强大，调试很方便，提供了很多调试功能。但是前提是安装 Android 版本的 Chrome 浏览器，才可以连接调试。国内用户大都使用 UC 浏览器、百度浏览器以及 QQ 手机浏览器等等，而这些浏览器通常使用的是 WebView，或者自己改造的内核。Weinre 是最折中实用的测试方案。

四、基于 iOS 的移动端前端开发调试

Safari 默认是隐藏开发选项的，在第一次使用的时候，需要在 Safari 中选择 “偏好设置”-》“高级”-》“在菜单栏中显示开发选项”

1、使用 iOS Simulator 调试开发

iOS Simulator 是 Xcode 开发工具内置的 iOS 模拟器，因此该功能仅能在 Mac 系统下使用。按照如下方式即可打开：

打开之后，你可以用模拟器里面的 Safari 打开需要调试的网页。它可以直接打开本地 localhost 的页面，无须任何设置。你可以选择上面菜单中的“硬件”来模拟其他 iOS 设备，包括 iPad 等。如果你升级了你的 OS X 系统和 Xcode 6，你还可以模拟 iPhone 6 和 iPhone 6 Plus。

如果需要调试，打开桌面版的 Safari，在“开发”中选择要调试的页面，即可打开 Safari 调试面板：

2、iOS 设备真机调试

首先需要在 iPhone 等设备上设置一下 Safari 浏览器，开启调试功能。具体步骤：“设置”-》“Safari”-》“高级”-》“Web 检查器”。使用数据线连接电脑，在设备上用 Safari 浏览器打开需要调试的页面，之后在桌面版的 Safari 开发选项中即可看到进行调试，跟用 iOS Simulator 一样，只不过现在换成了真机。

但是调试本地网站，你可能要将手机与电脑连在一个局域网内，然后开启一个局域网 IP 的服务器进行调试，稍微麻烦。

提示：iOS 系统版本 8+ 的设备，需要使用 Safari 7.1+ 调试，老版本 Safari 会无法识别。你可以将 OS X 更新到 10.9.5，或者升级到 Yosemite。

五、使用 MIHTool 进行远程调试

MIHTool 基于 Weinre，用于 iOS 设备的前端开发测试。上面有提到 Weinre 大体的工作方式，即开启一个服务器，然后将 JS 插入到页面中，访问进行调试。MIHTool 将这个过程简化了，它是一个 APP，可以直接安装到你的 iOS 设备里面，然后内置一个简单的浏览器可以打开你的测试页面，当它开启时，会自动向页面中插入 Weinre 的 JS，并告知 Weinre 控制台 URL 等信息，让你可以访问进行调试。

六、微信 Webview 调试

微信目前有非常大的移动端页面市场占有率，因此很多页面特别是面向微信的页面，就需要微信调试。

相关链接：http://blog.qqbrowser.cc/

七、移动设备在线测试

移动端设备如此之多，于是就有人买了这些设备，连接起来，提供在线调试服务。此外 Keynote 也提供这种服务

八、BrowserSync 同步操作

九、Charles 代理应用

十、使用 Ghostlab 等集成测试工具

Ghostlab 是一个带着美观界面的集成的测试工具。大体功能相当于 Weinre + BrowserSync，带有简洁美观的界面，用鼠标拖动操作，简单几个点击即可启动一个本地局域网 IP 服务器，会监听网页的终端，并同步各种操作。当点击Inspect 的时候，会打开 Weinre 进行调试。

带有界面使其使用十分简单，不需要执行命令，也有很多额外的参数来辅助调试。因此这个软件是收费的，而且只针对 Mac 平台。

相关链接：http://www.vanamco.com/ghostlab/

十一、总结：不同测试场景下需要用到的技术和工具

响应式测试：Chrome DevTools 面板右侧拉伸快速查看效果；Firefox 响应式工具进一步调整；Chrome Emulation 精细测试。
Android 设备测试：使用 Android 虚拟机；优先使用 Weinre 测试，分析用户浏览器使用份额，有针对的进行测试。高版本 Android 测试机，使用 Chrome 连接调试。Android 4.4+ 的 WebView 修改 APP 源代码，也可以用 Chrome 调试。
低版本系统和其他品牌手机以及 WebView：统统可以用 Weinre 来解决。
iOS 设备测试：使用 Xcode 自带 iOS 模拟器，使用 Safari 调试；WebView 也可以被电脑上 Safari 调试；测试机连接电脑，也可以用 Safari 调试；MIHTool 可以在 iOS 设备上使用，提供类似 Weinre 的调试功能。
测试多种设备：BrowserStack 和 Keynote。
使用 BrowserSync 可以创建本地局域网 IP 服务器，并同步操作、监听刷新，极大减少测试操作，提高测试效率。
当移动端设备无法访问某项资源时，使用 Charles 做代理，通过电脑去访问。

参考：http://yujiangshui.com/multidevice-frontend-debug/