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,所以,这个软件下载要翻墙;第一次使用时软件会自动下载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关机

参考文章:原文链接

posted @ 2016-09-09 14:07 lion1ou 阅读(...) 评论(...) 编辑 收藏