Menu

  • Home
  • Work
    • Cloud
      • Virtualization
      • IaaS
      • PaaS
    • Java
    • Go
    • C
    • C++
    • JavaScript
    • PHP
    • Python
    • Architecture
    • Others
      • Assembly
      • Ruby
      • Perl
      • Lua
      • Rust
      • XML
      • Network
      • IoT
      • GIS
      • Algorithm
      • AI
      • Math
      • RE
      • Graphic
    • OS
      • Linux
      • Windows
      • Mac OS X
    • BigData
    • Database
      • MySQL
      • Oracle
    • Mobile
      • Android
      • IOS
    • Web
      • HTML
      • CSS
  • Life
    • Cooking
    • Travel
    • Gardening
  • Gallery
  • Video
  • Music
  • Essay
  • Home
  • Work
    • Cloud
      • Virtualization
      • IaaS
      • PaaS
    • Java
    • Go
    • C
    • C++
    • JavaScript
    • PHP
    • Python
    • Architecture
    • Others
      • Assembly
      • Ruby
      • Perl
      • Lua
      • Rust
      • XML
      • Network
      • IoT
      • GIS
      • Algorithm
      • AI
      • Math
      • RE
      • Graphic
    • OS
      • Linux
      • Windows
      • Mac OS X
    • BigData
    • Database
      • MySQL
      • Oracle
    • Mobile
      • Android
      • IOS
    • Web
      • HTML
      • CSS
  • Life
    • Cooking
    • Travel
    • Gardening
  • Gallery
  • Video
  • Music
  • Essay

使用GapDebug调试Phonegap应用

19
Feb
2016

使用GapDebug调试Phonegap应用

By Alex
/ in Mobile
/ tags 远程调试
0 Comments
GapDebug简介

一个移动混合应用(hybrid mobile apps)调试工具,它是一个Eclipse RCP应用,集成了Chrome Dev Tools(用于Android调试)和Webkit Inspector(用于iOS调试)。GapDeug的主要界面在Chrome浏览器中运行。

GapDebug的价值在于,它整合了很多原先需要手工执行的繁琐步骤。GapDebug可以自动的识别设备、进行安装与配置、启动应用并执行调试,并且同时支持iOS、Android设备的远程调试。

联合使用GapDebug和Phonegap Developer App,可以进行无缝调试:包括DOM结构检查、断点、实时代码更新。

前置条件

要让GapDebug正确运行,必须满足以下条件:

  Android iOS
移动设备
  1.  Android 4.4+或者更高版本
  2. 推荐使用 Genymotion模拟器
  3. 启用USB调试
  1.  iOS 7+
  2. 启用Web Inspector
 移动应用程序  启用调试  应用程序必须使用iOS开发者证书和Provisioning Profile签名
工作站 
  1.  Android驱动(Windows)
  2. Chrome/Chromium浏览器
  1.  安装iTunes
  2. Chrome/Chromium浏览器
移动端配置 
iOS
启用Web Inspector

Settings ⇨ Safari ⇨ Advanced ⇨ Web Inspector,滑动打开

Android
启用USB调试

Settings ⇨ Developer Options ⇨ 勾线 USB Debugging

允许应用调试

以Phonegap应用为例,编辑 platforms/android/AndroidManifest.xml,添加:

XHTML
1
2
3
4
5
<manifest>
     ....
     <application android:debuggable="true" />
     ....
</manifest>

如果使用Phonegap Developer App,则不需要上述设置。 

工作站配置
  1. 下载并安装GapDebug:https://www.genuitec.com/products/gapdebug
  2. 下载并安装Chromium,推荐绿色版:https://sourceforge.net/projects/crportable/
GapDebug配置

打开GapDebug,系统托盘中右键GapDebug图标 ⇨ Settings:

设置路径 说明
Chrome and Server

Server Setting:

  1. 修改GapDebug的Web服务的端口,指定一个空闲端口

Google Chrome Settings:

  1. 定位到新下载的Chromium绿色版
  2. 取消勾选“Launch the debugger in Google Chrome application mode”
General

Debug web browser pages:勾选后,可以调试手机上的Safari或者Chrome浏览器

Start app after installation:勾选后,新安装的应用程序会自动启动

调试移动应用
开始调试
  1. 系统托盘中右键GapDebug图标 ⇨ Open Debug Tools,在Chromium浏览器中打开GapDebug主界面
  2. 打开模拟器,或者通过USB电缆连接设备。如果设备提示Allow USB debugging(Android)或者Trust This Computer(iOS),点击确定
  3. 最好关闭设备的自动锁定或者睡眠功能
  4. 在GapDebug左侧面板,会出现设备图标。并显示设备设备IP地址和ADB端口,以及设备名称和固件版本信息
  5. 点击左侧面板上“奔跑的小人”图标,会显示设备上可远程调试的应用程序列表。点击其中一个应用程序,即开始启动并开始调试。第一次调试某个新的设备时,可能需要到外网下载一些文件,应保证网络畅通
  6. 右侧面板出现基于Chrome Dev Tools或者Webkit Inspector的调试界面
用户界面

下面的是调试Android Phonegap应用时的截图:gapdebug-ui

左侧面板,设备上方有四个按钮,分别用于:

  1. 启动某个设备应用程序以调试
  2. 截取设备屏幕
  3. 安装新的应用程序到设备。另外,直接拖拽APK/IPA文件到设备图标上,也可以进行安装
  4. 隐藏/显示应用程序列表

左侧面板,应用程序列表,每个条目对应一个正在运行的移动Web应用程序。条目右侧有一个两个图标:

  1. 小圆点,当前正被调试的应用程序的小圆点图标变亮
  2. auto-active,点击后,可以启用即时调试(Instant Debugging)—— 应用程序启动后GapDebug会自动检测到,并立即启动一个Debugger附着到此应用程序上。

可以看到,右侧第一个选项卡就是Chrome Dev Tools,相信Web开发者都很熟悉:

  1. 点击菜单栏放大镜按钮,可以Inspect DOM元素,应用程序界面会和你的操作互动,就像调试普通网页时一样
  2. 点击放大镜旁边的手机按钮,可以进行屏幕转播(Screencast),即在Gapdebug界面中实时显示手机UI。此UI支持用户交互

 

 

 

 

 

 

← 树莓派3B安装记录
Framework7知识集锦 →

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Related Posts

  • 使用Eclipse进行远程调试
  • 基于Apache Cordova开发移动应用程序
  • Framework7知识集锦
  • 基于AngularJS开发Web应用

Recent Posts

  • Investigating and Solving the Issue of Failed Certificate Request with ZeroSSL and Cert-Manager
  • A Comprehensive Study of Kotlin for Java Developers
  • 背诵营笔记
  • 利用LangChain和语言模型交互
  • 享学营笔记
ABOUT ME

汪震 | Alex Wong

江苏淮安人,现居北京。目前供职于腾讯云,专注容器方向。

GitHub:gmemcc

Git:git.gmem.cc

Email:gmemjunk@gmem.cc@me.com

ABOUT GMEM

绿色记忆是我的个人网站,域名gmem.cc中G是Green的简写,MEM是Memory的简写,CC则是我的小天使彩彩名字的简写。

我在这里记录自己的工作与生活,同时和大家分享一些编程方面的知识。

GMEM HISTORY
v2.00:微风
v1.03:单车旅行
v1.02:夏日版
v1.01:未完成
v0.10:彩虹天堂
v0.01:阳光海岸
MIRROR INFO
Meta
  • Log in
  • Entries RSS
  • Comments RSS
  • WordPress.org
Recent Posts
  • Investigating and Solving the Issue of Failed Certificate Request with ZeroSSL and Cert-Manager
    In this blog post, I will walk ...
  • A Comprehensive Study of Kotlin for Java Developers
    Introduction Purpose of the Study Understanding the Mo ...
  • 背诵营笔记
    Day 1 Find Your Greatness 原文 Greatness. It’s just ...
  • 利用LangChain和语言模型交互
    LangChain是什么 从名字上可以看出来,LangChain可以用来构建自然语言处理能力的链条。它是一个库 ...
  • 享学营笔记
    Unit 1 At home Lesson 1 In the ...
  • K8S集群跨云迁移
    要将K8S集群从一个云服务商迁移到另外一个,需要解决以下问题: 各种K8S资源的迁移 工作负载所挂载的数 ...
  • Terraform快速参考
    简介 Terraform用于实现基础设施即代码(infrastructure as code)—— 通过代码( ...
  • 草缸2021
    经过四个多月的努力,我的小小荷兰景到达极致了状态。

  • 编写Kubernetes风格的APIServer
    背景 前段时间接到一个需求做一个工具,工具将在K8S中运行。需求很适合用控制器模式实现,很自然的就基于kube ...
  • 记录一次KeyDB缓慢的定位过程
    环境说明 运行环境 这个问题出现在一套搭建在虚拟机上的Kubernetes 1.18集群上。集群有三个节点: ...
  • eBPF学习笔记
    简介 BPF,即Berkeley Packet Filter,是一个古老的网络封包过滤机制。它允许从用户空间注 ...
  • IPVS模式下ClusterIP泄露宿主机端口的问题
    问题 在一个启用了IPVS模式kube-proxy的K8S集群中,运行着一个Docker Registry服务 ...
  • 念爷爷
      今天是爷爷的头七,十二月七日、阴历十月廿三中午,老人家与世长辞。   九月初,回家看望刚动完手术的爸爸,发

  • 6 杨梅坑

  • liuhuashan
    深圳人才公园的网红景点 —— 流花山

  • 1 2020年10月拈花湾

  • 内核缺陷触发的NodePort服务63秒延迟问题
    现象 我们有一个新创建的TKE 1.3.0集群,使用基于Galaxy + Flannel(VXLAN模式)的容 ...
  • Galaxy学习笔记
    简介 Galaxy是TKEStack的一个网络组件,支持为TKE集群提供Overlay/Underlay容器网 ...
TOPLINKS
  • Zitahli's blue 91 people like this
  • 梦中的婚礼 64 people like this
  • 汪静好 61 people like this
  • 那年我一岁 36 people like this
  • 为了爱 28 people like this
  • 小绿彩 26 people like this
  • 杨梅坑 6 people like this
  • 亚龙湾之旅 1 people like this
  • 汪昌博 people like this
  • 彩虹姐姐的笑脸 24 people like this
  • 2013年11月香山 10 people like this
  • 2013年7月秦皇岛 6 people like this
  • 2013年6月蓟县盘山 5 people like this
  • 2013年2月梅花山 2 people like this
  • 2013年淮阴自贡迎春灯会 3 people like this
  • 2012年镇江金山游 1 people like this
  • 2012年徽杭古道 9 people like this
  • 2011年清明节后扬州行 1 people like this
  • 2008年十一云龙公园 5 people like this
  • 2008年之秋忆 7 people like this
  • 老照片 13 people like this
  • 火一样的六月 16 people like this
  • 发黄的相片 3 people like this
  • Cesium学习笔记 90 people like this
  • IntelliJ IDEA知识集锦 59 people like this
  • 基于Kurento搭建WebRTC服务器 38 people like this
  • Bazel学习笔记 37 people like this
  • PhoneGap学习笔记 32 people like this
  • NaCl学习笔记 32 people like this
  • 使用Oracle Java Mission Control监控JVM运行状态 29 people like this
  • Ceph学习笔记 27 people like this
  • 基于Calico的CNI 27 people like this
  • Three.js学习笔记 24 people like this
Tag Cloud
ActiveMQ AspectJ CDT Ceph Chrome CNI Command Cordova Coroutine CXF Cygwin DNS Docker eBPF Eclipse ExtJS F7 FAQ Groovy Hibernate HTTP IntelliJ IO编程 IPVS JacksonJSON JMS JSON JVM K8S kernel LB libvirt Linux知识 Linux编程 LOG Maven MinGW Mock Monitoring Multimedia MVC MySQL netfs Netty Nginx NIO Node.js NoSQL Oracle PDT PHP Redis RPC Scheduler ServiceMesh SNMP Spring SSL svn Tomcat TSDB Ubuntu WebGL WebRTC WebService WebSocket wxWidgets XDebug XML XPath XRM ZooKeeper 亚龙湾 单元测试 学习笔记 实时处理 并发编程 彩姐 性能剖析 性能调优 文本处理 新特性 架构模式 系统编程 网络编程 视频监控 设计模式 远程调试 配置文件 齐塔莉
Recent Comments
  • qg on Istio中的透明代理问题
  • heao on 基于本地gRPC的Go插件系统
  • 黄豆豆 on Ginkgo学习笔记
  • cloud on OpenStack学习笔记
  • 5dragoncon on Cilium学习笔记
  • Archeb on 重温iptables
  • C/C++编程:WebSocketpp(Linux + Clion + boostAsio) – 源码巴士 on 基于C/C++的WebSocket库
  • jerbin on eBPF学习笔记
  • point on Istio中的透明代理问题
  • G on Istio中的透明代理问题
  • 绿色记忆:Go语言单元测试和仿冒 on Ginkgo学习笔记
  • point on Istio中的透明代理问题
  • 【Maven】maven插件开发实战 – IT汇 on Maven插件开发
  • chenlx on eBPF学习笔记
  • Alex on eBPF学习笔记
  • CFC4N on eBPF学习笔记
  • 李运田 on 念爷爷
  • yongman on 记录一次KeyDB缓慢的定位过程
  • Alex on Istio中的透明代理问题
  • will on Istio中的透明代理问题
  • will on Istio中的透明代理问题
  • haolipeng on 基于本地gRPC的Go插件系统
  • 吴杰 on 基于C/C++的WebSocket库
©2005-2025 Gmem.cc | Powered by WordPress | 京ICP备18007345号-2