关闭

Cordova 6 架构学习 测试工具Ripple Emulator、GapDebug

标签: androidandroid开发测试工具
5630人阅读 评论(0) 收藏 举报
分类:

一、Ripple Emulator

Ripple Emulator是一个基于浏览器的,可以协助测试cordova app的软件,可以运行于多个操作系统。老版本Ripple 作为Chrome extension安装,需要Chrome浏览器支持。现在可以使用npm安装。

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

安装:

npm install -g ripple-emulator
运行:
命令行把路径指向项目,运行命令:
ripple emulate –path platforms/android/assets/www
使用开发者工具可以看出,模拟器是以一个iframe形式加载的。
这里写图片描述

二、 使用Chrome调试

在浏览器地址栏输入:

chrome://inspect/#devices

找到应用程序后,点击“inspect”

三、GapDebug

https://www.genuitec.com/products/gapdebug/
http://www.raymondcamden.com/2014/7/2/GapDebug-a-new-mobile-debugging-tool
GapDebug 提供一个简单的方式可以调试iOS和Android程序,支持debug,分别需要safari和chrome浏览器的配合使用。

安装

根据不同操作系统,从官网下载后安装。软件比较大,一百多兆,我的公司网络需要3个小时。
下面的配置需要cordova3.3以上版本。

配置

1.修改cordova下的config.xml

修改namespace

<widget 
    xmlns="http://www.w3.org/ns/widgets" 
    xmlns:gap="http://phonegap.com/ns/1.0" 
    xmlns:android="http://schemas.android.com/apk/res/android"
    id="me.app.id" 
    version="1.0.0">

在config.xml下面加下

<gap:config-file platform="android" parent="/manifest">
     <application android:debuggable="true" />
</gap:config-file>

在platforms/android/AndroidManifest.xml里的application字段加上debuggable属性:

<manifest>
     ....
     <application android:debuggable="true" />
     ....
</manifest>

安装usb debugging

android4.4以上版本默认支持usb debugging,
android4.4 以下版本可以使用crosswalk webview控件。

另外,可以安装genymotion emulator 模拟器。
genymotion emulator安装截图:
这里写图片描述

安装chrome

设置手机,允许usb debugging.

这里写图片描述

mac下使用GapDebug

手机端设置:
设置-safari-Web检查器 启用
设置-隐私与安全性-不跟踪 取消
Safari设置:
Preferences-Advanced-Show Develop menu in menu bar 启用

重新连接iphone与mac,
打开调试:
可以使用chrome或safari进行调试.
通过GapDebug-Open Debug Tools或
选择Safari-Develop 找到选择的设备,点开正在调试的Cordova程序。

ios10对CSP可能有限制,修改CSP设置如下:

<meta http-equiv="Content-Security-Policy" content="default-src * data:cdvfile: gap: ;style-src 'self' 'unsafe-inline';script-src http://abc.com:8080 'self' 'unsafe-inline' 'unsafe-eval'">
1
0
查看评论

cordova混合移动app调试工具GapDebug+ripple emulate

Ripple Emulate 使用Google模拟器,可以帮到大部分的调试 GapDebug 真机安装apk,电脑端和真机端同步调试 适用的项目 phonegap/cordova ionicRipple Emulate安装和使用Apache Ripple主页:http://ripple....
  • lucy_100
  • lucy_100
  • 2015-11-13 16:58
  • 6502

cordova 真机使用远程H5页面调试

前言 这是公司一位同事的成果,我只是拿来记录一下,在这要谢谢那位同事,真的很棒 cordova cordova 是使用h5 css js 来开发移动端应用。具有一套页面可以多端适配的特性,大大提高了APP的开发效率,节省了开发成本,也是目前比较流行的一套解决方案。 那么我们是怎么让开发...
  • qq_27038019
  • qq_27038019
  • 2017-05-24 16:56
  • 1386

Cordova 3.x 基础(3) -- 调试工具Debug

(1)Ripple Emulator  是基于Google Chrome的移动应用模拟器,已经捐赠给了ASF。Apache Ripple:http://ripple.incubator.apache.org/  Chrome Webstore安装地址:  ht...
  • albert528108
  • albert528108
  • 2015-04-12 18:05
  • 1097

Ripple Emulator (Beta) 0.9.15

  • 2017-06-14 23:04
  • 4.73MB
  • 下载

cordova学习五 真机调试

我说的cordova真机调试不是通过手机浏览器在访问,在电脑上调试,而是实实在在的一个apk,主要要求连接手机,还有sdk环境 5.1sdk环境          Sdk环境安装会存在很多问题,不可能将问题一一记录,...
  • qq_32541407
  • qq_32541407
  • 2017-03-05 09:31
  • 4101

cordova-plugin-console插件及Cordova Web页面调试整理

一、Cordova Console 1.它增加了对iOS、附加功能Ubuntu,Windows Phone 8和Windows。如果你高兴看到console.log()为你工作,那么你可能不需要这个插件。 此插件定义了全局控制台对象。 2.如果只是Android平台可能就不需要这个插件了 安...
  • u011127019
  • u011127019
  • 2017-02-20 16:51
  • 2698

【cordova】hybrid app调试(同样适用于移动端浏览器或webview)

前几天发现身边好多人都不知道怎么调试cordova app,调页面的时候改一次看一下,甚至用alert来查看数据的值,这无疑极大地影响了工作效率和工作的心情,在此记录一下调试cordova app的方法,很简单,有需要的同学可以看一下(移动端浏览器或原生app里的webview也同样适用)。作案工具...
  • Z_4545287
  • Z_4545287
  • 2017-04-20 11:29
  • 1219

Cordova真机测试之GapDebug

相信很多ionic的开发者一般的调试方式都是采用的Chrome的真机调试(chrome://inspect)进行的调试的,或许有很多人为了不麻烦还是采取的改一点,然后打包alert()。毕竟我大多数时候都是这样。 这里我推荐大家使用一款专门用于phonegap(cordova前身)的调试工具Gap...
  • u010730897
  • u010730897
  • 2017-11-02 13:38
  • 629

gapdebug problem loading url

gapdebug调试工具连接不上手机
  • u012426959
  • u012426959
  • 2017-08-25 12:05
  • 175

gapdebug,app混合开发调试工具

  • 2017-10-07 09:58
  • 69B
  • 下载
    个人资料
    • 访问:1355317次
    • 积分:18927
    • 等级:
    • 排名:第571名
    • 原创:728篇
    • 转载:20篇
    • 译文:5篇
    • 评论:193条
    博客专栏
    最新评论