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

connected.png

用前注意

  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界面：

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关机

参考文章：原文链接

posted @ 2016-09-09 14:07  lion1ou  阅读(6584)  评论(0)  编辑  收藏  举报