如何在移动设备上调试 PhoneGap 程序

原文地址：

http://www.ibm.com/developerworks/cn/opensource/os-cn-phonegap-debug/?cmp=dwskl&cpb=dw&ct=dwcon&cr=cn_swb&ccy=cn#author1

在移动设备上调试 PhoneGap 程序

PhoneGap 作为一个优秀的移动开发框架，可以使用 HTM5 与 CSS3 快速开发出本地移动应用程序。然而，移动开发工具中（如 Xcode 与 Eclipse），对 JavaScript 的调试却没有很好的支持。本文将介绍几种调试方法与工具，解决移动平台上的 JavaScript 调试难题。

1 评论：

赖 勤毅, 软件开发工程师, 恒生电子

2012 年 9 月 27 日

• 内容

背景

PhoneGap 作为一个目标远大的移动开发框架，可以让开发人员专注于业务应用开发，并让应用程序实现一次开发，多个移动平台运行。现在 PhoneGap 已经被纳入 Apache 基金会的 Cordova 项目进行孵化，很多旧的文档与插件可能已经过时。本文将使用 Xcode 来演示 PhoneGap 开发 iOS 应用程序的调试问题，其它平台的开发工具与调试方法也应该如出一辙。

回页首

准备工作

开发工具准备

在 iOS 平台上做开发 , 需要安装 XCode 作为开发工具，你可以打开 AppStore 搜索 Xcode，获取最新版本的开发工具。如果需要在真机上调试，那还需要 Apple iOS 设备和 iOS 开发者证书。

安装 PhoneGap 开发环境

安装 PhoneGap 非常简单，你只要从 官方下载PhoneGap 安装文件并解压，打开文件 lib/ios/Cordova-1.x.x.dmg 进行安装。

开发 PhoneGap 程序

打开 XCode, 新建项目时 , 选择 Application 下面的 Cordova-based Application 模板 ,

图 1. 选择项目模板

点击下一步，注意：不要选择项目的 Use Automatic Reference Counting （ARC）特性。

图 2. 不使用 ARC

最后，将 www 拖入项目中，这就完成了一个简单的 PhoneGap 应用。最后，你可以使用 iOS 模拟器运行这个项目。如果上面过程遇到问题，可以参阅更加详细的 入门步骤。

更多的 PhoneGap API

PhoneGap 包含很多本地接口调用，其中主要包括加速感应、摄像头、录像录音、联系人、通知提醒、文件存储等。官方文档已经罗列了所有的 API 以及简单的代码示例。不过，Apache Cordova 还没有用户组的邮件列表，只有开发者和贡献者的邮件列表，在 IRC 的 #phonegap 频道与 Google Group讨论组里，你可以找到活跃的用户和许多有用的帮助（请参阅 :讨论部分）。

回页首

代理模式调试技术

由于移动设备的硬件与架构限制，无法像 PC 一样在宿主机器上安装测试工具或运行辅助脚本。特别是在 iOS 平台上，XCode 与模拟器只能对 Objective-C 进行调试；对于 JavaScript，只能使用 alert 或者 console.log 函数进行跟踪，这让 PhoneGap 的开发人员苦不堪言。

通过代理模式，使用 HTTP 协议发送命令，可以完成远程调试工作。在移动端只需要注入 JavaScript 目标脚本，不断轮询访问代理服务器；客户端使用 PC 浏览器连接代理服务器，将需要执行的命令发给代理服务器。通过代理服务器中转，PC 浏览器就可移动端的应用程序进行命令与数据传输。

图 3. 代理模式

Weinre就是使用代理技术实现的调试工具。它不仅可以用于 PhoneGap 应用程序调试，也可以用于移动版的网页调试。

安装运行 weinre

首先，下载 nodejs 官方的安装包 node-v0.x.pkg 进行安装。然后，以管理员模式打开 Terminal，通过下面的命令安装 weinre：

清单 1. 安装 weinre

 sudo npm -g install weinre

使用下面的命令行运行 weinre：

清单 2. 运行 weinre

 weinre --httpPort 8080 --boundHost 192.168.1.101

其中 192.168.1.101 为本地网络 IP 地址。

在项目中使用 weinre

打开“Supporting Files/Cordova.plist”文件，将当前 IP 地址作为 whitelist 添加到 ExternalHost 中。

图 4. 添加 whitelist

在 index.html 中链接代码：

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

启动 iOS 模拟器，如果 XCode 调试窗口出现以下错误，请检查 ExternalHost 配置和网络设置（确保绕过网络代理服务器，可以访问 IP）。

 ERROR whitelist rejection: url='http://192.168.1.101:8080/target/target-script-min.js'

打开 Chrome 浏览器，访问 http://192.168.1.101:8080/，可以查看概要文档与辅助代码。

打开调试链接：http://192.168.1.101:8080/client/#anonymous，就会看到 Remote 选项卡，Targets 列表中会列出所有远程的目标应用，如果连接成功，链接将显示成绿色。

图 5. PC 端界面

Elements 选项卡中，可以双击修改 dom 属性，并且在模拟器中可以立即显示修改效果。

图 6. 修改 dom

Resources 选项卡中，可以查看和修改所有的数据库、表、本地存储和会话存储。选中一个数据库，可以执行相应的 SQL。

图 7. 存储和数据库

Console 选项卡中，可以执行 JavaScript 脚本，模拟器会立即响应执行结果。如果有一些日子或者错误，也会显示在这里。

图 8. 终端命令行

这些功能对于熟悉 Web 调试的开发人员不过是老生常谈。与桌面浏览器调试相比，Weinre 还缺少 JavaScript 脚本动态调试功能。Console 选项卡的脚本执行只能对全局变量进行修改，无法对每个方法内部设定断点进行调试，这需要脚本引擎提供远程调试功能，目前在 iOS 平台上还没有实现。

回页首

Mock 模式调试技术

由于 Weinre 无法实现 JavaScript 动态调试，而 PC 版本的浏览器却有非常强大的调试功能，因此可以隔离 PhoneGap API，重写一套 Mock 对象来模拟 PhoneGap 对象。这样 , 就可以使用 PC 浏览器调试应用程序了。

在 WebKit 的浏览器中 ( 如 Safari、Chrome 等 )，都存在 Web SQL Database、Storage 等 HTML5 标准 API，但是没有通讯录、提醒震动、文件操作等移动设备 API，相应的这些接口需要实现一套 Mock API 来模拟移动设备的特性。

因此，需要重写部分 PhoneGap API，便可以实现桌面模拟调试。Phonegap-desktop 项目已经完成了大部分 Mock API，只需要将 PhoneGap 的引入的文件 cordova.js 替换为 phonegap-desktop.js，就可以在桌面上调试 PhoneGap 应用程序。

如果项目中存在 PhoneGap 插件，也需要相应地重写一套 desktop API。如果是 Native UI 的插件，可以使用 div 元素来模拟，如果是数据交互，可以使用静态 JSON 数据来代替。

访问 phonegap-desktop 的 demo，你可以查看大部分 API 在桌面上的模拟效果。

图 9. phonegap-desktop-demo

回页首

未来之路：远程调试

上面两种调试方法各有千秋，但都不是完美至极。对开发人员来说，如果能够一目了然的看见每个变量和堆栈那是再好不过了。目前 WebKit 项目已经发布了 远程调试协议 v1.0，并且 BlackBerry PlayBook 和 Android 平台上的 Chrome 已经支持远程调试。Google 的 V8 引擎有自己的 远程调试协议。但在 iOS 平台上还没有可用的远程调试方法，有些开发人员也会 另辟蹊径，变相让 XCode 支持 JavaScript 的调试功能。

参考资料

学习

• 参考 PhoneGap 官方文档。
  
  
• 参考 Weinre 官方文档。
  
  
• 参考 更多 PhoneGap 调试窍门。
  
  
• 加入 Google Groups 讨论组。