ionic調試方式

註：本文是翻譯而來，難免有錯誤之處，請大家多多批評指正，大家也可移步原文。 死亡白屏（White Screen of Death）

我想“死亡白屏”應該是不需要解釋的，開發過ionic app的童鞋應該都有遇到過，這裡解釋以防讀者沒有聽說過：“可能在瀏覽器中調試時一切正常，當你在真機或模擬器上測試時不正常，當app啟動時只有空白的頁面”。

在我的開發中，死亡白屏經常是因為缺失了JavaScript檔案，這就中斷了Angular初始化app的過程，從而不能載入我們的視圖模板，所以顯示空白的頁面。

不幸的是，導致“死亡白屏”的原因多種多樣，不能確切的說明是什麼原因，因為在真機或模擬器上沒有控制台。

下面，就介紹2種調試的方法： ionic Live Reload

談到ionic Live Reload，我想開發過ionic的童鞋都應該知道，當使用ionic serve在瀏覽器中調試時，改變代碼會使頁面重新載入，從而極大的方便了我們的調試。

當使用真機或模擬器時，即使用ionic run或ionic emulate命令時加上–consolelogs參數，即可在終端中輸出app的相關資訊：

<code class="language-bash hljs  has-numbering" style="display: block; padding: 0px; background: transparent; color: inherit; box-sizing: border-box; font-family: "Source Code Pro", monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal;">$ ionic run/emulate android/ios --consolelogs</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right: 1px solid rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right: 1px solid rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul>

但是–consolelogs參數不能單獨使用，需配合–livereload參數使用，即：

<code class="language-bash hljs  has-numbering" style="display: block; padding: 0px; background: transparent; color: inherit; box-sizing: border-box; font-family: "Source Code Pro", monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal;">$ ionic run/emulate android/ios --livereload --consolelogs</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right: 1px solid rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right: 1px solid rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul>

或者使用簡寫版本：

<code class="language-bash hljs  has-numbering" style="display: block; padding: 0px; background: transparent; color: inherit; box-sizing: border-box; font-family: "Source Code Pro", monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal;">$ ionic run/emulate android/ios <span class="hljs-operator" style="box-sizing: border-box;">-l</span> -c</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right: 1px solid rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right: 1px solid rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul>

其中-l代表–livereload，-c代表–consolelogs。

Live Reload option的作用和瀏覽器調試下的ionic serve作用類似，當調試過程中改變了代碼，真機/模擬器上的app會自動更新。但是需要注意的是，對於外掛程式的任何改變都會導致app的重新構建(rebuild)。Live Reload option起作用還有個前提：你的主機和測試裝置或模擬器需要處於同一區域網路，並且測試裝置或模擬器必須支援web sockets。

如果測試時，某個相依模組不存在或者不能被Angular找到，可能的輸出如下： 
Chrome Developer Tools

談及Chrome Developer Tools可以說是無人不知了，Chrome不僅有簡潔的介面，還有強大的Chrome Developer Tools，調試利器。但是對於ionic app來說，Chrome Developer Tools只能對Android真機或android模擬器進行調試。 首先，使用USB線串連你的主機和android測試機，確保你的測試機已經開啟了USB調試並已經允許你的主機對你的android測試機進行調試; 然後，開啟Chrome瀏覽器，地址欄輸入chrome://inspect，斷行符號; 現在網頁中應該能看到你的裝置，如果沒有看到，可以參照官方文檔（自備梯子）。這裡我使用的是模擬器： 

點擊inspect，Chrome會建立一個調試視窗，剩下的就和網頁的調試一樣了，看一眼Console，可能會看到如下結果： 
結語

可以看到，最簡單實用的方式是使用Live Reload參數，適用於Android和IOS，如果只是調試Android，那麼使用Chrome Developer Tools將是最好的選擇。

官網上有很詳細的解說  http://blog.ionic.io/live-reload-all-things-ionic-cli/

下面說說我自己的調試過程（android版):

首先用命令列進入你的項目目錄：

然後運行命令

ionic platform add android/ios

我是建立了android app 所以運行 ionic platform add android

然後運行 ionic run android -l -c -s    或者    ionic emulate android -l -c -s

ios 運行 ionic run/emulate ios -livereload -consolelogs -serverlogs

參數含義：

 [--livereload|-l] .... Live Reload app dev files from the device [--consolelogs|-c] ... Print app console logs to Ionic CLI [--serverlogs|-s] .... Print dev server logs to Ionic CLI

如果你沒有運行安卓手機模擬器，會報錯

如下：

可以開啟genymotion (android模擬器） 沒有可參考 http://jingyan.baidu.com/article/3ea51489e7d8bd52e61bba36.html

然後在命令列重新輸入ionic run android -l -c -s

你的程式就會在genymotion裡運行，就可以開始進行調試了

如果沒有genymotion 可以直接用android-sdk 的AVD Manager.exe建立一個安卓模擬器。

新手上路，多多指教~謝謝

其他參考連結：

這裡提供了幾個debug ionic app on ios的方法  http://stackoverflow.com/questions/25689270/debug-ionic-app-on-ios