内容


在移动设备上调试 PhoneGap 程序

Comments

背景

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. 选择项目模板
图 1. 选择项目模板
图 1. 选择项目模板

点击下一步,注意:不要选择项目的 Use Automatic Reference Counting (ARC)特性。

图 2. 不使用 ARC
图 2. 不使用 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. 代理模式
图 3. 代理模式
图 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
图 4. 添加 whitelist
图 4. 添加 whitelist

在 index.html 中链接代码:

 <script src="//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 端界面
图 5. PC 端界面
图 5. PC 端界面

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

图 6. 修改 dom
图 6. 修改 dom
图 6. 修改 dom

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

图 7. 存储和数据库
图 7. 存储和数据库
图 7. 存储和数据库

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

图 8. 终端命令行
图 8. 终端命令行
图 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
图 9. phonegap-desktop-demo
图 9. phonegap-desktop-demo

未来之路:远程调试

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


相关主题


评论

添加或订阅评论,请先登录注册

static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=10
Zone=Open source
ArticleID=837831
ArticleTitle=在移动设备上调试 PhoneGap 程序
publish-date=09272012