移动端前端开发调试

通过移动端使用Web服务的比率越来越大，例如淘宝今年双十一，移动端交易份额就达到42.6%。由此可见，掌握移动端的前端开发和测试是非常有必要的。

由于之前做过大量有响应式需求的项目；今年（2014）年初也配合Denis的微信机器人做了一些用于微信的移动端项目；在淘宝UED实习的时候，也有参与过一个针对移动端的游戏的部分开发。所以算是积累了一点移动端调试的经验，在这里分享一下。

本文只介绍与调试有关的内容，至于其他移动端开发知识（技巧、坑）太多太大，推荐Mars移动前端开发知识库。这个项目很久没有大动静了，欢迎大家猛烈关注，不要让它“太监”了。

响应式测试

响应式现在基本是中小型项目的标配了，先来谈谈响应式测试技巧。

基础的响应式测试

响应式的测试特别简单，通过改变视窗大小（也就是缩放你的浏览器）即可测试。当然，你的CSS中MediaQueries判断条件设置时要使用max-width才行，如果使用max-device-width则会根据你设备的屏幕尺寸来判断。区别详情请看这里。

对于Chrome浏览器，你可以将ChromeDevTools放在右边，这种布局方式尤其适合用在外接的大屏幕上。然后通过拖动DevTools快速测试响应式的显示效果：

1.gif

优点就是对于Chrome开发者可以快速查看响应式变化效果。缺点就是分辨率尺寸不会很精确，因为它的页面宽度是添加了滚动条之后的宽度，这样对MediaQueries的临界值效果不好测试。

对于Firefox浏览器，不愧是早期开发的必备神器，它早就内置了响应式测试工具，可以通过Firefox工具-》Web开发者-》自适应设计视图启用：

2.png

可以设置分辨率等参数，以及模拟touch事件、屏幕截图等功能，可以随意拖动。足够简单和流畅，很方便测试响应式的变化效果等。对于基础的响应式测试以及临界值变化情况测试，强烈推荐Firefox浏览器。

由于响应式测试太简单，于是有了一大堆的书签栏JS工具或者Chrome扩展，并且以很多交互特效、复杂的功能来吸引用户。实际上使用起来，你可能需要依靠网络才能使用，还会遇到切换缩放不够流畅、刷新不方便等等问题，在这里不推荐。

Chrome模拟设备尺寸

如果你需要测试某种明确的机型，Chrome新版的Emulation就可以派上用场了。Emulation现在变成了一个手机图标（mobile-test1.png），之前的Emulation面板被放在了DevTools的分裂视图中了，如果你怀念以前的Emulation面板或者需要模拟地理位置、加速计等功能，在DevTools界面摁下ESC即可打开分裂视图。打开DevTools之后，点击这个“手机图标”即可进入Chrome手机模拟器：

3.png

在Device你可以选择预置的设备，快速切换分辨率和屏幕有关参数。此外还可以设置分辨率比率，来模拟Retina或者更高级屏幕下的效果，这样可以测试你的响应式图片是否被正确替换等。它甚至提供了网络测试，来测试低网速情况下你的页面加载情况。慢网速的测试，往往需要用抓包工具（Charles等）来模拟，现在用Chrome也可以模拟了。

除此之外，Chrome的手机模拟器还提供了非常非常多的实用功能，比如模拟touch事件、捏等手势操作、地理位置、加速计、Retina等等，详情请见官方文档，英文不好的朋友可以看我的翻译版本。节约篇幅，这里不再赘述。

这里的方法仅能作为基础的响应式测试，对于中小型、比较简单的项目，完全足够用了，对于稍微复杂的页面，还是需要用虚拟机或者真机测试，这样更加可靠。

基于Android的移动端前端开发调试

Android系统是份额最大的移动端设备操作系统。一方面，Android是Google开发的，浏览器等也是基于Blink内核（早期版本基于Webkit），都是Google开发的，所以技术上应该是没有问题的。另一方面，Google无偿开源Android系统，结果导致很多小厂商自己乱改Android系统，各种版本遍地生花，各种BUG层出不穷。

Android虚拟机测试

在电脑上安装Android虚拟机，就可以用虚拟机打开进行测试。一般推荐两个：

Genymotion

Genymotion是一个很棒的Android虚拟机。但是首次安装配置需要麻烦一些。由于基于VirtualBox内核，所以要先安装VirtualBox，然后需要注册账号Genymotion，可以免费使用，但是有功能限制。如果遇到重要的项目，临时买一两个月高端账号也是OK的。

安装完成，登陆之后，选择Android版本和手机型号，即可下载对应的虚拟机包，下载好的虚拟机会显示在列表中，你可以选择开启。

4.png

安装好的虚拟机与你Host本机处于一个局域网，这样你就可以用BrowserSync之类的，开启一个局域网IP本地服务器，在移动设备上同步测试了。关于BrowserSync，如果你没接触过，下面有讲。

比较蛋疼的是，Genymotion虚拟机里面安装APP好像比较麻烦，安装Chrome不太方便，这样不方便连接桌面版Chrome进行调试，只能使用Weinre调试。如果你有Genymotion使用这方面的经验欢迎分享。

Parallels

Parallels是基于Mac平台的虚拟机，使用它创建虚拟机的时候，可以直接下载Android系统并安装，超级傻瓜的操作，但是超级好用。

5.png

没错，它还可以装ChromeOS，只需要点击一下等待下载即可。

其他虚拟机软件应该也可以实现，不如这两种好用，如果这两种你无法使用，可以自行搜索选择其他方法尝试。Win系统可以直接安装AndroidSDK也可以通过虚拟机方式，这里不再赘述。

安装完虚拟机，就可以用里面的浏览器打开网页进行测试了，虚拟机与本机处于一个局域网，可以用局域网IP来调试本地页面。

虚拟机不是真机，但是要比直接用浏览器测试强一些，在桌面操作比较方便，还可以安装多个版本测试。

Android真机调试

桌面端的前端开发调试非常简单，因为有Firebug、ChromeDevTools等工具，直接右击打开就可以看到元素的CSS，并且可以查看各种资源、修改运行调错JS等。而移动端浏览器显然没法带有这些功能，于是可以用数据线连接设备，然后用电脑上的ChromeDevTools来调试移动设备上的页面。

首先，你的Chrome版本必须高于32。其次你的测试机Android系统高于4.0，测试机安装ChromeforAndroid才可以使用Chrome远程调试这项功能。

先用数据线将Android测试机连接到电脑上。需要打开测试机上面“开发者选项”中的“USB调试”功能。在Android4.2+系统上“开发者选项”默认是隐藏的，所以你需要先开启“开发者选项”（开启方法：设置-》关于本机-》猛击版本号（Buildnumber）多次即可开启开发者选项）。之后如果没有开启，或者没有反应，可能是你的版本问题或者点击错了，你可以尝试把关于本机上所有的选项都猛击几次，就会开启。

然后在桌面版Chrome打开chrome://inspect即可查找你的设备，在设备上的Chrome打开网页，即可看到，然后就可以在桌面版ChromeDevTools调试移动设备上的页面了。

6.jpg

此外，还可以直接在桌面版Chrome输入URL在移动设备上打开；在本地用Nodejs或者其他功能开启一个本地服务器，用端口转接让移动设备直接访问本机localhost上的页面，再配合LiveReload、BrowserSync之类的工具，自动刷新，测试简直爽歪歪。

更多细节不再赘述，可以查看RemoteDebugging官方文档或者我的翻译版本。

AndroidWebView前端开发调试

现在越来越多的移动端APP是WebView，因为开发方便，更新快捷。那么就会有调试WebView的需求，因为他们本身就是网页。

基于Chrome的调试

在Android4.4（KitKat）或者更新版，你可以使用DevTools来调试原生安卓应用中的WebVies内容。

不过需要在你开发的应用中，添加有关代码才可以启用WebView的调试，这里比较有局限性，有兴趣的朋友可以参照官方文档或者我的翻译版本试下，这里不再赘述。

使用Weinre调试

Weinre是一个相当简单好用的调试工具。它会在你本地创建一个监听服务器，并提供一个JavaScript，你只需要在需要测试的页面中加载这段JS，就可以被Weinre监听到，在Inspect面板中调试你这个页面。

目前Weinre也发布到NPM上了，Mac下具体使用方法如下（Win的同学请参加：远程调试工具-weinre）：

首先安装Weinre：

1

npminstall-gweinre

安装完成之后，要在本地开启一个监听服务器，需要获取本机的局域网地址：

Mac在终端执行ipconfiggetifaddren0命令。

Win在命令行执行ipconfig命令。

这时候拿到一个IP，就本例而言，我的IP为10.189.249.254，这时候执行：

1

weinre--boundHost10.189.249.254

开启本地监听服务器。

7.png

这里有一个网址，就是Weinre的一些说明，我们可以打开看下：

8.png

这里最重要的是箭头所指的

这个JS，我们需要把这个JS放到我们要调试的页面中，这样访问页面的时候，加载这个JS，就会被Weinre监听到进行控制。

小提示：这个JS后面的#anonymous起到一个标识作用，为了区别，我们可以将其修改成#test放到页面中。这时候，我们的Inspect面板的地址就不是http://10.189.249.254:8080/client/#anonymous了，而是http://10.189.249.254:8080/client/#test。

当我们访问页面的时候，就会出现在监听列表中，如果有多个网页，你可以从列表中选择一个。然后就可以使用后面的Elements、Console等面板来进行调试操作了：

9.png

Weinre非常灵活，只需要在页面中加载这个JS，然后访问即可，因此WebView可以用这种方法调试，一些低版本的Android、iOS也可以支持，WindowPhone也是可以用的。在调试移动设备时你可能需要在本地搭建一个局域网IP的服务器，将设备与本机网络连接成一个局域网，用移动设备访问这个网页即可。

当然Weinre也不是万能的，相比Chrome的调试工具，它缺少JavaScriptdebug以及Profiles等常用功能，但是它兼容性强，可以实现基础调试功能。

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

iPhone等一系列苹果设备对前端还是相当友好的，性能够好，Safari浏览器也是不错，型号固定统一，问题也比较好解决，此外苹果公司也提供了一系列开发者工具。

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

10.png

使用iOSSimulator调试开发

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

11.png

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

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

12.png

这样就可以进行调试了。这里提供一个技巧：将URL粘贴到模拟器的地址栏时，用CMD+V是无法粘贴进去的。如果想要粘贴，先摁下CMD+V然后再用鼠标点击一下地址栏，稍等会出现Paste按钮，再用鼠标点击一下这个按钮即可粘贴进去。

iOS设备真机调试

模拟器已经足够强大方便了，但有些手势操作测试以及最真实的用户体验测试还是需要真机。Safari调试真机上的网页也是非常简单的。

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

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

此外Safari还可以调试在iOS上面的WebView，比如用调试PhoneGap打包的APP等，方法类似，这里还有个测试用APP，会iOS开发的朋友可以看下。

使用MIHTool进行远程调试

MIHTool是国人听奏开发的，基于Weinre，用于iOS设备的前端开发测试。

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

它还提供了一个公共的Weinre调试服务，生成类似http://i.mihtool.com/dev/client/#AwAj这样的链接，打开即可调试，非常方便，就是有些卡。

除此之外，它还提供了很多方便调试的功能，有兴趣的朋友可以看下官方网站的介绍和DebuggingwebcontentoniOS。感觉就是丑了一些，如果能请设计师或者交互设计一下，会好得多。

移动设备在线测试

移动端设备如此之多，小公司或者团队，没有这么多资金和精力购买如此多的测试设备进行测试。于是就有人买了这些设备，连接起来，提供在线调试服务。

例如用不同的设备访问你的网站，并截图：

13.png

甚至可以让你远程控制一台机器，进行测试操作：

14.png

BrowserStack就提供这种服务，它可以实时在线调试，也可以截屏、测试响应式等等。

此外Keynote也提供这种服务，当然这里的Keynote不是Mac上的幻灯片APP。它提供更加真实的Mobile测试，我简单的试了一下，果然比较卡，应该是真机测试：

15.png

其他移动端调试方法和技巧

BrowserSync同步操作

BrowserSync是我最爱的多终端测试工具。在没有使用这个BrowserSync之前的原始的测试流程一般是这样的：

先把本地的网页上传到远程服务器（因为好多设备都要去访问一个固定的地址），然后将网址输入到各个测试机的测试浏览器里面手动打开(或者使用浏览器插件等，生成二维码扫一下）。然后手机开始下载页面，需要等待下载。观看效果进行测试，每个测试机都要操作一遍。测试其他网页的时候，每个测试机重新输入网址、刷新。如果代码有修改，需要重新上传服务器进行刷新。

而BrowserSync这个工具，可以用你局域网IP创建一个本地服务器，生成一个类似http://10.189.249.135:3002的URL，这样所有与你电脑处在一个局域网的设备，都可以访问到你本地的页面。

建议使用无线路由器搭建一个无线局域网，所有设备都连入这个无线局域网。Win系统电脑用软件开启Wifi共享也是可以的，Mac就比较悲剧了，只有在插网线的时候，可以开启Wifi共享功能。

BrowserSync还会监听文件变动，当监听的文件发生变动，会自动刷新所有连接本地服务器的页面。BrowserSync最主要的功能是同步，同步一切操作，当你在某个浏览器中触发的操作，会在所有测试浏览器中同步操作，例如在电脑上滚动页面，所有手机都会滚动页面；电脑上更换了URL测试另一个页面，所有手机都跳转到另一个页面。

应用BrowserSync工具之后的新版测试流程就变成这样了：

用BrowserSync开启本地服务器，所有测试设备连接到局域网中，依次打开http://10.189.249.135:3002/（BrowserSync创建的本地服务器地址）。在一台设备操作，观察其他设备的情况，修改了CSS、HTML或者JS代码，保存一下，自动在所有设备自动刷新。

BrowserSync的使用非常简单，在要创建服务器的目录下面执行：browser-syncstart--server--files="*"命令即可，表示创建一个服务器并监听该目录下的文件变动。它也有提供Grunt和Gulp插件，更多的用法移步BrowserSync官方文档，这里不再赘述。

BrowserSync的原理大体是这样的，它会在HTML页面里面插入JS，然后监听页面操作。所以当你滚动页面或者跳转新页面，BrowserSync可以捕获到这个操作，通过Socket.io向所有Client的JS发出操作指示，其他设备也会随之scroll或者location.href跳转等，实在太巧妙。

此外，两个BrowserSync的小提示：

BrowserSync默认请求index.html，如果你的目录里面没有这个文件夹，会返回CannotGET/，这时候你需要指定具体的目录、文件。

在开启BrowserSync的命令中，--files="*"表示要监听变动的文件。如果你指定了--files="css/*.css"就表示只监听css/下的所有css文件变动。如果遇到修改代码没有自动刷新的问题，可能是你监听的路径和文件有问题。对于CSS的修改，它会采用无刷新注入的方式，JS和HTML的修改，它会采用刷新的方式。

Charles代理应用

Charles是Mac系统下面的抓包、代理工具。如果你电脑是Win系统，可以使用Fiddler实现本节要介绍的技巧。

使用场景举例：当我们在本地开发时使用内网登陆功能（需要同域），往往需要绑定Host，比如将本机127.0.0.1绑定为xx.xx.com。这样我们访问本地服务器时使用xx.xx.com，才可以正常使用登陆等等服务（需要用到Cookie）。

那我们用移动端设备测试这个页面的时候，也需要修改移动端设备上的Host。因此Android需要root，iPhone需要越狱，而且每次都要开启，极为不方便。这时候，我们就可以使用Charles这里抓包工具做一个代理。

当打开Charles时，它会自动在本机开启一个代理服务，默认接口为8888。这时候，我们设置同局域网内的移动设备的代理为本机局域网IP，即可通过Charles转发请求，在移动设备上访问电脑可以访问的内容。基本原理如下图：

16.png

通过这个代理服务，移动设备的请求被转移到到电脑上发送出去，并将电脑得到的响应返回给移动设备。其他同类问题（想用手机访问只有电脑才能访问的内容）均可用这种方式解决。此外，因为经过Charles代理，因此可以使用Charles的查看有关请求和响应、做本地资源映射等等功能，来简化开发和调试BUG。

启用方法详情请见：iOS开发工具——网络封包分析工具Charles中的截取iPhone上的网络封包一节，这里不再赘述。

提供一个Charles的小技巧：Charles只提供了全局监听和Firefox监听，但我常用的是Chrome浏览器，我只想监听Chrome浏览器中某个页面的请求信息，也可以通过设置代理来解决。这里使用SwitchySharp代理插件（），增加一个新的情景模式，绑定本地Charles代理。

17.png

这样当我们想抓包某个页面时，只需要打开Charles并勾掉Proxy-》MacOSXProxy和MozillaFirefoxProxy，之后再在SwitchySharp中勾选这个情景模式，即可清爽的只监听Chrome浏览器发送的请求了。

关于Charles的使用，可以自行搜索教程，Fiddler同样原理，不再赘述。

回顾总结与扩展阅读

移动端前端重构项目开发流程最佳实践

新建项目相关文件，然后应用BrowserSync等工具（可以配合Grunt等）启动本地服务器。在Chrome中启用Emulation来模拟iPhone等设备的尺寸，进行编码开发。这样就可以无刷新、比较直观的看到手机上的效果。

开发基本完成，将测试机、虚拟机等打开联入局域网，输入本地服务器地址，开始测试。对文件的修改实时刷新在所有设备中，即时看到效果。

对于有点复杂的BUG或者问题，使用Safari或者Chrome连接虚拟机或者真机进行调试。

不同测试场景下需要用到的技术和工具

响应式测试：ChromeDevTools面板右侧拉伸快速查看效果；Firefox响应式工具进一步调整；ChromeEmulation精细测试。

Android设备测试：使用Android虚拟机；高版本Android测试机，使用Chrome连接调试。Android4.4+的WebView修改APP源代码，也可以用Chrome调试。

低版本系统和其他品牌手机以及WebView：统统可以用Weinre来解决。

iOS设备测试：使用Xcode自带iOS模拟器，使用Safari调试；WebView也可以被电脑上Safari调试；测试机连接电脑，也可以用Safari调试；MIHTool可以在iOS设备上使用，提供类似Weinre的调试功能。

测试多种设备：BrowserStack和Keynote。

使用BrowserSync可以创建本地局域网IP服务器，并同步操作、监听刷新，极大减少测试操作，提高测试效率。

当移动端设备无法访问某项资源时，使用Charles做代理，通过电脑去访问。

扩展阅读与资料参考

RemoteDebuggingonAndroidwithChrome（翻译版本）

DeviceMode&MobileEmulation（翻译版本）

AboutSafariWebInspector

AConciseGuidetoRemoteDebuggingoniOS,Android,andWindowsPhone

各种真机远程调试方法汇总

浏览器远程调试

weinre-Running

BrowserSync

Charles