本节书摘来异步社区《HTML5移动开发》一书中的第1章，第1.3节，作者：【美】Estelle Weyl（埃斯特尔 韦尔），更多章节内容可以访问云栖社区“异步社区”公众号查看。

1.3　测试工具

能在真实设备上运行网站是最好的，但是不可能在所有的设备上进行测试，因为有成千上万种设备，而且每天都会有新的设备出现。因此建议你在一组有代表性的设备上进行测试，这组设备能够覆盖各种配置，例如操作系统、浏览器、设备大小以及各种屏幕分辨率（resolution）、内存约束和带宽访问等设备能力。

在真实设备上测试将会非常昂贵而且耗时。除了在上一节中介绍过的调试工具，还有一些工具可以帮助我们实现最大化的测试能力。

1.3.1　仿真器和模拟器

仿真器是一种软件，在电脑上复制或是模仿了一个（或多个）移动设备的功能，使得仿真的表现非常类似于真实设备的运转情况。这种注重运转情况的真实再现正是仿真和模拟之间的区别。模拟主要是模拟一个移动操作系统的抽象模型。

仿真器允许你在桌面电脑上使用移动软件，使你无须所有的设备即可运行和调试代码。即使你使用仿真器和模拟器进行测试，仍然无法在所有设备的仿真器上进行测试。仿真器和模拟器仅仅让你得以起步并加快开发和调试的进程。你还是应该在一组不同的移动设备上进行测试。

当在模拟器中运行网站时，你是在桌面电脑的一个模拟器程序中运行的。有些模拟器是针对单独的设备的，其他的则让你选择你想模拟什么设备。举例来说，iOS模拟器允许你选择iPhone还是iPad。通过菜单，你可以在横向和纵向之间改变设备朝向。还有相当于设备按钮的虚拟按钮。而且在非触控设备上，你还可以使用鼠标来模仿　触控事件。

模拟器没有精确地复制设备硬件，因此不保证你的应用程序在真实设备上能够同样地运行。某些类库对于模拟器而言可以正常地编译及链接（因为它确实是在电脑上运行的），但是当你在设备上的时候可能就无法编译。

模拟器和仿真器通常都包含一个完整的SDK，用于在一个“山寨”的本机环境中测试原生应用。为了测试代码，我们需要的是包含浏览器的仿真器和模拟器，每个仿真器和浏览器确实都有。你可能会希望下载下列仿真器和模拟器，并在其浏览器中测试网站。

Android仿真器

适用于Windows、Mac及Linux的免费Android仿真器可以随SDK一起从获取。正如http://developer.android.com在“Android调试工具”小节中描述的那样，先下载基本SDK，然后分别下载各个Android操作系统。在Mac或Linux的下载包里提供了一个Android命令行工具，在Windows上则提供了一个SDK setup.exe程序。

Android仿真器可以让你限制虚拟设备的内存大小以更好地模拟手机。在 Android虚拟设备管理器中，选中一个设备然后点击“修改”（Edit）（如图1-5所示）。在“硬件”（hardware）中点击“新建”（New），然后从“属性”（Property）下拉菜单中选择“设备内存”（Device RAM）大小。

iOS模拟器

iOS模拟器提供了一个免费的包含移动Safari浏览器的模拟环境，仅可用于Mac OS X。要注意的是，iPhone SDK的大小差不多是2GB，下载可能会花很长时间。

这是一个模拟器，而不是仿真器。它没有硬件仿真和性能指示器。它只能让你看到代码是如何运行和网站是如何渲染的，但它总体来说无法测量网站的性能。

如果你只是想看一下你的设计看起来是个什么样子，不需要仿真或是模拟的话，有很多像iPhoney或是iPadPeek这样的工具，它们就是简单地在一个看起来像是旧的设备模型的浏览器中打开你的网站。

BlackBerry模拟器

Windows版的BlackBerry模拟器包括代理服务器、面向Web开发人员的Eclipse和Visual Studio的插件以及模拟器。

Windows Phone仿真器

Windows Phone仿真器只能在Windows上使用。Windows Phone仿真器是一个仿真Windows Phone设备的桌面应用程序。可以从http://dev.windowsphone.com/ en-us/downloadsdk下载Windows Phone SDK。最新发布版以及有关安装的信息可以参阅网址http://bit.ly/16t5utu。

目前，在Visual Studio中默认的仿真器映像是Emulator WVGA 512 MB，它仿真的是一个内存有限的Windows Phone 8手机。

Firefox OS模拟器

面向Firefox浏览器的Firefox OS模拟器附加组件（Firefox OS Simulator add-on）是一个Firefox OS仿真器，它提供了一个像Firefox OS一样的环境，而且看起来和感觉都像是一个移动电话。安装完成之后，Firefox桌面浏览器的Web Developer菜单下面就多了一个Firefox OS的菜单。

Opera Mobile仿真器

面向Windows、Mac和Linux的Opera Mobile仿真器可以从www.opera.com/ developer/tools下载。

Opera Mini模拟器

最新版的Opera Mini有一个Java applet版本，这是一个完整的Opera Mini应用程序，可以从www.opera.com/mini/demo获取。

以上是最常见的移动操作系统。大多数的移动操作系统，像Symbian和WebOS，具有可以通过桌面系统加载的SDK，这样你就可以模拟它们的环境。根据你目标市场的不同，你应该测试你的所有目标受众可能会使用的操作系统。有关仿真器的更多信息可参考http://www.mobilexweb.com/emulators。

1.3.2　在线工具

要快速评估设备会影响基本媒体查询的重要统计数据，可以在设备浏览器中打开http://www.quirksmode.org/m/tests/widthtest.html。

W3C mobileOK检查器（W3C mobileOK Checker）可以检查网站是否遵循最佳实践，并提供相关的信息和链接来帮助你，使你的网站对移动设备更加友好。mobiReady是一个利用了W3C mobileOK检查器的在线工具，它以一种更能说服你采取行动的方式来显示结果，从而使你的网站更加移动友好。

Firefox的Modify Headers附加组件对于移动Web开发、HTTP测试及隐私非常有用，它可以让你修改（添加、替换或者过滤）发送到Web服务器的HTTP请求头。所有上述资源的链接（以及本书列出的所有其他资源）都放在在线各章资源列表。

1.3.3　手机

在真实设备上进行测试是开发过程中的一个必要步骤，但购买一堆移动设备可是一笔不小的投资。调整浏览器大小和使用仿真器无法复制真实的网站性能、设备能力、像素密度和移动网络的影响。

如果你正在创建原生应用，显而易见你手里要有安装了相应操作系统的设备。在本书中，我们使用HTML5、CSS3和JavaScript进行开发，而不是原生应用，因此我们的代码将运行在所有设备的浏览器中。虽然我们的开发面向的是浏览器，但我们也还是需要在很多设备上进行测试，包括在手机运营商的网络上。永远要在真实的设备上，使用现实世界的网络连接来测试你的代码，包括WiFi热点、3G、4G甚至EDGE。乘坐一辆巴士或者火车出行，当它在城市以及大城市之间的郊区和农村地区移动时，试着从各种不同的地点来访问你的应用。

浏览器实验室（browser labs）

在真实移动设备上测试是开发过程中无法忽略的一个部分。有很多的浏览器实验室，所以要尽量在你的附近找到一个。如果你周围没有这样的设备实验室，那就和别人一起组建一个出来。

如果你倾向于拥有自己的设备实验室，那么你需要具有不同大小、操作系统、设备能力和浏览器的设备。你可以用相当便宜的价格创建一个你自己的设备实验室，从所有设备中按照你自己感兴趣的方面选择系列设备即可。购买全部的设备　是不可能的，但是你应该尽量拿到一组有代表性的不同大小、浏览器和操作系统的设备。

还有像DeviceAnywhere和Nokia Remote Access这样的虚拟设备实验室。这些都是你可以远程访问的真实设备。正因为它们都是真实的设备，所以如果某人正在使用你想用到的那一台的话，你就只能排队等候。

iOS

在北美地区，iOS设备总共只占了整个互联网流量的5%，但却占了整个移动流量的50%[11]。如果在你的开销中还没有一台iOS设备，就投资一台吧。

购买一台能够安装最新iOS操作系统的设备，以及一台稍旧版本操作系统的设备。你可以在Craigslist或者eBay上以很少的费用买到一台旧设备。目前，只有1.8% 的iOS用户，或者说是0.13% 的互联网用户，还在使用iOS 4.3及更老的版本，还有12.5% 的iOS用户，或者说是0.93% 的互联网用户在使用iOS 5。

购买设备的时候，你需要的是能够工作的浏览器。仅此而已。所以如果预算有问题的话，屏幕裂了的设备也可以买，总比没有强。其中一个设备应该是一部手机，另一个可以是手机、iPad或者iPod Touch。

购买iOS设备之后，可以从iTunes免费下载Opera Mini。

如果你所有的iOS设备都是高分辨率显示屏的话，应确保你其他的设备不是。同样，确保你所有的设备不全是手机——要有一两个平板设备。

Android

Android是世界上最流行和最多样化的移动操作系统。Android运行在涵盖手机和平板电脑的很多设备上。购买至少两部（最好更多）Android设备：一部是运行最新操作系统的高配智能机，另一部是运行旧版本的便宜货。在本书写作之时，Android 2.3虽然已经过时了，但是一些商店里售卖的便宜和免费设备上安装的还是Android 2.3，而且它还是目前Android最普遍的版本，占据整个Android市场的34%，也就是整个互联网用户的2.3%[12]。

除了多个Android操作系统版本之外，还要有具备不同大小、处理能力、分辨率以及厂商的设备。在Android设备上，你可以添加其他的浏览器，包括Chrome、Opera Mini和Opera Mobile、Firefox Mobile以及Dolphin Mini和HD。

Windows

如果你正准备投资一台Windows设备，钱要花在最新的操作系统上。Windows Phone 7从未大规模流行过，但是Windows Phone 8具有这个潜力。两者都使用Metro UI用户界面。除了测试应用程序以确保代码工作正常之外，要真正地去使用Windows Phone。Windows Phone设备的用户交互与Android和iOS大不相同。通过使用Windows设备，你或许能够意识到，需要调整UI交互以使其更加符合系统本身的默认操作。

BlackBerry

BlackBerry 10设备拥有所有移动设备中最好的调试器，但绝对不是最大的用户群。

市场上有比BlackBerry 10更多的旧版BlackBerry设备。BlackBerry的新旧设备用户都在上网冲浪。我建议再添置一个BB6或BB7。幸好，旧手机并不贵，而且找一个非触控手机来测试你的网站也不错。

BB 6之前的浏览器都不是基于WebKit内核的。只有非常少的用户还在使用那些实在是太老的设备。如果你的目标市场是BB5甚至更低的话，你可能要再买第三个BlackBerry设备了。

Nokia

谈到Nokia，我的意思是Symbian OS，而不是Lumia Windows Phone。

Symbian、S40系列、三星，其次是索尼移动和摩托罗拉，在某些国家比Android、iOS、BlackBerry和Windows更常见。如果我建议某个特别的设备的话，在本书出版的时候，可能已经过时了。你只要能意识到在国际上而言，Nokia在移动市场还是很有影响力的一员。我建议添置一部功能型手机，有十字方向键输入和一个小屏幕的那种，这样你就能知道世界上很大一部分人在看你的网站时，会是什么感觉。

Kindle

别忘了还有装有基于WebKit内核Silk浏览器的Kindle Fire。

WebOS

WebOS已经不再生产，但还是有人在用[13]。你可以以低于30美元的价格买到一个Palm Pre或者Pixi。

1.3.4　自动化测试

刚才列出来的这些测试工具有助于我们可视化和手动地进行测试。要真正充分地测试，你必须不停地翻转（rotate）、缩放（zoom）、点击（pan）手机，操作失误还会无奈地大叫。对呈现而言，你需要实际地在不同设备大小、浏览器和操作系统上查看渲染的页面。对于静态内容，这可能已经足够了，而且像Adobe Edge这样的工具也能帮上忙。

对于Web应用来说，你可能需要自动化测试。你需要持续地测试应用以确保代码确实正常运行，需要测试所有的事件及结果。有一些针对JavaScript的测试类库。

Jasmine是一个行为驱动开发（behavior-driven development，BDD）的框架。PhantomJS是一个没有头文件的WebKit，不是一个测试类库，针对各种Web标准包括DOM处理、CSS选择器和JSON等都提供原生支持。你可以在PhantomJS的网站下载到面向任何操作系统的一个预编译二进制文件。

要利用PhantomJS进行自动的前端测试，可以下载CasperJS。要伪造AJAX请求，可以使用Sinon.JS。每个网站都提供了编写良好的文档，让你可以快速入门，在WebKit中使用这些类库进行测试。但没有解决在移动方面进行测试的问题。

还有一些在线的测试工具。像SauceLabs，可以让你使用上百种的移动或桌面浏览器和操作系统平台进行测试。

你可以选择任何适合你和你的应用程序的设备和工具，但是永远要测试。

现在，让我们开始写代码吧，这样我们才能有东西来测试。