我之前寫過三篇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的互動細節介紹  裡講解的一致。