Cordova 6 架构学习 测试工具Ripple Emulator、GapDebug
2015-07-08 14:23
651 查看
一、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'">
相关文章推荐
- 软件架构的数据流总结(三)
- krpano漫游加方向性3D声音(这篇文章已被移到krpano中国网站 krpano360.com)
- 花生壳宣布网站的网址直接绑定到详细的项目——jboss版本
- 手游服务器常用架构图
- Cross-Site Scripting XSS 跨站攻击全攻略 分类: 系统架构 2015-07-08 12:25 21人阅读 评论(2) 收藏
- Cordova 5 架构学习 Weinre远程调试技术
- 关于IE不兼容的网站页面
- [Study] 通过游戏学编程的网站
- 垂直类行业人才的招聘网站
- 基于rest架构的webservice
- 软件架构的数据流总结(二)
- android开发者应该收藏的优秀博客和技术网站
- MySQL高可用性大杀器之MHA | 火丁笔记
- 全新E:网站不是之前排名浮动 相比于竞争对手究竟缺少了什么?
- 个人家庭宽带搭建多域名web网站服务器配置
- php获取从百度、谷歌等搜索引擎进入网站关键词的方法
- Java UrlRewrite 实现网站URL重写过程实录
- 案例分析如何做好网站用户体验优化
- 网站制作网站制作如何实现图文并茂
- 网页色彩搭配详细解析过程_上海网站建设