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的相關信息：
$ ionic run/emulate android/ios --consolelogs
$ ionic run android --consolelogs
但是–consolelogs參數不能單獨使用，需配合–livereload參數使用，即：
$ ionic run/emulate android/ios --livereload --consolelogs
$ ionic run android --livereload --consolelogs
或者使用簡寫版本：
$ ionic run/emulate android/ios -l -c
$ ionic run android -l -c
其中 -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將是最好的選擇。
ionic 調試 "死亡白屏"