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

這篇文章主要講解了“怎么調試Cordova應用的JavaScript代碼和自定義插件代碼”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“怎么調試Cordova應用的JavaScript代碼和自定義插件代碼”吧！

先說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代碼和自定義插件代碼”的內容了，經過本文的學習后，相信大家對怎么調試Cordova應用的JavaScript代碼和自定義插件代碼這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！