我之前寫過三篇Cordova相關(guān)的技術(shù)文章。當(dāng)我們使用Cordova將自己開發(fā)的前端應(yīng)用打包安裝到手機(jī)上后，可能會(huì)遇到需要調(diào)試Cordova應(yīng)用的時(shí)候。

本文就介紹Cordova應(yīng)用的調(diào)試步驟。

如果大家讀過之前我寫的文章，就知道Cordova應(yīng)用在移動(dòng)平臺(tái)上運(yùn)行時(shí)，實(shí)際上Cordova包內(nèi)的前端應(yīng)用的HTML/JavaScript代碼仍然運(yùn)行在一個(gè)嵌入的Webview里。同時(shí)Cordova也允許開發(fā)人員開發(fā)一些插件，這些插件能調(diào)用基于特定移動(dòng)平臺(tái)的原生API，通過Cordova框架直接暴露給前端JavaScript消費(fèi)。因此本文包含兩部分的介紹：

如何調(diào)試Cordova應(yīng)用里的JavaScript代碼

如何調(diào)試Cordova自定義插件的代碼

先說(shuō)Cordova前端代碼如何調(diào)試。這里我以Android安卓平臺(tái)為例。首先打開安卓手機(jī)的調(diào)試模式，然后用數(shù)據(jù)線連接到電腦上。打開Chrome開發(fā)者工具，Settings->More tools->Remote devices：

這里我就能看到我正在運(yùn)行Cordova應(yīng)用的三星手機(jī)，SM A7100，狀態(tài)處于已連接狀態(tài)（Connected）。

2. 在我的三星手機(jī)上啟動(dòng)Cordova應(yīng)用，然后在Chrome開發(fā)者工具里能看到SM-A7100對(duì)應(yīng)的應(yīng)用列表里出現(xiàn)了一個(gè)"WebView in io.cordova.hellocordova....", 這條記錄就是我在三星手機(jī)上運(yùn)行的Cordova應(yīng)用，前面已經(jīng)說(shuō)了，該應(yīng)用實(shí)際上是運(yùn)行在一個(gè)嵌入的Webview里的。點(diǎn)擊”Inspect"按鈕：

3. 切換到Sources標(biāo)簽頁(yè)，這里能看到目前為止加載的html和Javascript源代碼。剩下的時(shí)候和平時(shí)調(diào)試運(yùn)行在PC瀏覽器里的Web應(yīng)用沒有任何區(qū)別。注意開發(fā)者工具的標(biāo)題"file:///android_asset/www/index.html提示了當(dāng)前調(diào)試的index.html所在的位置。

例如下圖第38行，實(shí)際就是從Cordova JavaScript代碼執(zhí)行到我自己開發(fā)的基于Android平臺(tái)的Cordova插件代碼的入口位置。

下圖第967行是JavaScript代碼到Java代碼的分界嶺。具體JavaScript代碼是如何執(zhí)行到Java棧中去的，請(qǐng)看我的另一篇文章 Cordova插件中JavaScript代碼與Java的交互細(xì)節(jié)介紹。

Cordova自定義插件的調(diào)試步驟

按照這篇文章 使用JavaScript調(diào)用手機(jī)平臺(tái)上的原生API 介紹的步驟，用Java開發(fā)了一個(gè)基于Android平臺(tái)的Cordova插件。

現(xiàn)在我想在我的Windows電腦上對(duì)這個(gè)插件進(jìn)行調(diào)試。

假設(shè)我的Cordova項(xiàng)目名稱為JerryUI5HelloWorld，在這個(gè)文件夾下有一個(gè)子文件夾platforms，找到里面的android文件夾：

用Android Studio打開這個(gè)android子文件夾。找到你的插件實(shí)現(xiàn)文件，在Android Studio里設(shè)置好斷點(diǎn)。

在Android studio里用調(diào)試模式啟動(dòng)項(xiàng)目：

在手機(jī)上再次執(zhí)行Cordova應(yīng)用，JavaScript代碼里調(diào)用Cordova插件的入口如下。插件名稱Adder，對(duì)應(yīng)Java里的同名類，插件方法performAdd，會(huì)在Java類Adder里得到處理：

Java插件的斷點(diǎn)成功觸發(fā)了：

從Android Studio里的調(diào)用棧能進(jìn)一步研究我們開發(fā)的Cordova插件是如何通過Cordova框架從JavaScript端被調(diào)用的：

1. SystemExposedJsApi.exec

2. CordovaBridge.jsExec

3. PluginManager.exec

4. CordovaPlugin.exec

5. 我們的自定義插件被調(diào)用

這個(gè)調(diào)用棧也和我這篇文章 Cordova插件中JavaScript代碼與Java的交互細(xì)節(jié)介紹 里講解的一致。

要獲取更多Jerry的原創(chuàng)技術(shù)文章，請(qǐng)關(guān)注公眾號(hào)"汪子熙"