HTML5移动应用开发环境
跨平台移动开发主要是基于HTML5来开发软件界面和核心业务逻辑，因此，一套完善的基于移动平台的HTML5开发环境十分必要。本文主要聚焦于以下四个方面：
- JavaScript和jQuery Mobile的编辑器
- HTML5各元素的Inspector
- JavaScript远程断点调试
- 移动平台JavaScript开发模式
1. JavaScript和jQuery Mobile的编辑器
市面上有众多JavaScript编辑器，每个人都有自己的偏好，这里推荐三款比较出色的：
- Aptana Studio：Eclipse插件更新地址为 http://download.aptana.com/studio3/plugin/install。它的优点是轻量级，可与Eclipse集成，代码自动完成和JS语法纠错功能出色，整体风格类似VI，适合极客风格的开发者。
- Dreamweaver CS6：官方地址为 http://success.adobe.com/en/na/sem/products/dreamweaver.html。它是功能强大的HTML5开发环境，也是除官方在线编辑器外，唯一支持jQuery Mobile所见即所得的开发工具。在进行JavaScript、CSS和HTML开发时非常顺手，不过其缺点是需要付费。
- appMobi：官方地址为 http://www.appmobi.com/。该工具非常适合在不同分辨率下进行调试，其酷炫的界面也很适合用于演示，涵盖代码编辑和模拟器演示等功能。
关于这些工具的具体安装和使用方法，建议亲自体验，这里不再赘述。
2. HTML5各元素的Inspector
在桌面系统的浏览器中，有许多用于检查HTML5元素的工具，例如Firefox的Firebug、Chrome的开发者工具、IE的http watch和IE自带的调试工具。但在移动平台上，尤其是基于PhoneGap内置的WebView进行开发时，此类工具并不常见。这里推荐PhoneGap官方提到过的工具：Weinre。
Weinre通过搭建一个服务器，将调试器与设备连接起来。从2.0版本之后，就没有Java版本了，因此只能通过NPM（Node.js的包管理工具，类似于Java的Maven）来安装。安装Node.js后，NPM会自动安装。之后，安装Weinre非常简单，只需执行以下命令：
npm install weinre -g
在Windows平台上，如果没有进行额外配置，Weinre会安装在 C:\Users\***\AppData\Roaming\npm\node_modules\weinre\。然后，启动服务器：
node path-to-weinre-node/weinre --boundHost -all- --httpPort 8082
使用 -all- 是为了在 0.0.0.0 上打开端口8082，避免非本地设备无法远程请求该端口。接着，在需要调试的页面中添加Weinre的代理：
<script src="http://computer-ip:8082/target/target-script-min.js#anonymous"></script>
这里的 computer-ip 是设备能够连接到主机的地址。关于设备与主机的网络连接问题，将在后续文章中详细讨论。之后，在设备上启动应用程序（以Android为例，iOS同理）。启动后，打开基于WebKit内核的浏览器（如Chrome），访问 http://localhost:8082/client/#anonymous。如果前面的步骤都正确，就可以在 target 下看到设备的连接信息，点击后连接会变绿，这表示可以对远程设备进行调试。不过，Weinre缺少远程JS断点调试功能，后续会介绍其他工具来实现该功能。
3. JavaScript远程断点调试
推荐使用Aardwolf（https://github.com/lexandera/Aardwolf/）来实现JavaScript远程断点调试功能。它的原理与Weinre类似，也是通过搭建服务器来对设备进行远程调试。下载Aardwolf后，启动服务器：
node Aardwolf_install_folder/app.js -h -d web_app_path
其中，web_app_path 是需要调试的Web应用所在的路径，该路径下包含需要调试的JS文件。
然后，类似于Weinre，需要在HTML文件中添加Aardwolf代理：
<script src="http://computer-ip:8500/aardwolf.js"></script>
<script src="http://computer-ip:8500/js/main.js"></script>
aardwolf.js 是系统JS文件，js/main.js 是需要调试的JS文件。经过Aardwolf处理后，main.js 具备了被调试的能力。之后，启动应用程序，就可以在 http://localhost:8000 上进行调试。
4. 移动平台JavaScript开发模式
虽然上述方法都可以在设备上调试HTML5应用，但全程在设备上开发会比较繁琐。因此，建议先在桌面浏览器上完成主要的界面和逻辑开发。除了PhoneGap与设备的结合点之外，其他部分与桌面浏览器基本一致。可以先开发一个Chrome APP版本，重点完成该版本后，再将其移植到其他平台，这样在其他平台上只需调试与设备相关的部分。关于Chrome APP的相关内容，将在后续文章中单独讨论。