第1章 学习移动HTML5、CSS3和Java Script API之前的准备工作

第1章 学习移动HTML5、CSS3和Java Script API之前的准备工作

如果你跟我多少有点类似的话,你肯定已经痛恨旧版IE浏览器很多年了。那些浏览器满是失败。然而,它们在整个生命周期内在任何地方失败的方式是一样的[1]。我们都知道IE6非常糟糕,但是它糟糕的方式是一样的。一旦我们搞清楚了如何填IE6的坑(polyfill[2]),我们就已经把它搞清楚了。

在移动世界,我们同样面临一些问题,不同的是这些问题以一种更新、更多样化且不断变化的方式存在。在不同设备上的不同浏览器版本可能支持很多新的特性,但实现方式可能不同。或者说,它们可能确实支持某个特性,但是这个特性可能并用不了。举个例子,一个现代浏览器可能支持也可能不支持localStorage。支持localStorage的设备可能允许也可能不允许对其写入。即使浏览器允许从localStorage读取数据,但这个读取操作可能非常耗时从而阻碍了性能。并且,即使浏览器通常情况下允许你对其写入,但localStorage本身可能已经达到了存储上限。

我们在这里无法涵盖所有操作系统和设备上所有浏览器的全部非标准情况(quirk)。即使我了解所有的这些非标准情况(而且我也不了解),这些非标准情况可以装满一个大部头,并且在我完成这个大部头之前它就过期了。这本书呢,实际上也过期了。浏览器支持以及规范等周边环境都在不断发生变化。没有办法制作一本最新的书出来,因为到其交付印刷之际——或者甚至在你刚完成一章的时候——周边环境已经变了。虽然某些浏览器、特性、电话以及提到的网站可能已经过时了,但本书带出的最佳实践在未来几年还是有意义的。本书的一个指导原则是:如果你采用最佳实践,并且依照标准编写代码,你的代码将能够在当前及以后所有的设备上运行。

我把针对特性的浏览器支持包含在内了,而且也没有缺少针对浏览器特性的支持,因为所有的浏览器将沿着正确的方向前进正是大家所期望的。今天在浏览器中的那些非标准模式(quirk)明天也许就解决了。

基于以上原因,在使用一个特性时,你不仅确实要做特性检测,而且需要进行测试以确保能够成功地使用这些支持的特性。

本书将使用与设备、操作系统以及浏览器无关的标记并且不使用JavaScript类库。我选择不使用类库仅使用普通JavaScript进行编码以确保你学到真正的代码。通过使用普通JavaScript编码,希望就不会存在一个方法到底属于原生方法还是框架提供的方法这样的困惑了。

但这不意味着你不应该使用类库。恰恰相反!开源类库是弄清楚浏览器不标准情况的最佳选择之一。开源项目拥有成百上千甚至成千上万的贡献者。这些成千上万的贡献者们密切地在大量的设备上进行开发和测试,他们找出那些不标准的情况,报告问题,并且给类库提交修正来处理这些情况或者提供解决方法和腻子脚本。这成千上万双眼睛同时也在报告bug,提醒浏览器厂商注意那些没有遵循标准运行的东西,以便这些bug可以在浏览器后续发布中得以修正。

流行的开源类库和HTML5 JavaScript API腻子脚本是快速发现各种各样的浏览器不标准情况及其解决方案的最佳资源。它们应被视为你的开发工具箱中的一个重要组成部分。即使你不使用它们,也一定要阅读这些源码来学习别人已经发现了的那些移动浏览器的bug。

在你阅读HTML5、CSS3以及相关的JavaScript API时,学习的最佳方法就是编写代码。让我们开始编码吧。

1.1 CubeDoo:HTML5移动游戏

我学习HTML5和CSS3的方法是在一个单一的移动浏览器上构建一个Web应用,并将其发挥到极致。我初次涉足CSS3是在2007年iPhone首次上市的周末写的一个结合了Twitter和美国职业棒球大联盟的Web应用,叫作Pickleview。当时,iPhone上的Safari浏览器是市场上最先进的浏览器(也许是除了Opera之外的)。通过只为一个单一的浏览器开发这个应用,我无须担心IE6、IE7或是Firefox 2的问题(Chrome当时还不存在[3])早在2007年的时候,这就是当时网络的状态。

在2010年,我又做了一遍在一个单一的浏览器上使用最现代的HTML5和CSS3编写代码的练习。我和一些朋友们使用动画、存储、离线能力以及所有在桌面版的Chrome 12中支持而在移动版Safari 3.1中不支持的新特性设计了一个记忆游戏。通过使用一个单一的浏览器以及利用我能够使用的所有新技术,我能够学习编写新的但是因为需要支持陈旧的浏览器而无法在生产中使用的HTML5、CSS3以及JavaScript模块。截至2010年,有的浏览器自2007年以后已经有了很大的进展。其他的(IE——你知道我这里说的就是你)就没什么了。

在2013年,大多数的浏览器支持HTML5和CSS3。作为开发人员,我们正受困于不得不支持旧的桌面浏览器,也就是IE9及其更早的版本。在移动上,我们有我们自己的“IE6”。我们在某种程度上受困于功能型手机[4]和运行Android 2.3的智能手机。但即使是功能型手机浏览器和Android 2.3都支持很多新特性。

要学习编写HTML5、CSS3以及相关的JavaScript API,就要暂时地不去考虑旧的浏览器。我们将一起学习使用这些新技术都能做什么。大多数在现代浏览器中获得了广泛支持的特性,我都已经放到本书的代码示例中了。

CubeeDoo,如图1-1所示,是一个完全使用前端代码编写的记忆游戏。在本书中,我使用的代码示例都将来自于这个游戏以及一个原生iPhone“设置”应用的翻版(如图9-3所示)。该游戏使用HTML5元素构建,其中的一些主题包括使用生成的内容匹配图标。CSS转换、过渡和动画以及渐变、圆角和其他CSS特性都被用于设计游戏的外观和感觉。该游戏也使用SVG、JSON、虽然已过时但却是移动平台支持的webSQL、localStorage、sessionStorage、数据属性(data attribute)、HTML5表单、音频、媒体查询(media query)和数据URI(data URI)。

本书中的代码没有使用任何形式的框架。正如前面提到的,一切都是使用普通的JavaScript、HTML5和CSS手工编写代码的。目标是教给你真正的API,而不是腻子脚本。

在生产中,你可能希望使用腻子脚本,但是要想巧妙地使用这些脚本,你需要理解这些腻子脚本都做了什么。这本书就是要教你这些。

本书涵盖了CSS3、HTML5以及相关的API。重点是在移动的环境下学习这些技术。我们生活在一个移动的世界里,但是并不存在所谓的“移动互联网”。不过都是互联网罢了。但是如果你只聚焦于桌面,你所设计的互联网版本可能无法正常服务于日益增长的仅从移动设备访问互联网的人群。而且,如果你只聚焦于桌面,你将只会对较旧的IE浏览器版本的共同标准感兴趣。

..\16-1116 图\0101.tif{}

图1-1 CubeeDoo记忆游戏截屏

永远不要把一个仅在单一浏览器下正常运行的应用推向生产环境。然而要学习那些新兴技术,忽略掉“旧的”浏览器才可以给自己提供机会去学习去挑战自己,跳出框框进行思考,最终达到巅峰。带上在本书中学到的东西,使用一个单一的浏览器,编写程序直到浏览器能做的极限。不断尝试。你会再一次爱上Web开发的。

你只需要一个浏览器、一个IDE以及一些时间。

1.2 开发工具

在开始开发第一移动Web应用之前,你需要使用最好的“吃饭的家伙”来设置你的开发环境。好消息!你已经有这些工具了。

跟随本书学习,你只需要一台装有文本编辑器和浏览器的电脑。你甚至都不需要一部电话,虽然拥有一个移动设备将会很有帮助。

1.2.1 文本编辑器

你应该使用一个纯文本编辑器或是一个集成开发环境(IDE)进行开发。IDE软件通常包括文本编辑器、调试器以及其他功能或者插件,例如你完成工作可能需要的FTP。人们都有自己首选的IDE。无论什么,选择适合你的就好。我自己的首选是Sublime Text,但是你可以使用TextMate、DreamWeaver、Eclipses、WebStorm或者无论什么你满意就好。虽然我们只需要一个文本编辑器,但是你会发现使用IDE可以帮助我们组织并简化开发过程。我建议你选择一个IDE并且成为它最好的朋友。IDE是非常强大的工具,它使开发过程变得非常愉悦——甚至接近完美。

1.2.2 浏览器

你还需要一个浏览器,我倾向于使用Chrome金丝雀版(Canary[5])进行开发,它是Google Chrome浏览器的测试版。我倾向于该浏览器是因为它的调试器。所有的现代浏览器都有调试器,但是Chrome的调试器是其中的佼佼者,而且金丝雀版的调试器可以让我详细了解和访问所有新的额外特性和附加功能,甚至是在它们进入浏览器正式发布之前。

如果你没有一台苹果电脑,你就无法轻松地开发原生iPhone、iPad或者iPod touch应用。如果你没有Windows 8,开发正式名称为Metro风格的应用也将很难。别担心!就我们正在学习的内容而言,你只需要一个现代浏览器。操作系统或设备都无关紧要。你可以在Windows、Unix、Android手机和平板设备以及Mac等只要你能说得出名字的其他平台上测试本书的所有示例。

IDE和桌面浏览器将是你进行移动Web开发的主要工具。整个开发过程中,移动应用将在桌面浏览器中预览和调试。有一些特性桌面浏览器将无法仿真,包括移动渲染精度、JavaScript性能、内存和带宽限制以及API的可用性。然而,使用其他工具和通过直接在真实或虚拟的设备上进行测试,这些差异是可以被克服的。

虽然你将在你最喜欢的浏览器上愉快地开发,但你的工具箱里还是应该有多种其他可用的浏览器用于测试。你可能需要使用IE,这样可以更简单地测试Windows Phone环境。Safari或Google Chrome将使你能够测试Android、Bada[6]、Blackberry和iOS。你可能还需要Firefox来测试Gecko设备。为了测试所有运行Presto渲染引擎的设备,目前还需要Opera,但是由于Opera Mobile 14是基于Chromium的,而且最新的Opera和Chrome都使用Blink[7],所以你开发所需的浏览器需要进行更新以符合开发所处的环境。

如果你还没有这样做的话,如果你使用Mac的话就下载一个Safari浏览器,如果你使用Windows的话就下载一个最新的IE浏览器。同时在设备上下载Chrome、Firefox和Opera,即使你在使用UNIX。你还可以下载Chrome Canary、Aurora、Opera Next以及WebKit当日最新版(nightly builds)来测试这些主流浏览器的下一个版本。这些是在本书编写时流行的桌面浏览器,但环境是在不断地变化的。

1.2.3 调试工具

浏览器本身就配备有开发工具。开发者工具(developer tools)是浏览器内置工具,使用户可以方便地审查(inspect)和调试代码。使用该工具,你可以针对实时(live)内容操作文档对象模型(DOM)、编辑和调试JavaScript代码、编辑和调试CSS、分析资源请求情况、审查Web内容和Web应用的性能。

开发者工具一般处于隐藏状态,因为除了开发人员之外的大多数用户不会用到这些浏览器特性。移动浏览器经常在设备浏览器中有一些调试功能。这些有限的调试工具通常可以通过设备的设置界面启用。虽然设备级别的调试可能是可用的,但在桌面电脑上通过一个功能更齐备的工具进行应用调试要更简单一些。

1.2.4 桌面式调试器

如果你一直在开发网站的话,不管你做了多长时间,很可能你已经对Firebug[8]、F12、Web Inspector或者DragonFly都比较熟悉了。Firebug是一个Mozilla扩展。F12、Web Inspector和DragonFly分别是IE浏览器、Chrome/Safari和Opera附带的。这些开发者工具都能够让你调试、编辑和监控网站的CSS、HTML、DOM和JavaScript,并使你可以对HTTP请求、本地存储以及内存消耗等方面进行分析。

Firebug可以从getFireBug.com网站获取。Safari的开发者工具可以在Develop菜单下找到,但是需要打开Preferences →Advanced菜单,然后勾选上“Show develop menu in menu bar”才可以使用。在Chrome中,我们可以通过View → Developer → Developer Tools菜单来打开开发者工具。

我们也可以使用Command-Option-I或者Control-快捷键来打开Chrome、Safari、Firebug以及Opera的调试器。F12和Firebug也可以通过键盘的F12打开。这些工具是浏览器上用于调试CSS、JavaScript和HTML的最佳工具。

你可能需要熟悉Web查看器(Inspector)、错误控制台(Error Console)以及用户代理切换器(User Agent Switcher)。这些调试器能够查看Web页面的CSS、HTML、JavaScript、DOM以及文件头。不管你是使用Web Inspector、Firebug、DragonFly、F12、开发者工具,还是使用这些工具的组合,都要了解你的调试工具。你的调试器将成为你的另一个最好的朋友。

很可能你已经有数年使用桌面应用浏览器调试工具的经验,所以我们不会在这里对它们进行深入探讨。然而,即使这些工具你已经使用5年了,你也有可能只是用到了这些工具的一些皮毛而已。我强烈建议你自己能够对它们进行深入研究,每个地方都用鼠标左键和右键点一下试试。我们将在第14章介绍开发者工具的时间轴(Timeline)标签。

移动视口(Mobile viewport)

要模拟移动视口,可以简单地改变桌面浏览器窗口的大小到你想要测试的移动视口的大小。桌面浏览器视口就是浏览器窗口。在移动设备上,视口是指你看到的部分,不一定是绘制到屏幕上的全部,但是改变窗口大小对于你想要做的大部分测试应该是足够了。

在你手动改变浏览器大小时,窗口的大小可能是随机的。在Settings窗口下的Overrides面板(如图1-2所示)中,Chrome开发者工具提供了一些预设的设备大小。点击开发者工具右下角的齿轮图标即可访问Web Inspector的设置窗口。

..\16-1116 图\0102.tif{}

图1-2 Chrome开发者工具中Settings窗口下的Overrides面板

当从用户代理(User Agent)选择菜单选中一个设备时,Chrome就把它的用户代理切换成选中设备的用户代理,同时使用选中设备的大小在浏览器窗口中生成一个视口。这就提供了一个与所选设备的视口同等大小的浏览器视口。

如果你的设备没有被列在列表中,简单地在设备指标(Device metrics)下的两个输入框中输入设备的宽度和高度即可。单击设备指标右边的切换按钮即可在横向模式和纵向模式之间切换。尝试一下ScreenQueri.es网站可以预览准确的设备屏幕尺寸。你也可以启用触控事件(touch-event)仿真,或者使用thumbs.js作为触控事件的腻子脚本。

Chrome开发者工具也可以让你改写地理位置(geolocation)来仿真一个特定的经度和纬度,而且即使你的笔记本电脑装有陀螺仪,也可以仿真一个特定的设备朝向。

在你已经使用桌面式浏览器完成应用的第一阶段开发之后,你可能希望在移动设备上进行测试。在移动设备上进行测试的主要障碍在于无法再使用你已经在桌面电脑上逐渐习惯了的强大的查看器了。这就是为什么远程Web查看器(remote web inspector)是很棒的原因了。

1.2.5 远程调试

有工具可以通过桌面浏览器来远程调试移动浏览器。远程调试器能够让桌面浏览器和外部设备进行通信,从而可以远程执行和捕捉代码。就像常规的调试器一样,使用这些远程调试器也可以查看HTML和CSS,操作DOM和进行实时修改,以及调试脚本。

Opera正在更换浏览器引擎。虽然我不知道将来会提供什么,但Opera自2008年以来一直支持通过桌面Opera Dragonfly调试器进行Opera Mobile浏览器的远程调试。能够远程查看HTML和CSS、更新DOM、加入断点(breakpoint),以及任何其他可以在桌面环境使用Dragonfly完成的事。

WebKi支持通过USB端口进行远程调试起始于Android 4和iOS 6。要使用Chrome 进行远程调试,我们要通过在命令行下使用命令标志(flag)来启动Chrome,而不是通过程序图标:

chrome.exe --remote-debugging-port=9222 --user-data-dir=remote-profile

或者

/Applications/Chromium.app/Contents/MacOS/Chromium --remote-debugging-port=9222

要调试Firefox移动浏览器,需要给Firebug添加Debug API,即以前的Crossfire扩展。

当然,现状总是在不断地变化和改善的。如果对这个议题很感兴趣,请保持关注并随时获取有关浏览器测试和工具工作小组(Browser Testing and Tools Working Group)的远程调试协议(Remote Debugging Protocol)的最新消息。

Android调试工具

Android SDK包含了用于构建、测试和调试Android应用所必需的API类库及开发者工具。我们可以直接使用自己的设备来调试Web应用,或者使用SDK能够创建的仿真器,如图1-3所示。

..\16-1116 图\0103.tif{}

图1-3 运行在OS X上的Android 4.2.2仿真器

你可以从http://developer.android.com/sdk/下载Android SDK,这里提供了Android调试网桥(Android Debug Bridge,ADB)、调试、控制台监控(console monitoring)以及仿真器创建和启动等功能。

在下载包里,找到tool目录然后打开android可以进入adb。ADB提供了各种设备管理功能,包括移动和同步文件到仿真器,在设备或仿真器上运行UNIX shell脚本,并且提供了与已经建立好连接的仿真器和设备进行通信的通用方法。

你愿意的话,也可以使用一个名为ADB plug-in的Chrome扩展。该扩展可以运行一个ADB后台驻留程序,无须下载SDK即可实现移动远程调试。

同样在tools目录下,打开Monitor可以进入Android调试监视器(Android Debug Monitor)。监视器有一个可以用于调试应用的控制台(console),可以查看所有在网站中包含的console.log()的输出。如图1-4所示,所有的设备都被列在左边的设备面板中,同时底部是控制台日志。

..\16-1116 图\0104.tif{}

图1-4 Android调试监视器

监视器打开以后,在Window菜单下有一个Android虚拟设备管理器(Android Virtual Device Manager),如图1-5所示。我们可以通过这个窗口来创新新的仿真测试设备并可以从这里启动它们,就像图1-3那样。

..\16-1116 图\0105.tif{}

图1-5 通过Android虚拟设备管理器可以创建设备仿真器,虽然可供直接选择的设备数量有限,但可以无限制地创建自定义设备配置

weinre

Weinre是远程Web查看器(web inspector remote)的缩写,它是一个功能强大的远程调试工具,可以用来查看和调试JavaScript、HTML5和CSS。Weinre是PhoneGap项目的一部分;既可以在本地使用也可以使用debug.phonegap.com服务。Weinre同时也是Adobe Edge Inspect的基础,我们将在“Adobe Edge Inspect和Ghostlab”小节对其进行详细描述。

Weinre是一个远程调试器,可以让你把当前的移动浏览器窗口和一个远程WebKit查看器的精简版本联系起来。Wernre现在利用的是Node.js和WebSockets[9]

在本书写作之时,它是一个删减版的调试器。Weinre可以实时查看DOM和访问JavaScript控制台,但是没有断点或者堆栈跟踪(stack trace)功能。JavaScript控制台也无法像你希望的那样列出错误信息,所以调试就更加困难,不过还是能用。

使用weinre

Weinre可以通过Java或者JavaScript进行安装。要使用JavaScript进行安装,首先应下载并安装Node.js。Node.js本身包含了npm(node package manager,Node的包管理工具)。在命令行下输入:

npm –g install weinre

来安装weinre。通过在命令行下输入:

weinre

即可启动weinre。

默认情况下weinre服务器将一直运行在localhost:8080上,直到使用Control-C,电脑重启,或者服务被以其他方式中止(killed)才会停止。

要启用调试,需要使用下面的代码给应用程序中加上一个weinre脚本:

<script src="http://localhost:8080/target/target-script-min.js#anonymous">
</script>

在任何桌面环境的WebKit浏览器中,打开http://localhost:8080/client/#anonymous就可以访问调试器。查看器使用一个完整的浏览器窗口显示出来,看起来与Chrome的开发者工具非常类似,但是功能相对有限,而且标签页也要少一些。

在远程(Remote)标签页中,可以看到一列当前可以用于调试的移动浏览器窗口,这些移动浏览器窗口是与你的weinre脚本运行在同一个网络中的。元素(Elements)、资源(Resources)、网络(Network)、时间轴(Timeline)和控制台(Console)标签,如图1-6所示,都与它们在桌面式Web查看器中的样子很像。你也许注意到了,在这个删减版的调试器中没有源代码(Sources)、数据图表(Profiles)和审核(Audits)标签(虽然它们今后可能会被重新加进来)。

..\16-1116 图\0106.tif{}

图1-6 Weinre调试器

Adobe Edge Inspect和Ghostlab

为了简化这些既定的调试过程,并且让前面这些步骤几乎能够自动化,Adobe Edge Inspect能让你以一种与weinre类似的方式进行调试,前者正是基于weinre构建的。这种简化和自动化的实现,是通过不知不觉地为你执行了启动服务、在浏览器中输入URL、给程序添加脚本等任务的方式。

你首先需要在所有的远程设备上安装Adobe Edge Inspect,同时在桌面环境上安装了它的Chrome浏览器扩展。只要你的测试设备和桌面环境都位于同一个网络中,就可以创建一个到设备的连接。

在移动设备中打开Edge后,Edge会提供给你一个验证码(passcode),只有把这个验证码输入到桌面环境的Edge浏览器扩展以后才能够访问设备。要在桌面浏览器中开启Edge,需要首先打开该应用并登录到Adobe。

登录成功后,点击Edge的浏览器扩展图标,如图1-7所示,就会指示浏览器去寻找网络上的设备。找到你的设备之后,就可以把从设备获得的验证码输入到Edge窗口中了。

验证码确保你授权你的电脑和你的移动设备之间相互通信,防止其他意外的电脑来控制你的设备,以及通过操作其他人的手机来控制你的电脑。

一旦你的电脑和一个或多个设备之间的连接建立起来之后,你就可以立即控制在所有移动浏览器上都载入哪个页面。Chrome中当前打开的标签页,将通过Edge Inspect在所有连接的移动设备上被重新检索并显示。

..\16-1116 图\0107.tif{}

图1-7 使用Adobe Edge Inspect连接一台Nexus 7和Google Chrome进行调试

要从设备上调试网页,可从Chrome中或者在设备上跳转到希望调试的页面。在点击Chrome扩展Adobe Edge Inspect菜单时,点击你想要调试的设备边上的< >。Weinre将在本机启动,该设备以及Web页面的标题将作为一个有效链接被列在weinre的Remote标签下面,Remote就是显示在图1-6最左边的标签。

免费版本的Adobe Edge Inspect每次只允许与一个设备进行交互。按月订购版本允许同时控制所有的设备。它还可以协助进行截屏。

如果使用的是Mac而且希望测试多种设备,Ghostlab同样能够让你测试多种设备。如果你正在考虑购买这两个中的一个的话,Ghostlab的一次性收费应该比Adobe Edge的按月订购省钱。

使用Aardwolf调试JavaScript

如果你主要关注的问题是JavaScript的调试,你可以试用一下Aardwolf(土狼)。Aardwolf是一个远程JavaScript调试器,使用Aardwolf可以运行和捕获JavaScript代码。Aardwolf的工作原理是在服务器上重写你的代码并添加调试钩子(debugging hook)。与weinre使用一个Node.js后台类似,它采用同步XHR[10]调用来实现在断点处中断运行。你可以使用Aardwolf远程对代码进行单步调试,同时支持查看对象(objects)、断点和调用堆栈(call stacks)。

BlackBerry 10调试器

虽然weinre很棒,但是Blackberry 10提供的调试器功能更强大。

与weinre一样,BlackBerry浏览器也使用客户端服务器架构来实现Web查看器功能。与weinre不同的是,虽然都使用客户端服务器架构,但是BlackBerry浏览器在这里充当的是Web服务器的角色,然后通过USB或者WiFi连接之上的HTTP为Web页面提供服务。你可以在桌面式浏览器中远程查看内容。可以使用在同一个WiFi网络下的任意基于WebKit内核的桌面式浏览器,只要跳转到与BlackBerry浏览器使用的同样IP地址和端口即可开始查看代码。

要使用查看器,必须在BlackBerry浏览器的选项中启用调试功能。一旦启用了Web查看器,该浏览器或者称作应用就会显示出它将用于提供内容服务的IP地址和端口号。

要在BlackBerry 10的浏览器应用中启用Web查看器,可从顶部边框向下滑动以显示浏览器菜单栏。点击“设置”(settings)图标,再点击“开发者工具”(Developer Tools)来开启Web查看器。如果你使用的是平板设备,相应地可以在“选项”(Options)→“隐私与安全”(Privacy & Security)下面找到它。浏览器会显示从桌面式浏览器连接所需要的IP地址和端口号。如果出现提示的话,请输入设备密码以完成启用过程。点击“返回”(Back)可以保存设置并返回到浏览器窗口。你现在可以打开一个到BlackBerry浏览器的连接并远程查看当前显示页面的内容了。

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,可以让你使用上百种的移动或桌面浏览器和操作系统平台进行测试。

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

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


[1] IE6在2001年发布时是最前沿的,几乎垄断了当时的浏览器市场份额,缺乏竞争,然后就再也没有升级过。

[2] 译者注:polyfill这个词源于国外的一个家装产品Polyfilla(是个商标),是一种用作建筑物细微修补的灰浆,也就是我们常说的“腻子”。用在浏览器里指的是“开发者自己实现的一段代码,用于在旧版浏览器上提供标准的HTML5 JavaScript API支持”,这样应用开发不用管是在新的还是旧的浏览器上都可以调用统一接口。

[3] 译者注:Google Chrome浏览器首次发布是在2008年9月。来源:http://en.wikipedia.org/wiki/Google_Chrome

[4] 译者注:功能型手机指的是相对于智能手机的普通手机。

[5] 译者注:Google之所以称为“金丝雀”版,是因为金丝雀曾在矿井中被用于早期预警,而该版本的浏览器在某种程度上也起到相似的作用。金丝雀版采集到的反馈数据,特别是崩溃统计可以帮助Google更快地找到并修复问题。来源:http://ask.zol.com.cn/q/18400.html

[6] 译者注:Bada原本是由三星电子自行开发的移动操作系统,2013年2月已经停止开发,被整合进三星新的移动操作系统Tizen了。

[7] Blink是WebKit的WebCore组件在revision 147503时的一个分支。它是自版本28以来Chrome中的浏览器引擎,Opera从版本15开始使用Blink,并且其他基于Chromium的浏览器也开始使用。

[8] Firefox本身配备了Web开发者工具,但是大部分开发人员使用Firebug。Firebug是Firefox的一个附加组件。

[9] 起初是基于Java的。在WebSockets之前,它利用的是CORS、JSON和XHR。

[10] 译者注:XMLHttpRequest的缩写,详见http://en.wikipedia.org/wiki/XMLHttpRequest

[11] http://bit.ly/HaW2PVhttp://bit.ly/1diKHLb

[12] http://developer.android.com/about/dashboards/index.html

[13] 译者注:WebOS已被LG从惠普收购,目前大量应用于LG TV上。

目录

相关技术