Ionic Debug Mode

Note: This article is translated, inevitably there is a mistake, please make a lot of criticisms, we can also go to the original text. Death white screen ( white screen of death)

I think "death white screen" should be no need to explain, developed ionic app of children's shoes should have encountered, here to explain in case readers have not heard: "may be debugging in the browser is normal, when you test on the real machine or simulator is not normal, when the app launches only blank pages."

In my development, the death white screen often because of missing JavaScript files, which interrupts the process of angular initialization of the app, so that we can not load our view template, so display a blank page.

Unfortunately, the causes of "death white screen" are varied and cannot be precisely explained because there is no console on the real machine or simulator.

Here are the 2 ways to debug: ionic Live Reload

Speaking of Ionic Live Reload, I would like to develop ionic children's shoes should know that when using ionic serve in the browser debugging, change the code will make the page reload, which greatly facilitates our debugging.

When using a real machine or simulator, you can use the Ionic run or Ionic emulate command with the –consolelogs parameter to output information about the app in the terminal:

<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>

However, the –consolelogs parameter cannot be used alone and should be used with the –livereload parameter, i.e.:

<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>

or use the abbreviated version:

<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>

Where-L represents –livereload,-c on behalf of –consolelogs.

The role of Live Reload option is similar to the role of Ionic serve under browser debugging, and when the code is changed during debugging, the app on the real machine/emulator is automatically updated. However, it is important to note that any changes to the plugin will cause the app to be rebuilt (rebuild). Live Reload option has a premise: your host and test device or simulator need to be on the same LAN, and the test device or emulator must support Web sockets.

If a dependent module does not exist or cannot be found by angular when testing, the possible output is as follows:
Chrome Developer Tools

When it comes to chrome Developer tools, no one can say that Chrome has a simple interface, powerful chrome Developer tools, and a debugging tool. But for the Ionic app, Chrome Developer tools can only debug Android real-computer or Android simulator. First, use the USB cable to connect your console and Android test machine, make sure your test machine has turned on USB debugging and has allowed your host to debug your Android test machine; Then, open Chrome browser, address bar input chrome://inspect, enter; You should now be able to see your device in the Web page, if you don't see it, you can refer to the official documentation (bring your own ladder). Here I am using the simulator:

Click Inspect,chrome will create a new debugging window, the rest is the same as the page debugging, look at the console, you may see the following results:
Conclusion

As you can see, the simplest and most practical way to use the live reload parameter is for Android and iOS, and if you just debug Android, using Chrome Developer tools will be the best option.

The official website has very detailed explanation http://blog.ionic.io/live-reload-all-things-ionic-cli/

Let's talk about my own debugging process (Android version):

First use the command line to enter your project directory:

Then run the command

Ionic Platform Add Android/ios

I created the Android app so run Ionic platform add Android

Then run Ionic run Android-l-c-s or ionic emulate Android-l-c-s

iOS running Ionic run/emulate ios-livereload-consolelogs-serverlogs

Parameter meaning:

[--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

If you do not run the Android phone simulator, you will get an error

As follows:

can open Genymotion (Android emulator) not available for reference http://jingyan.baidu.com/article/3ea51489e7d8bd52e61bba36.html

Then re-enter Ionic run android-l at the command line-c-s

Your program will run in Genymotion and you can start debugging.

If there is no genymotion you can create an Android simulator directly with the ANDROID-SDK AVD Manager.exe.

Novice on the road, a lot of advice ~ Thank you

Additional Reference Links:

Here are a few ways to debug Ionic app on iOS Http://stackoverflow.com/questions/25689270/debug-ionic-app-on-ios