Cordova應用的JavaScript代碼和自定義插件代碼的調試

我以前寫過三篇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的原創技術文章，請關注公衆號"汪子熙"或者掃描下面二維碼: