天天看點

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

我之前寫過三篇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應用的JavaScript代碼和自定義插件代碼的調試
Cordova應用的JavaScript代碼和自定義插件代碼的調試

2. 在我的三星手機上啟動Cordova應用,然後在Chrome開發者工具裡能看到SM-A7100對應的應用清單裡出現了一個"WebView in io.cordova.hellocordova…", 這條記錄就是我在三星手機上運作的Cordova應用,前面已經說了,該應用實際上是運作在一個嵌入的Webview裡的。點選”Inspect"按鈕:

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

Cordova自定義插件的調試步驟

按照這篇文章 使用JavaScript調用手機平台上的原生API 介紹的步驟,用Java開發了一個基于Android平台的Cordova插件。

現在我想在我的Windows電腦上對這個插件進行調試。

假設我的Cordova項目名稱為JerryUI5HelloWorld,在這個檔案夾下有一個子檔案夾platforms,找到裡面的android檔案夾:

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

從Android Studio裡的調用棧能進一步研究我們開發的Cordova插件是如何通過Cordova架構從JavaScript端被調用的:

1. SystemExposedJsApi.exec

2. CordovaBridge.jsExec

3. PluginManager.exec

4. CordovaPlugin.exec

5. 我們的自定義插件被調用

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

這個調用棧也和我這篇文章 

Cordova插件中JavaScript代碼與Java的互動細節介紹

 裡講解的一緻。