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

                    小編:管理員 736閱讀 2022.09.13

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

                    關聯標簽:
                    无码精品人妻一区二区三区软件