温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

怎么调试Cordova应用的JavaScript代码和自定义插件代码

发布时间:2021-11-20 16:03:50 来源:亿速云 阅读:187 作者:iii 栏目:移动开发

这篇文章主要讲解了“怎么调试Cordova应用的JavaScript代码和自定义插件代码”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“怎么调试Cordova应用的JavaScript代码和自定义插件代码”吧!

先说Cordova前端代码如何调试。这里我以Android安卓平台为例。首先打开安卓手机的调试模式,然后用数据线连接到电脑上。打开Chrome开发者工具,Settings->More tools->Remote devices:

怎么调试Cordova应用的JavaScript代码和自定义插件代码

这里我就能看到我正在运行Cordova应用的三星手机,SM A7100,状态处于已连接状态(Connected)。

怎么调试Cordova应用的JavaScript代码和自定义插件代码

2. 在我的三星手机上启动Cordova应用,然后在Chrome开发者工具里能看到SM-A7100对应的应用列表里出现了一个"WebView in io.cordova.hellocordova....", 这条记录就是我在三星手机上运行的Cordova应用,前面已经说了,该应用实际上是运行在一个嵌入的Webview里的。点击”Inspect"按钮:

怎么调试Cordova应用的JavaScript代码和自定义插件代码

3. 切换到Sources标签页,这里能看到目前为止加载的html和Javascript源代码。剩下的时候和平时调试运行在PC浏览器里的Web应用没有任何区别。注意开发者工具的标题"file:///android_asset/www/index.html提示了当前调试的index.html所在的位置。

例如下图第38行,实际就是从Cordova JavaScript代码执行到我自己开发的基于Android平台的Cordova插件代码的入口位置。

怎么调试Cordova应用的JavaScript代码和自定义插件代码

下图第967行是JavaScript代码到Java代码的分界岭。具体JavaScript代码是如何执行到Java栈中去的,请看我的另一篇文章  Cordova插件中JavaScript代码与Java的交互细节介绍 。

怎么调试Cordova应用的JavaScript代码和自定义插件代码

Cordova自定义插件的调试步骤

按照这篇文章  使用JavaScript调用手机平台上的原生API  介绍的步骤,用Java开发了一个基于Android平台的Cordova插件。

现在我想在我的Windows电脑上对这个插件进行调试。

假设我的Cordova项目名称为JerryUI5HelloWorld,在这个文件夹下有一个子文件夹platforms,找到里面的android文件夹:

怎么调试Cordova应用的JavaScript代码和自定义插件代码

用Android Studio打开这个android子文件夹。找到你的插件实现文件,在Android Studio里设置好断点。

怎么调试Cordova应用的JavaScript代码和自定义插件代码

在Android studio里用调试模式启动项目:

怎么调试Cordova应用的JavaScript代码和自定义插件代码

在手机上再次执行Cordova应用,JavaScript代码里调用Cordova插件的入口如下。插件名称Adder,对应Java里的同名类,插件方法performAdd,会在Java类Adder里得到处理:

怎么调试Cordova应用的JavaScript代码和自定义插件代码

Java插件的断点成功触发了:

怎么调试Cordova应用的JavaScript代码和自定义插件代码

从Android Studio里的调用栈能进一步研究我们开发的Cordova插件是如何通过Cordova框架从JavaScript端被调用的:

1. SystemExposedJsApi.exec

2. CordovaBridge.jsExec

3. PluginManager.exec

4. CordovaPlugin.exec

5. 我们的自定义插件被调用

怎么调试Cordova应用的JavaScript代码和自定义插件代码

感谢各位的阅读,以上就是“怎么调试Cordova应用的JavaScript代码和自定义插件代码”的内容了,经过本文的学习后,相信大家对怎么调试Cordova应用的JavaScript代码和自定义插件代码这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是亿速云,小编将为大家推送更多相关知识点的文章,欢迎关注!

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI