Shulou(Shulou.com)06/02 Report--

This article mainly explains "how to debug Cordova application JavaScript code and custom plug-in code", the content of the article is simple and clear, easy to learn and understand, the following please follow the editor's ideas slowly in depth, together to study and learn "how to debug Cordova application JavaScript code and custom plug-in code" bar!

Let's start with how to debug the Cordova front-end code. Here I'll take the Android Android platform as an example. First turn on the debug mode of the Android phone, and then connect it to the computer with a data cable. Open the Chrome developer tools, Settings- > More tools- > Remote devices:

Here I can see my Samsung phone, the SM A7100, which is running the Cordova app, in the connected state (Connected).

two。 Launch the Cordova app on my Samsung phone, and then in the Chrome developer tool, you can see a "WebView in io.cordova.hellocordova...." in the list of applications corresponding to SM-A7100. This record is the Cordova app I run on my Samsung phone, which, as mentioned earlier, is actually running 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 from debugging Web applications running in PC browsers. Note the title of the developer tool, "file:///android_asset/www/index.html indicates the location of the index.html currently being debugged."

For example, line 38 of the figure below is actually the entry point from the execution of the Cordova JavaScript code to the Cordova plug-in code based on the Android platform that I developed myself.

Line 967 below is the dividing line between JavaScript code and Java code. For details of how JavaScript code is executed into the Java stack, see my other article, the interaction between JavaScript code and Java in the Cordova plug-in in detail.

Debugging steps for Cordova Custom plug-in

Following the steps introduced in this article to use JavaScript to call native API on the mobile platform, a Cordova plug-in based on Android platform is developed with Java.

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

Suppose my Cordova project is named JerryUI5HelloWorld, and there is a subfolder platforms under this folder. Find the android folder inside:

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

Start the project in debug mode in Android studio:

Execute the Cordova application on the phone again, and the entry for calling the Cordova plug-in in the JavaScript code is as follows. The plug-in name Adder, which corresponds to the class of the same name in Java, and the plug-in method performAdd, will be handled in the Java class Adder:

The breakpoint of the Java plug-in successfully triggered:

From the call stack in Android Studio, you can further explore how the Cordova plug-in we developed is called from the JavaScript side through the Cordova framework:

1. SystemExposedJsApi.exec

2. CordovaBridge.jsExec

3. PluginManager.exec

4. CordovaPlugin.exec

5. Our custom plug-in is called

Thank you for your reading, the above is the content of "how to debug Cordova application JavaScript code and custom plug-in code". After the study of this article, I believe you have a deeper understanding of how to debug Cordova application JavaScript code and custom plug-in code. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.