資訊專欄INFORMATION COLUMN
摘要：首先打開安卓手機的調試模式，然后用數據線連接到電腦上。打開開發者工具，這里我就能看到我正在運行應用的三星手機，，狀態處于已連接狀態。
我之前寫過三篇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的原創技術文章，請關注公眾號"汪子熙"或者掃描下面二維碼:
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/98591.html
摘要：介紹暢想是由團隊最新開發維護的一個跨平臺的應用程序容器，可以輕松構建在，，和上本機運行的應用程序。后者旨在替代或者說是進化。希望看到在未來發展，以及正式發布。我認為它有可能大大改善混合應用開發體驗。 1.介紹or暢想 Capacitor是由ionic團隊最新開發維護的一個跨平臺的應用程序容器，可以輕松構建在iOS，Android，Electron和Web上本機運行的Web應用程序。我們...
摘要：目前成都所有基于云的產品開發團隊無一例外地采用了這種方式。值得一提的是雖然其后臺仍然基于但是的應用的部署方式沒有采用本文介紹的方式一，而是本章節正在介紹的方式二。 showImg(https://segmentfault.com/img/remote/1460000013266451); 封面圖片來自Google搜索，關鍵字: Fiori Deployment 方式1 On premi...
摘要：目前成都所有基于云的產品開發團隊無一例外地采用了這種方式。值得一提的是雖然其后臺仍然基于但是的應用的部署方式沒有采用本文介紹的方式一，而是本章節正在介紹的方式二。 showImg(https://segmentfault.com/img/remote/1460000013266451); 封面圖片來自Google搜索，關鍵字: Fiori Deployment 方式1 On premi...
閱讀 4175·2023-04-26 02:40
閱讀 2663·2023-04-26 02:31
閱讀 2758·2021-11-15 18:08
閱讀 574·2021-11-12 10:36
閱讀 1435·2021-09-30 09:57
閱讀 5208·2021-09-22 15:31
閱讀 2633·2019-08-30 14:17
閱讀 1281·2019-08-30 12:58
