移动端设备前端开发调试的方法技巧

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

通过移动端使用Web服务的比率越来越大，掌握移动端的前端开发和测试是非常有必要的，但本文只介绍与调试有关的内容，至于其他移动端开发知识太多太大，我们在此就不一一的介绍了。

一、响应式测试

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

1、基础的响应式测试

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

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

优点就是对于Chrome开发者可以快速查看响应式变化效果。

缺点就是分辨率尺寸不会很精确，因为它的页面宽度是添加了滚动条之后的宽度，这样对Media Queries的临界值效果不好测试。

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

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

由于响应式测试太简单，于是有了一大堆的书签栏JS工具或者Chrome扩展，并且以很多交互特效、复杂的功能来吸引用户，实际上使用起来，你可能需要依靠网络才能使用，还会遇到切换缩放不够流畅、刷新不方便等等问题，在这里不推荐（具体可查看马海祥博客《响应式网站页面的设计需求和设计流程》的相关介绍）。

2、Chrome模拟设备尺寸

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

打开DevTools之后，点击这个“手机图标”即可进入Chrome手机模拟器：

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

慢网速的测试，往往需要用抓包工具（Charles等）来模拟，现在用Chrome也可以模拟了。

除此之外，Chrome的手机模拟器还提供了非常非常多的实用功能，比如模拟touch事件、捏等手势操作、地理位置、加速计、Retina等等。

这里的方法仅能作为基础的响应式测试，对于中小型、比较简单的项目，完全足够用了，对于稍微复杂的页面，还是需要用虚拟机或者真机测试，这样更加可靠（具体可查看马海祥博客《详解移动端设备页面尺寸设计原理》的相关介绍）。

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

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

1、Android虚拟机测试

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

（1）、Genymotion

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

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

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

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

（2）、Parallels

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

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

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

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

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

2、Android真机调试

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

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

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

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

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

三、Android WebView前端开发调试

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

1、基于Chrome的调试

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

不过需要在你开发的应用中，添加有关代码才可以启用WebView的调试，这里比较有局限性，有兴趣的朋友可以试下，这里不再赘述。

2、使用Weinre调试

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

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

首先安装Weinre：

npm install -g weinre

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

Mac在终端执行ipconfig getifaddr en0命令。

Win在命令行执行ipconfig命令。

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

weinre --boundHost 10.189.249.254

开启本地监听服务器。

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

这里最重要的是箭头所指的这个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 等面板来进行调试操作了：

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

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

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

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

如上图所示，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调试面板：

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

2、iOS设备真机调试

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

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

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

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

3、使用MIHTool进行远程调试

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

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

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

4、移动设备在线测试

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

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

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

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

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

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

接下来，再跟大家介绍几种其他移动端调试方法和技巧：

1、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-sync start --server --files="*"命令即可，表示创建一个服务器并监听该目录下的文件变动，它也有提供Grunt和Gulp插件，更多的用法移步BrowserSync官方文档，这里不再赘述。

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

此外，两个BrowserSync的小提示：BrowserSync默认请求index.html，如果你的目录里面没有这个文件夹，会返回Cannot GET /，这时候你需要指定具体的目录、文件。

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

2、Charles代理应用

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

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

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

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

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

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

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

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

六、回顾总结

由于篇幅较长，最后我们在一起来回顾总结一些要点：

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

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

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

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

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

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

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

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

iOS设备测试：使用Xcode自带iOS模拟器，使用Safari调试；WebView也可以被电脑上Safari调试；测试机连接电脑，也可以用Safari调试；MIHTool可以在iOS设备上使用，提供类似Weinre的调试功能（具体可查看马海祥博客《APP在IOS与Android系统界面设计规范》的相关介绍）。

测试多种设备：BrowserStack和Keynote。

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

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

马海祥博客点评：

移动互联网时代，浏览器发展的趋势、浏览器调试工具发展的未来一定是基于移动端调试的便利性、远程调试的广泛支持，我可以大胆预测支持多终端跨设备跨浏览器的远程调试工具将会越来越多。

本文发布于马海祥博客文章，如想转载，请注明原文网址摘自于https://www.mahaixiang.cn/ydseo/1439.html，注明出处；否则，禁止转载；谢谢配合！