Ionic4 cordova混合開發的開發除錯環境搭建

Ionic4混合開發首選應該是capacitor，但capacitor剛推出不久還不夠成熟，所以選擇使用傳統的cordova方式開發。基本上，Ionic native5和之前版本使用方式上變化不大，但cli有些選項上有些區別。

1.建立platform

新增android平臺

ionic cordova platform add android

刪除android平臺

ionic cordova platform remove android

2.編譯ionic專案原始檔到www目錄

只有在Android studio中執行除錯ionic專案才需要執行cordova的prepare命令，用於ionic原始碼被修改之後，更新Android studio中相應的原生專案。

ionic cordova prepare android

如果要編譯release版本，可以新增引數：

ionic cordova prepare android --release --prod

3.ionic模擬器或者真機除錯

以下命令在模擬器上執行app，最好在執行命令之前啟動模擬器。

ionic cordova emulate android -l

注意，原先3.x版本的--consolelogs引數在4.x版本已經不支援，至少在4.1版本不支援，也不知道以後是否會支援。因此，呼叫console.log等方法輸出到瀏覽器控制檯的資訊，無法通過ionic輸出到命令列。

要檢視console.log等方法輸出到瀏覽器控制檯的資訊，目前只能進入模擬器的Extended controls視窗的Bug report選項卡，然後在Bug report data下方視窗複製日誌資訊到記事本中，然後查詢"SystemWebChromeClient"或者"I chromium"定位console資訊。

這個方法比較麻煩，所以建議採用第4步的方法，使用Android studio除錯app。

連線真機執行除錯app的cli：ionic cordova run android -l

4.在Android studio中執行除錯ionic專案(真機或者模擬器除錯)

如果專案之前曾經使用ionic在模擬器和真機上除錯執行，Android studio匯入專案可能會失敗，此時需要用ionic cordova platform remove android刪除android平臺，然後再次使用ionic cordova platform add android新增。

執行Android studio，匯入專案platformsandroid，可能會提示配置gradle.wrapper，點選確定。配置過程中，可能會發生build失敗，提示gradle版本過高，可以點選自動修改配置。然後還可能出現android sdk版本缺失，可以按照提示下載安裝android sdk。

點選 Run/Edit configurations選單，點選+號，新增一個android app配置；在Gerenal選項卡的Module下拉框中選擇app，點選確定建立配置。然後可以執行或者除錯配置。

之後修改ionic原始碼，只需要重新執行第2步的ionic cordova prepare命令，就可以同步到android studio專案。

除錯之前，最好先把模擬器執行起來，執行模擬器之前最好wipe data。

在下方的Logcat視窗中，篩選框中輸入 I/chromium，可以檢視ionic專案中呼叫console.info/debug等方法輸出到瀏覽器console中的訊息。真機除錯時比較有用。