cordova/phoneGap 开发调试工具

原文地址

一、前言

Ripple Emulate：使用Google模拟器，可以帮到大部分的调试，除了需要调用手机设备方面的功能除外。GapDebug：真机安装apk，电脑端和真机端同步调试，适用的项目phonegap/cordova/ionic。

二、Ripple Emulate安装和使用

Apache Ripple主页：

http://ripple.incubator.apache.org/

安装：

npm install -g ripple-emulator

使用方法：

项目路径执行命令行：ripple emulate ；会在默认浏览器打开网页版的模拟器。

模拟项目失败可能的原因

运行的路径内没有支持的项目。比如没有index.html文件。如果是cordova项目可能没找到platform的文件夹，这时会有cordova相关报错。

三、GapDebug安装和使用

非常惊喜的发现了这个工具，可以侦听安装在设备上的app，并且进行调试。

用前注意

国外的软件，又涉及到google，所以，这个软件下载要翻墙；第一次使用时软件会自动下载android debug tool，从google下载，所以也要翻墙。如果翻不动墙，又不能通过万能的互联网找到解决方法，那可以不用再往下看了。
亲测的是最新版2.1，可以用。之前用过网上找的1.0，连接不上手机

正文开始

(下面摘自官方指南并翻译)

调试移动app

使用GapDebug是非常简单的，只需要连接手机，然后就可用起来！

移动端配置

iOS：启用Web Inspector

Settings ⇨ Safari ⇨ Advanced ⇨ Web Inspector，滑动打开
Android：启用USB调试

Settings ⇨ Developer Options ⇨ 勾线 USB Debugging
允许APP应用调试

以Phonegap应用为例，编辑 platforms/android/AndroidManifest.xml，添加：
```
<manifest>

     ....

     <application android:debuggable="true" />

     ....

</manifest>
```
如果使用Phonegap Developer App，则不需要上述设置。

打开GapDebug

从windows开始菜单或Mac Finder打开GapDebug。

没有连接设备的GapDebug界面：

运行后，GapDebug在你的系统上会产生一个调起快捷菜单的图标，windows是状态栏右侧的托盘，Mac在上面的通知栏上。从Windows系统托盘打开的用户界面：

使用USB数据线连接你的设备到你的工作站（workstation）。（USB线连接手机和你的电脑）
允许你的工作站作为一个信任设备。最初你的设备连接你的工作站时，你可能收到提示工作站否是可信任的连接源。选择OK或Trust。

在设备界面的设备信息展示。

USB线连接Nexus7 Android设备

提示：我们建议你的设备不使用自动锁屏或休眠设置防止没有响应,并且需要开启开发者模式中的USB调试功能。

在你的设备上，开始你想做的调试。app将呈现在你的设备面板的设备详情下方。

QRConference Buddy app在设备上的呈现

查看连接设备和可用的app。选择一个app在一个新的追踪视图（Inspector View）开始一个调试对话。

调试中的安卓appQR Conference Buddy

用户界面

界面和浏览器的开发者工具都大同小异，很容易上手。

实时调试（Instant Debugging）

app可以做实时调试，GapDebug自动检测app的运行并立即开始响应。使用这个图标切换实时调试。

安装一个app到你的设备

在你的操作系统里你能够使用GapDebug快捷地安装一个或多个app文件到你的设备。有两个方法安装app——使用安装app图标或拖拽安装文件到你连接的设备上。安装后app会自动运行，看自动运行设置

注意：安装到Androi设备前，设置设备允许安装Google应用商店以外的资源（国产的手机根本不用担心这个）。

安装app

点击图标
选择你要安装的IOS（.ipa）或android（.apk）文件
当安装完成后设备面板上多出一条app提示

使用拖拽文件安装

打开你的文件所在的文件夹
将文件拖拽到设备面板上

安装完成后会出现一个app提示。

自动和手动运行

GapDebug能自动运行安卓或IOS设备上最新安装的app。另外GapDebug支持手动开启app。

Launch-After-Installation设置

app安装后GapDebug能立即运行它。这个功能节约了从安装app到调试不受干扰的时间。控制app运行功能下图有两个设置项。

“Start app after installation”项默认是勾上的。通过GapDebug安装的app会自动在你的设备上启动。

“Only start app if previously running”项允许你指定app运行，仅限运行过或更新过的已安装app。

注意：在IOS设备上运行app需要做其他设置。详情去看IOS设置。

Android设备上的手动运行app

点击图标的图标
从菜单中单击要运行的app。菜单关闭后app将立即运行

调试多个app

你可能需要同时调试多个app。例如，你可能同时调试一个app的IOS和Android两个版本。当你选择设备面板上的一个app时，调试选项卡打开。还有，当前激活的选项卡是蓝色的。

当你选择第二个app调试时，一个新的选项卡打开。单击可以切换到另一个选项卡。两个选项卡是蓝色时因为他们同时打开的是一个调试实例。无论如何，当前使用的是高亮的，其他的是灰色的。

设备视图截屏

点击Snapshot图标为设备视图截屏

从Settings设置你想如何操作截图

下载、查看和清除设备日志(sysylog)

一个设备系统日志包含主要设备和应用事件，能够帮助诊断应用或系统级别错误。

下载和查看日志

操作如图，点击菜单的Syslog选项

从Settings中设置你想对日志的操作

选项1，下载；选项2，打开；选项3，下载并打开

清除日志

高亮的Clear Syslog项点击后清除日志

重启和设备关机

Restart重启，Power Off关机

参考文章：原文链接