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

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的设置窗口。

当从用户代理（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所示。

你可以从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所示，所有的设备都被列在左边的设备面板中，同时底部是控制台日志。

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

图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）标签（虽然它们今后可能会被重新加进来）。
<div style="text-align: center"><img src="https://yqfile.alicdn.com/3062a2754a88e0ee79452e91f8524dbab85c75c2.png" width="" height="">
</div>

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在所有连接的移动设备上被重新检索并显示。

图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浏览器的连接并远程查看当前显示页面的内容了。