I’ve written three technical articles about Cordova before. If you use Cordova to package your own front-end applications and install them on your mobile phone, you may need to debug Cordova.

This article describes how to debug Cordova.

For those of you who have read my previous posts, when Cordova runs on mobile, the HTML/JavaScript code for the front end of the Cordova package still runs in an embedded Webview. Cordova also allows developers to create plug-ins that call native apis for specific mobile platforms, directly exposed to front-end JavaScript consumption through the Cordova framework. Therefore, this paper consists of two parts:

How to debug JavaScript code in Cordova

How to debug Cordova custom plug-in code

Let’s start with how to debug the front end of Cordova. Let me take Android as an example. First turn on the Debug mode of your Android phone, and then use the cable to connect it to your computer. Open Chrome Developer Tools, Settings->More Tools ->Remote Devices:

Here I can see that the Samsung SM A7100, on which I am running the Cordova app, is in Connected state.

2. I started Cordova on my Samsung phone and found a “WebView in IO. Cordova. .” This is my Cordova app running on a Samsung phone. As mentioned earlier, the app actually runs in an embedded Webview. Click the “Inspect” button:

3. Switch to the Sources TAB, where you can see the HTML and Javascript source code loaded so far. The rest of the time is no different than when you test a Web application running in a PC browser. Note that the title of the developer tool “file:///android_asset/www/index.html” indicates where the index.html for the current debugging is located.

For example, line 38 is the entry point from the Cordova JavaScript code to the Cordova plug-in code I developed for Android.

Line 967 below is the boundary between JavaScript code and Java code. For details on how JavaScript code is implemented in the Java stack, see my other article on JavaScript code interacting with Java in Cordova.

This section describes how to debug a custom Cordova plug-in

Following the steps described in this article, we developed a Cordova plug-in for The Android platform using Java.

Now I want to debug this plug-in on my Windows computer.

Assume that my Cordova project name is JerryUI5HelloWorld, and under this folder there is a sub-folder FFFFFF, find the Android folder inside:

Open the Android subfolder with Android Studio. Find your plugin implementation file and set a breakpoint in Android Studio.

Start the project in Debug mode in Android Studio:

Run the Cordova application on the phone again. The JavaScript code entry for invoking the Cordova plug-in is as follows. The plugin name Adder corresponds to the Java class of the same name, and the plugin method performAdd is handled by the Java class Adder:

A breakpoint for the Java plug-in was triggered successfully:

Cordova can be called from JavaScript via the Cordova framework by using the Android Studio call stack.

1. SystemExposedJsApi.exec

2. CordovaBridge.jsExec

3. PluginManager.exec

4. CordovaPlugin.exec

5. Our custom plug-in is called

This call stack is also consistent with the details of JavaScript code and Java interaction described in my article on the Cordova plugin.

For more of Jerry’s original technical articles, please follow the public account “Wang Zixi” or scan the following QR code: