By Alex
/ in
0
使用GapDebug调试Phonegap应用
GapDebug简介
一个移动混合应用（hybrid mobile apps）调试工具，它是一个Eclipse RCP应用，集成了Chrome Dev Tools（用于Android调试）和Webkit Inspector（用于iOS调试）。GapDeug的主要界面在Chrome浏览器中运行。
GapDebug的价值在于，它整合了很多原先需要手工执行的繁琐步骤。GapDebug可以自动的识别设备、进行安装与配置、启动应用并执行调试，并且同时支持iOS、Android设备的远程调试。
联合使用GapDebug和Phonegap Developer App，可以进行无缝调试：包括DOM结构检查、断点、实时代码更新。
前置条件
要让GapDebug正确运行，必须满足以下条件：
| Android | iOS | |
| 移动设备 |
|
|
| 移动应用程序 | 启用调试 | 应用程序必须使用iOS开发者证书和Provisioning Profile签名 |
| 工作站 |
|
|
移动端配置
iOS
启用Web Inspector
Settings ⇨ Safari ⇨ Advanced ⇨ Web Inspector，滑动打开
Android
启用USB调试
Settings ⇨ Developer Options ⇨ 勾线 USB Debugging
允许应用调试
以Phonegap应用为例，编辑platforms/android/AndroidManifest.xml，添加：
<manifest>
....
<application android:debuggable="true" />
....
</manifest>
如果使用Phonegap Developer App，则不需要上述设置。
工作站配置
- 下载并安装GapDebug：https://www.genuitec.com/products/gapdebug
- 下载并安装Chromium，推荐绿色版：https://sourceforge.net/projects/crportable/
GapDebug配置
打开GapDebug，系统托盘中右键GapDebug图标 ⇨ Settings：
| 设置路径 | 说明 |
| Chrome and Server |
Server Setting：
Google Chrome Settings：
|
| General |
Debug web browser pages：勾选后，可以调试手机上的Safari或者Chrome浏览器 Start app after installation：勾选后，新安装的应用程序会自动启动 |
调试移动应用
开始调试
- 系统托盘中右键GapDebug图标 ⇨ Open Debug Tools，在Chromium浏览器中打开GapDebug主界面
- 打开模拟器，或者通过USB电缆连接设备。如果设备提示Allow USB debugging（Android）或者Trust This Computer（iOS），点击确定
- 最好关闭设备的自动锁定或者睡眠功能
- 在GapDebug左侧面板，会出现设备图标。并显示设备设备IP地址和ADB端口，以及设备名称和固件版本信息
- 点击左侧面板上“奔跑的小人”图标，会显示设备上可远程调试的应用程序列表。点击其中一个应用程序，即开始启动并开始调试。第一次调试某个新的设备时，可能需要到外网下载一些文件，应保证网络畅通
- 右侧面板出现基于Chrome Dev Tools或者Webkit Inspector的调试界面
用户界面
下面的是调试Android Phonegap应用时的截图：
左侧面板，设备上方有四个按钮，分别用于：
- 启动某个设备应用程序以调试
- 截取设备屏幕
- 安装新的应用程序到设备。另外，直接拖拽APK/IPA文件到设备图标上，也可以进行安装
- 隐藏/显示应用程序列表
左侧面板，应用程序列表，每个条目对应一个正在运行的移动Web应用程序。条目右侧有一个两个图标：
- 小圆点，当前正被调试的应用程序的小圆点图标变亮
，点击后，可以启用即时调试（Instant Debugging）—— 应用程序启动后GapDebug会自动检测到，并立即启动一个Debugger附着到此应用程序上。
可以看到，右侧第一个选项卡就是Chrome Dev Tools，相信Web开发者都很熟悉：
- 点击菜单栏放大镜按钮，可以Inspect DOM元素，应用程序界面会和你的操作互动，就像调试普通网页时一样
- 点击放大镜旁边的手机按钮，可以进行屏幕转播（Screencast），即在Gapdebug界面中实时显示手机UI。此UI支持用户交互
Leave a Reply