我之前写过三篇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的原创技术文章，请关注公众号"汪子熙"或者扫描下面二维码:

Cordova应用的JavaScript代码和自定义插件代码的调试相关推荐

Spring Boot退出代码–创建自定义退出代码
当运行Spring Boot应用程序时,一切正常,我们将获得系统退出代码0 . 对于任何未处理的异常,应用程序将返回退出代码1 . 我们有可能从Spring Boot应用程序返回自定义退出代码. 在本 ...
phonegap(cordova) 自定义插件代码篇（三）----支付宝支付工具整合
建议读者,先阅读官方文档,知晓其支付流程之后再来使用此代码,比如客户需要做什么,服务端需要做什么(很重要!很重要!很重要!),因为这几个篇幅都是纯代码篇,因为阅读前面的入门篇之后看这些应该毫无问题才对 ...
Blog代码高亮无需插件 - 代码发芽网
(呵呵完美支持iteye.com的博客,真开心) 写博客时,没有代码高亮? 代码发芽网 ( http://www.fayaa.com/code/ ): 无需插件支持Blog代码高亮支持近百种编程语言 ...
HBuilderX自定义编辑器代码颜色
文章目录自定义编辑器代码颜色自定义代码颜色辅助功能文件图标自定义编辑器代码颜色自定义编辑器代码颜色功能,仅适用于HBuilderX 3.1.19+版本: 支持自定义哪些代码区域? 自定义代码 ...
Unity 代码编写自定义模型
Unity 代码编写自定义模型目录 Unity 代码编写自定义模型代码编写自定义模型(Cube) 代码编写自定义模型(Plane) 代码很简单没有难度, Plane 模块和 Cube 还是 ...
Cordova学习--iOS自定义插件
上一篇文章中我们已经成功创建了一个App,在这一篇中,我们实现自定义原生插件,由js调用原生插件.在这里我们实现功能如下一.创建插件文件在plugins文件夹下创建插件EchoPlugin,继承自 ...
cordova自定义android插件,Cordova 自定义插件(Android版本)
Cordova 自定义插件(android) 特别注意 android 项目的包名必须为 com.example.hello,否则编译不会通过. 1.安装命令工具 $ npm i plugman - ...
AngularJS自定义指令详解（有分页插件代码）
前言除了 AngularJS 内置的指令外,我们还可以创建自定义指令. 通过 .directive() 函数来添加自定义的指令. 调用自定义指令时,需要在HTMl 元素上添加自定义指令名. 自定义指 ...
kindeditor自定义插件插入视频代码
kindeditor自定义插件插入视频代码 1.添加插件js 目录:/kindeditor/plugins/diy_video/diy_video.js KindEditor.plugin('diy_ ...

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

如何调试Cordova应用里的JavaScript代码

如何调试Cordova自定义插件的代码

Cordova自定义插件的调试步骤

Cordova应用的JavaScript代码和自定义插件代码的调试相关推荐

最新文章

热门文章