資訊專欄INFORMATION COLUMN
摘要：首先打開(kāi)安卓手機(jī)的調(diào)試模式，然后用數(shù)據(jù)線連接到電腦上。打開(kāi)開(kāi)發(fā)者工具，這里我就能看到我正在運(yùn)行應(yīng)用的三星手機(jī)，，狀態(tài)處于已連接狀態(tài)。
我之前寫過(guò)三篇Cordova相關(guān)的技術(shù)文章。當(dāng)我們使用Cordova將自己開(kāi)發(fā)的前端應(yīng)用打包安裝到手機(jī)上后，可能會(huì)遇到需要調(diào)試Cordova應(yīng)用的時(shí)候。
本文就介紹Cordova應(yīng)用的調(diào)試步驟。
如果大家讀過(guò)之前我寫的文章，就知道Cordova應(yīng)用在移動(dòng)平臺(tái)上運(yùn)行時(shí)，實(shí)際上Cordova包內(nèi)的前端應(yīng)用的HTML/JavaScript代碼仍然運(yùn)行在一個(gè)嵌入的Webview里。同時(shí)Cordova也允許開(kāi)發(fā)人員開(kāi)發(fā)一些插件，這些插件能調(diào)用基于特定移動(dòng)平臺(tái)的原生API，通過(guò)Cordova框架直接暴露給前端JavaScript消費(fèi)。因此本文包含兩部分的介紹：
如何調(diào)試Cordova應(yīng)用里的JavaScript代碼 如何調(diào)試Cordova自定義插件的代碼先說(shuō)Cordova前端代碼如何調(diào)試。這里我以Android安卓平臺(tái)為例。首先打開(kāi)安卓手機(jī)的調(diào)試模式，然后用數(shù)據(jù)線連接到電腦上。打開(kāi)Chrome開(kāi)發(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開(kāi)發(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)用沒(méi)有任何區(qū)別。注意開(kāi)發(fā)者工具的標(biāo)題"file:///android_asset/www/index.html提示了當(dāng)前調(diào)試的index.html所在的位置。
例如下圖第38行，實(shí)際就是從Cordova JavaScript代碼執(zhí)行到我自己開(kāi)發(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開(kāi)發(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打開(kāi)這個(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)一步研究我們開(kāi)發(fā)的Cordova插件是如何通過(guò)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)"汪子熙"或者掃描下面二維碼:
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/98591.html
摘要：介紹暢想是由團(tuán)隊(duì)最新開(kāi)發(fā)維護(hù)的一個(gè)跨平臺(tái)的應(yīng)用程序容器，可以輕松構(gòu)建在，，和上本機(jī)運(yùn)行的應(yīng)用程序。后者旨在替代或者說(shuō)是進(jìn)化。希望看到在未來(lái)發(fā)展，以及正式發(fā)布。我認(rèn)為它有可能大大改善混合應(yīng)用開(kāi)發(fā)體驗(yàn)。 1.介紹or暢想 Capacitor是由ionic團(tuán)隊(duì)最新開(kāi)發(fā)維護(hù)的一個(gè)跨平臺(tái)的應(yīng)用程序容器，可以輕松構(gòu)建在iOS，Android，Electron和Web上本機(jī)運(yùn)行的Web應(yīng)用程序。我們...
摘要：目前成都所有基于云的產(chǎn)品開(kāi)發(fā)團(tuán)隊(duì)無(wú)一例外地采用了這種方式。值得一提的是雖然其后臺(tái)仍然基于但是的應(yīng)用的部署方式?jīng)]有采用本文介紹的方式一，而是本章節(jié)正在介紹的方式二。 showImg(https://segmentfault.com/img/remote/1460000013266451); 封面圖片來(lái)自Google搜索，關(guān)鍵字: Fiori Deployment 方式1 On premi...
摘要：目前成都所有基于云的產(chǎn)品開(kāi)發(fā)團(tuán)隊(duì)無(wú)一例外地采用了這種方式。值得一提的是雖然其后臺(tái)仍然基于但是的應(yīng)用的部署方式?jīng)]有采用本文介紹的方式一，而是本章節(jié)正在介紹的方式二。 showImg(https://segmentfault.com/img/remote/1460000013266451); 封面圖片來(lái)自Google搜索，關(guān)鍵字: Fiori Deployment 方式1 On premi...
閱讀 4529·2023-04-26 02:40
閱讀 2827·2023-04-26 02:31
閱讀 2902·2021-11-15 18:08
閱讀 719·2021-11-12 10:36
閱讀 1588·2021-09-30 09:57
閱讀 5602·2021-09-22 15:31
閱讀 2776·2019-08-30 14:17
閱讀 1427·2019-08-30 12:58
