Cordova应用的JavaScript代码和自定义插件代码的调试
我之前写过三篇Cordova相关的技术文章。当我们使用Cordova将自己开发的前端应用打包安装到手机上后,可能会遇到需要调试Cordova应用的时候。
本文就介绍Cordova应用的调试步骤。
如果大家读过之前我写的文章,就知道Cordova应用在移动平台上运行时,实际上Cordova包内的前端应用的HTML/JavaScript代码仍然运行在一个嵌入的Webview里。同时Cordova也允许开发人员开发一些插件,这些插件能调用基于特定移动平台的原生API,通过Cordova框架直接暴露给前端JavaScript消费。因此本文包含两部分的介绍:
如何调试Cordova应用里的JavaScript代码
如何调试Cordova自定义插件的代码
先说Cordova前端代码如何调试。这里我以Android安卓平台为例。首先打开安卓手机的调试模式,然后用数据线连接到电脑上。打开Chrome开发者工具,Settings->More tools->Remote devices:
这里我就能看到我正在运行Cordova应用的三星手机,SM A7100,状态处于已连接状态(Connected)。
2. 在我的三星手机上启动Cordova应用,然后在Chrome开发者工具里能看到SM-A7100对应的应用列表里出现了一个"WebView in io.cordova.hellocordova....", 这条记录就是我在三星手机上运行的Cordova应用,前面已经说了,该应用实际上是运行在一个嵌入的Webview里的。点击”Inspect"按钮:
3. 切换到Sources标签页,这里能看到目前为止加载的html和Javascript源代码。剩下的时候和平时调试运行在PC浏览器里的Web应用没有任何区别。注意开发者工具的标题"file:///android_asset/www/index.html提示了当前调试的index.html所在的位置。
例如下图第38行,实际就是从Cordova JavaScript代码执行到我自己开发的基于Android平台的Cordova插件代码的入口位置。
下图第967行是JavaScript代码到Java代码的分界岭。具体JavaScript代码是如何执行到Java栈中去的,请看我的另一篇文章 Cordova插件中JavaScript代码与Java的交互细节介绍。
Cordova自定义插件的调试步骤
按照这篇文章 使用JavaScript调用手机平台上的原生API 介绍的步骤,用Java开发了一个基于Android平台的Cordova插件。
现在我想在我的Windows电脑上对这个插件进行调试。
假设我的Cordova项目名称为JerryUI5HelloWorld,在这个文件夹下有一个子文件夹platforms,找到里面的android文件夹:
用Android Studio打开这个android子文件夹。找到你的插件实现文件,在Android Studio里设置好断点。
在Android studio里用调试模式启动项目:
在手机上再次执行Cordova应用,JavaScript代码里调用Cordova插件的入口如下。插件名称Adder,对应Java里的同名类,插件方法performAdd,会在Java类Adder里得到处理:
Java插件的断点成功触发了:
从Android Studio里的调用栈能进一步研究我们开发的Cordova插件是如何通过Cordova框架从JavaScript端被调用的:
1. SystemExposedJsApi.exec
2. CordovaBridge.jsExec
3. PluginManager.exec
4. CordovaPlugin.exec
5. 我们的自定义插件被调用
这个调用栈也和我这篇文章 Cordova插件中JavaScript代码与Java的交互细节介绍 里讲解的一致。
要获取更多Jerry的原创技术文章,请关注公众号"汪子熙"或者扫描下面二维码:
低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。
持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。
转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。
- 上一篇
(转) 网站统计中的数据收集原理及实现
原文地址:http://blog.codinglabs.org/articles/how-web-analytics-data-collection-system-work.html 网站数据统计分析工具是网站站长和运营人员经常使用的一种工具,比较常用的有谷歌分析、百度统计和腾讯分析等等。所有这些统计分析工具的第一步都是网站访问数据的收集。目前主流的数据收集方式基本都是基于javascript的。本文将简要分析这种数据收集的原理,并一步一步实际搭建一个实际的数据收集系统。 数据收集原理分析 简单来说,网站统计分析工具需要收集到用户浏览目标网站的行为(如打开某网页、点击某按钮、将商品加入购物车等)及行为附加数据(如某下单行为产生的订单金额等)。早期的网站统计往往只收集一种用户行为:页面的打开。而后用户在页面中的行为均无法收集。这种收集策略能满足基本的流量分析、来源分析、内容分析及访客属性等常用分析视角,但是,随着ajax技术的广泛使用及电子商务网站对于电子商务目标的统计分析的需求越来越强烈,这种传统的收集策略已经显得力不能及。 后来,Google在其产品谷歌分析中创新性的引入了可定制的数...
- 下一篇
JavaScript面试系列:JavaScript设计模式之桥接模式和懒加载
我写的程序员面试系列文章 Java面试系列-webapp文件夹和WebContent文件夹的区别? 程序员面试系列:Spring MVC能响应HTTP请求的原因? Java程序员面试系列-什么是Java Marker Interface(标记接口) 使用JDK自带的工具jstack找出造成运行程序死锁的原因 编程面试题:编写一个会造成数据库死锁的应用 设计模式(Design Pattern)中的桥接模式,有的朋友平时工作可能很少用到。桥接模式的核心在于将抽象部分和它的实现部分分离,使它们都可以独立的变化。听起来很抽象,让我们看一个具体而简单的例子,通过这个例子一步步的完善来加深对桥接模式的理解。 很多论坛点登录按钮时, 周围背景都会暗下来,这样可以突出即将弹出的登录框,让用户把精力集中在用户名和密码的输入上去。 很多论坛对于这种背景变暗的UI实现,是创建了一个HTML原生的div元素,加上一些精心设计过背景颜色的CSS样式来完成的。 我们下面称这种div元素为遮罩层div元素,即mask div。 下面讨论创建mask div的最优解。 实现版本1 创建一个createMask函数,作...
相关文章
文章评论
共有0条评论来说两句吧...
文章二维码
点击排行
-
Docker使用Oracle官方镜像安装(12C,18C,19C)
- Springboot2将连接池hikari替换为druid,体验最强大的数据库连接池
- CentOS8编译安装MySQL8.0.19
- Docker快速安装Oracle11G,搭建oracle11g学习环境
- SpringBoot2配置默认Tomcat设置,开启更多高级功能
- MySQL8.0.19开启GTID主从同步CentOS8
- CentOS7,8上快速安装Gitea,搭建Git服务器
- Jdk安装(Linux,MacOS,Windows),包含三大操作系统的最全安装
- SpringBoot2编写第一个Controller,响应你的http请求并返回结果
推荐阅读
最新文章
- MySQL8.0.19开启GTID主从同步CentOS8
- Windows10,CentOS7,CentOS8安装MongoDB4.0.16
- Docker使用Oracle官方镜像安装(12C,18C,19C)
- SpringBoot2编写第一个Controller,响应你的http请求并返回结果
- CentOS8编译安装MySQL8.0.19
- Springboot2将连接池hikari替换为druid,体验最强大的数据库连接池
- SpringBoot2整合Redis,开启缓存,提高访问速度
- CentOS关闭SELinux安全模块
- Hadoop3单机部署,实现最简伪集群
- CentOS6,7,8上安装Nginx,支持https2.0的开启