我之前写过三篇 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 的原创技术文章，请关注公众号"汪子熙".