徒手除錯 Cordova

Codova 其實也有 圖形介面的除錯工具。 可是貴哥有 「命令列分離焦慮症」。 所以在這裡推薦兩個輕巧的命令列輔助除錯工具： jshint 跟 adb logcat。

首先， javascript 有個很討厭的地方： 有時連 compile error 都默默地等到執行時才發作。 然後你就會感受到： 忠言逆耳利於行， 良藥苦口利於病， 千金難買早知道。 還好， 安裝 jshint 套件不需要千金， 就可以讓你早知道： 用 root 的身份執行 npm install -g jshint。(更正過) 然後就可以這樣檢查你的程式碼： jshint my_code.js。 多花一分鐘聽從 jshint 的勸告， 可能會幫你省下 「一小時都抓不出來」 的莫名其妙 run time error。 其實最早我找到的是 jslint， 不過它太龜毛， 很難取悅， 所以我就改用 jshint 了。

再來， 編譯完， 傳送到手機執行的時候發生錯誤， 該怎麼辦呢? 你可以用 adb logcat 查看錯誤訊息。 但是它的訊息是用噴的， 根本很難看到重點。 所以你可以很認真地學 adb logcat 命令列選項， 或是更簡單地採用貴哥所寫的極小程式 falc.perl 來過篩選出你要的資訊。 根據 這份文件， 它印出來的訊息， 從最重要到最不重要， 分為這幾個等級：

1. Fatal： 致命錯誤
2. Error： 錯誤
3. Warning： 警告
4. Info： (提示) 資訊
5. Debug： 除錯訊息
6. Verbose： 囉嗦訊息

我的程式預設忽略 VDIW 等等不重要等級的資訊 (來自 console 的訊息除外， 下詳) 只留下 EF 等級的重大錯誤。

在其他程式語言裡面很常用的最陽春 print 除錯法， 在 javascript 裡面的寫法是 console.log。 如果要印物件， 可以呼叫 JSON.stringify 函數。 所以在程式裡面可以這樣列印除錯訊息： console.log("customer: " + JSON.stringify(customer));。 不過在編譯打包你的程式之前， 要先加入一個外掛： cordova plugin add cordova-plugin-console (做過一次即可。) 然後執行時就可以這樣同時查看嚴重錯誤以及自己印的除錯資訊： adb logcat | falc.perl。 其中自印的除錯資訊會用不同的顏色印出來。 所謂 「自印的除錯訊息」， 預設是含有 「console」 字串的訊息。 但你也可以自己指定， 例如在程式裡面用 console.log() 印除錯訊息時， 一律加上 「ckhung」 字串， 那麼除錯時可以這樣下： adb logcat | falc.perl ckhung。

還可以自己修改 falc.perl 改採不同的顏色列印。 例如 31;42 表示前景 (3x) 用紅色 (x1)、 背景 (4x) 用綠色 (x2)。 有 0-7 總共 8 個顏色可用。 詳見 ANSI escape sequence。

注意： 如果你呼叫 JSON.stringify 的時候， 有提供第三個參數 (每層縮排的空格數)， 那麼這個變數會被 pretty-print 拆開來印在好幾列。 為了要讓 falc.perl 補捉到， 必須在每一列最前面加上你的除錯標示字串， 類似這樣： console.log("some_var = " + JSON.stringify(some_var,null,4).replace(/\n/g, "\n[ckhung Console LOG]"));