一、前言

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，并且进行调试。

006tNbRwgw1f6qxy2sqdvj30ib0avdgy

用前注意

  1. 国外的软件，又涉及到 google，所以，这个软件下载要翻墙；第一次使用时软件会自动下载 android debug tool，从 google 下载，所以也要翻墙。如果翻不动墙，又不能通过万能的互联网找到解决方法，那可以不用再往下看了。
  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 界面：

ui-no-devices-v2.png

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

openGapdebug.jpg

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

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

android-ios-trust-50 (1).jpg

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

device-panel-connected-android-dev-only-v22.png

USB 线连接 Nexus7 Android 设备

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

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

qr-conf-debug1.png

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

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

user-interface-ios2.png

screencast1_v22.png

实时调试（Instant Debugging）

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

安装一个 app 到你的设备

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

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

安装 app

  1. 点击图标

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

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

app_installed_notice_v2.png

使用拖拽文件安装

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

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

drag_and_drop_install_v2.png

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

自动和手动运行

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

Launch-After-Installation 设置

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

general-settings-start-app.png

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

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

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

Android 设备上的手动运行 app

  1. 点击图标的图标

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

run-app-menu12.png

调试多个 app

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

active_app_v21.png

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

multiple_active_apps2_v21.png

设备视图截屏

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

snapshot-pgdevapp1.png

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

snap-settings.png

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

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

下载和查看日志

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

syslog-menu.png

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

syslog-settings.png

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

清除日志

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

syslog-clear-menu.png

重启和设备关机

restart-shutdown-menu.png

Restart 重启，Power Off 关机

##参考

文章