Each time we work on something new there’s a good chance something can or will go wrong. Let’s consider any form of software development and apply Murphys Law to it, whatever can go wrong, will go wrong. Now, look at it from the perspective of the Ionic Framework, every single one of us will sooner or later hit a brick wall called white screen of death, or even state where application looks like it’s working just fine but at the same time nothing is working at all.
 
What to do in this situation, how to behave?
 
 

Note: If this tutorial was helpful, need further clarification, something is not working or do you have a request for another Ionic post? Furthermore, if you don't like something about this blog, if something is bugging you, don't like how I'm doing stuff here, again leave me a comment below. I'm here to help you, I expect the same from you. Feel free to comment below, subscribe to my blog, mail me to dragan.gaic@gmail.com, or follow and mention me on twitter (@gajotres). Thanks and have a nice day!

PS. If you want my help, if possible (even if it takes you some time to do that), create a working example I can play with. Use Plunker for AngularJS based questions or jsFiddle for jQuery/jQuery Mobile based questions.


 

Table of Contents

 
Click here if you want to see other tutorials, or articles about the Ionic framework (themes, templates, plugins, tutorials)
 

Introduction

 
Before we discuss my previous question let’s consider one last thing. We’re going to define three steps of hybrid mobile application development using Ionic Framework and Cordova.
 
Steps:
 
  • Browser deployment
  • CLI deployment
  • Device deployment
 
Most of us will start working on an application inside a browser. We can do a lot of coding and UI development during this step, what’s more important, it’s fast. We don’t need to worry about sluggish emulators or how it will behave on different devices. These are application baby steps, not yet fully available, but with a so much growing potential.
 
At one point or another our application will outgrow browser environment. It will need to access features and resources only a real device can provide. At this stage we don’t need to rely fully on a real smartphone, let’s just use it as a deployment container. We’ll do everything rest from the command-line interface (CLI).
 
The last step is a final device deployment. Our application is now a mature product living beyond the boundaries of a development environment.
 

Browser Debugging

 
This step is also the easiest one. The only thing you need to do is use your favourite browser developer tools.
 
On Chrome, or Firefox, you can turn it on using Ctrl+Shift+I. Afterwards, just open a console tab:
 
 
Every error you encounter will be shown there.
 
If you’re using Safari you must first enable the Develop menu. To do so, enable the “Show Develop menu in menu bar” setting found in Safari’s preferences under the Advanced pane. You can then access Web Inspector through the Develop menu that appears in the menubar, or by pressing CommandOptionI.

CLI Debugging

 
While browser development can be very fast nothing beats debugging on a real device (or emulator). I personally prefer this solution over the other two; this way you can test your application in the environment it was meant to be used with.
 
Bring on a command prompt window and open your project folder. When time come to test your application just do it like this:
 
ionic emulate ios --livereload --consolelogs --serverlogs
ionic emulate android --livereload --consolelogs --serverlogs

ionic run ios -l -c -s
ionic run android -l -c -s
 
Of course, use the emulate command if you’re working with an emulator or a run command if you’re using a real device. Also, it doesn’t matter if you’re using long or short parameter names, for example, –livereload is identical to -l.
 
This way, any error you encounter will be shown in a command prompt window, it can’t get better than this.
 
Note: If you're using a Cordova Whitelist plugin you may need to remove security meta tag from you application while testing using --livereload/-l parameter. Some people reported livereload is not working in combination with security mate tag.

Device Debugging

 
This solution requires some technical expertise and knowledge.
 
If you’re using an Android smartphone this solution will work only on 4.4 or above devices. First enable developer options mode on your device. Google it if you don’t know how, it depends on a device manufacturer. Usually, you only need to open the Settings About Phone section and several times tap on a Build Number section. After some undisclosed number of taps, you will be informed that Developer Options are available.
 
Now go to this new section and enable USB debugging mode.
 
Next, in your Chrome Browser, go to Settings and open More Tools -> Inspect Devices. Open the application on your Android smartphone and go back to Chrome Inspect Devices section. If everything is configured properly you will find your smartphone as a connected device plus a button called Inspect. If you click this button, Chrome will open a new browser window showing you the application on a left side and a console output on a right side.
 
Even if you inspect your device several minutes after turning on your application you will still be able to see all initial runtime errors, essentially you don’t need to rush this step. This method will also work if you’re deploying the application using:
 
ionic run ios
ionic run android
 
Last but not least, if iOS is your main platform. First you need to enable the remote web inspector on your iOS device and desktop Safari. To do this, enable the Web Inspector option in the iOS Settings -> Safari -> Advanced section, and also enable the Developer Menu in the Advanced section of the Safari OS X settings.

Who Am I?

Between working as a senior Java developer in one of the largest insurance companies in the world and traveling, in my free time, I work as a professional mobile development adviser. I'm also a major jQuery Mobile supporter back at StackOverflow and a forum moderator at the official Ionic Framework forum.

Blogs worth reading

If you're here looking for information related to the Ionic Framework, you will also like these blogs:






  • adalberto Joco

    Awesome article, valuable info. cheers

    • Thank you very much, did you think I can make it better in some way? Was it clear enough?

      • adalberto Joco

        Clear like water, I got all info easily, I didnt know CLI and device debugging. I follow you since Jquery Mobile, thanks God you switch to Ionic 🙂

  • ZiLang

    I got a white screen when I run with -l -c. But it works fine without -l -c. How am I supposed to debug this issue? Thanks.

  • surya teja sharma

    Hi! The article was helpful, but I couldn’t see my device listed in the inspect tab of Chrome. I switched on the developer mode(HTC 826) and ran the application on phone and then used “ionic run android”. Pls help me out .