cordova/phoneGap 开发调试工具

原文地址

1、前言

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

2、Ripple Emulate安装和使用

Apache Ripple主页：

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

安装：

npm install -g ripple-emulator

使用方法：

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

模拟项目失败可能的缘由

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

3、GapDebug安装和使用

很是惊喜的发现了这个工具，能够侦听安装在设备上的app，而且进行调试。

用前注意

1. 国外的软件，又涉及到google，因此，这个软件下载要FQ；第一次使用时软件会自动下载android debug tool，从google下载，因此也要FQ。若是翻不动墙，又不能经过万能的互联网找到解决方法，那能够不用再往下看了。
2. 亲测的是最新版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

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

没有链接设备的GapDebug界面：

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

1. 使用USB数据线链接你的设备到你的工做站（workstation）。（USB线链接手机和你的电脑）

2. 容许你的工做站做为一个信任设备。最初你的设备链接你的工做站时，你可能收到提示工做站否是可信任的链接源。选择OK或Trust。

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

USB线链接Nexus7 Android设备

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

1. 在你的设备上，开始你想作的调试。app将呈如今你的设备面板的设备详情下方。
   QRConference Buddy app在设备上的呈现

1. 查看链接设备和可用的app。选择一个app在一个新的追踪视图（Inspector View）开始一个调试对话。
   调试中的安卓appQR Conference Buddy

用户界面

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

实时调试（Instant Debugging）

app能够作实时调试，GapDebug自动检测app的运行并当即开始响应。使用这个图标切换实时调试。

安装一个app到你的设备

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

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

安装app

1. 点击图标

2. 选择你要安装的IOS（.ipa）或android（.apk）文件

3. 当安装完成后设备面板上多出一条app提示

使用拖拽文件安装

1. 打开你的文件所在的文件夹

2. 将文件拖拽到设备面板上

1. 安装完成后会出现一个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

1. 点击图标的图标

2. 从菜单中单击要运行的app。菜单关闭后app将当即运行

调试多个app

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

当你选择第二个app调试时，一个新的选项卡打开。单击能够切换到另外一个选项卡。两个选项卡是蓝色时由于他们同时打开的是一个调试实例。不管如何，当前使用的是高亮的，其余的是灰色的。

设备视图截屏

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

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

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

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

下载和查看日志

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

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

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

清除日志

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

重启和设备关机

Restart重启，Power Off关机

参考文章：原文连接