Cordova的调试方法
Cordova APP调试方法
对于基于Cordova的跨平台APP开发的调试,相对比较困难。有基于chrome浏览器(在线/离线)、weinre、Android Studio,以及基于Visual Studio Code的方法等。下面重点推荐基于VS Code和基于browser的方法!也对其他方法做了简要介绍,方便开发cordova的多种方法的调试。
目录:
- Cordova APP调试方法
- 1.基于Visual Studio Code的调试方法
- 1.1 VS Code安装调试工具
- 1.2 VS Code启动调试Cordova
- 1.3 VS Code调试技巧
- 1.4 VS Code调试中的问题:
- 2.运行到browser调试
- 3.其他调试方法
- 3.1 chrome调试
- 3.2 weinre调试
1.基于Visual Studio Code的调试方法
VS Code是非常好用的一款代码编辑器,可以集成和扩展多种代码的智能辅助、运行和调试功能,Cordova也不例外。目前,基于该平台的调试是较快速、方便的方法。
1.1 VS Code安装调试工具
在vs code扩展中找到Cordova Tools并安装,如图:
安装后,重启Vs Code
1.2 VS Code启动调试Cordova
(1)打开要调试的工程目录
点击“运行”->“启动调试” ,或者点击左侧的调试按钮:
(2)建立或配置launch.json文件
对于没有调试过的工程,会提示需要首先建立launch.json文件。该文件保存在该cordova工程目录下的.vscode文件夹下,记录了该工程的vscode运行配置参数。
要了解相关变量和参数的详细说明,可参考:https://code.visualstudio.com/docs/editor/variables-reference
创建如下:
按下图完成选项配置:
确定。
创建成功后或者第二次调试同一工程,即可直接进入,不再创建该文件。
然后,即可按下图,点“调试”按钮,并选择运行位置,开始进入调试。
选择:“Run Android on device”需要用连接线正确链接手机到USB,并打开手机USB调试功能;也可以用第三方模拟器运行调试。
选择:“Run Android on emulator”演示到模拟器(需先配置并启动好模拟器)
选择:"Simulate Android in browse"会演示到浏览器
1.3 VS Code调试技巧
(1)设置断点
在进入调试前,先设置断点:
(2)启动调试
点击“启动调试”,在下方“调试控制台”可看到启动过程。等待运行完成后,可看到设备或模拟器上出现了该程序的运行界面。
然后,可结合“调试控制台“、调试单步控制按钮等进行调试:如图:
(3)查看变量和修改代码实时跟踪
发现错误后,可以直接修改代码,然后用"重启"功能重启该程序后,继续跟踪其他错误!
要查看某个变量的值,按下图设置:
也可以直接在“调试控制器”中直接打印输出变量的值,例如:
1.4 VS Code调试中的问题:
- 如果输入变量没反应,在“查看”区变量显示为:“不可用”,原因是程序没有跟踪进入到该变量所在文件!
- VS Code调试有时会存在断点不停,跟踪不了等情况,可以采用设置附近语句断点、增加输出、重新运行,或者重新启动调试等方式尝试解决。
- VS Code的Cordova调试还是存在一些BUG,例如:代码存在错误,有时会导致后续代码不跟踪执行等,期待更好的改进。
- 关于VS Code调试的更多说明见:https://code.visualstudio.com/docs/editor/debugging
2.运行到browser调试
作为另一个选择,推荐将cordova程序运行到browser的调试方法,可以借助浏览器本身强大的调试功能,完成错误定位。步骤是:
(1)将程序运行到browser platform
用以下命令,对工程项目添加browser运行平台,并运行到该平台:
cordova platform add browser
cordova run browser
如图:
程序即可运行到浏览器端,用Ctrl+C可终止运行。
(2)在浏览器用功能键F12,打开开发者工具调试
主要借助控制台、源代码、元素等完成,如图:
调试完成后,在命令窗用Ctrl+C终止程序运行。
3.其他调试方法
3.1 chrome调试
直接用chrome的调试功能调试,方法如下:
(1)开启手机上的USB调试功能
(2) 打开Chrome浏览器,地址栏输入:Chrome://inspect,回车
Chrome会自动检测手机上打开的App,并列出可调试的WebView页面,如图:
点击“inspect",在网络对https://chrome-devtools-frontend.appspot.com网址可访问时,即可进入调试。
若网络不能访问,会弹出”404错误“或者显示为空白。只能采用离线调试或VPN(百度上可自己尝试解决方法)。
3.2 weinre调试
- (1)安装
在命令行方式:运行命令:
npm –g install weinre
完成安装。
- (2)启动和停止
启动命令:
weinre --httpPort 8080 --boundHost -all-
如果8080端口被占用,需要指定另一个端口:
停止服务用:Ctrl+C终止即可。
-(3) 提取调试地址
打开谷歌浏览器(webkit内核支持的浏览器都可),
输入:http://192.168.100.107:8888/
(该IP地址为启动运行weinre的机器IPv4地址)
界面如下:
将箭头所指部分拷贝下来,用于在index.html中绑定手机
- (4)绑定手机
在cordova工程的index.html中在 语句之前,加入刚才拷贝的代码:
- (5)正式启动cordova工程的weinre调试
此时,按以下步骤进入调试:
在cmd窗口中编译运行该cordova工程,在手机上出现该工程的运行页面
在cmd启动weinre
在chrome中运行: http://192.168.100.107:8888/client/#anonymous,就会出现该手机的targets,鼠标点击该 Targets,会显示为绿色,如图。
- 点上方的菜单:Elements
即可出现调试画面
- 点上方的菜单:Elements
关于weinre的更多内容详见:https://github.com/nupthale/weinre
Cordova的调试方法相关推荐
- [Phonegap+Sencha Touch] 移动开发71 Sencha项目开发、调试方法建议
原文地址:http://blog.csdn.net/lovelyelfpop/article/details/50171151 一.开发时的调试 方法1:不开启任何服务器 因为Sencha项目在开发状 ...
- Linux环境下段错误的产生原因及调试方法小结
From:http://www.cnblogs.com/panfeng412/archive/2011/11/06/2237857.html 最近在Linux环境下做C语言项目,由于是在一个原有项目基 ...
- Web开发常规调试方法与常见问题分析
一.Web项目基本原理 现在的web项目大都已经前后端独立开发与部署. 前后端独立开发,一般是前端与后端通过web接口(常见的有RESTful与websocket)文档进行交流.前端开发人员先更具业务 ...
- smc数显压力表设定方法_SMC压力表使用注意与调试方法
SMC压力表使用注意与调试方法 SMC压力表使用注意: 1.仪表必须垂直:安装时应使用17mm扳手旋紧,不应强扭表壳:运输时应避免碰撞: 2.仪表使用宜在周围环境温度为-25~55℃: 3.使用工作环 ...
- 几种Linux段错误调试方法
一.产生段错误的原因 段错误就是指某一进程访问了不属于它权限范围的内存空间,比如:访问了不存在的内存,访问了受系统保护的内存,访问了只读的内存等.下面是一段会产生段错误的实例代码:main.c #in ...
- (五)stm32工程代码HardFault异常查错调试方法
(五)stm32工程代码HardFault异常查错调试方法 参考文章: (1)(五)stm32工程代码HardFault异常查错调试方法 (2)https://www.cnblogs.com/zhan ...
- [Linux]core文件调试方法
来源: shaovey的专栏 在程序不寻常退出时,内核会在当前工作目录下生成一个core文件(是一个内存映像,同时加上调试信息).使用gdb来查看core文件,可以指示出导致程序出错的代码所在文件和行 ...
- 转Linux环境下段错误的产生原因及调试方法小结
Linux环境下段错误的产生原因及调试方法小结 转载于:https://www.cnblogs.com/objectDetect/p/7575659.html
- 7 php程序的调试方法_php程序调试方法总结
相信很多朋友们都有调试程序的经历,然而很多时候调试程序是痛苦而又漫长的过程:它不仅需要细心,更需要耐心,切忌心浮气躁.但是当找出问题并顺利 解决它时,又会给人无比激动的喜悦.这里总结一下笔者在程序调试 ...
最新文章
- 刷题总结——魔法森林(bzoj3669)
- 泛函编程—模板函数_类模板
- java招投标网站源码_基于jsp的招标系统-JavaEE实现招标系统 - java项目源码
- OpenTSDB 开发指南之 Api操作数据
- 保时捷推出Taycan 4S电动汽车 售价10.38万美元起
- Java多线程知识整理
- 易普优APS 5.0高级计划排程系统助力工业4.0智能工厂建设
- 基于SpringBoot实现单点登录系统
- 多个EXCEL文件合并成一个
- api 接口管理工具
- ipad和iphone切图_如何在iPhone和iPad上使用触控板模式选择文本
- Spring XML 注入
- 【面试】Raft算法详解
- 【shell】scp 同时向多个主机拷贝数据
- idea跳到下一个断点_IDEA---断点调试Debug
- vc++ cos 函数_cos()函数以及C ++中的示例
- 【LeetCode】528. Random Pick with Weight 解题报告(Python)
- 铸造企业市场调研的15种常规途径
- ROS1和ROS2RVIZ 代码详解
- 数据保护平台如何为新一代应用,人工智能和数据科学提供动力
热门文章
- 莫让小商贩成为互联网垄断的“牺牲品”
- 创建目录public html,php CI如何实现全站静态生成html,动态创建目录
- E - Sugoroku 4(abc)
- VB6.0不支持鼠标滚轮的解决办法
- vm虚拟机中的虚拟网络编辑器出现 不能更改网络为桥接:已经没有桥接的主机网络适配器的 解决方案
- jQuery 特效网址(特效大全)
- 读书笔记22:Optical Flow Guided Feature: A Fast and Robust Motion Representation for Video Action Recogni
- USB设备绑定固定端口
- Arctic Network题解+(最小生成树二次理解 )
- C语言中的一元加、一元减运算符