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?
Table of Contents
[spoiler title=” Click here if you want to see other tutorials, or articles about the Ionic framework (themes, templates, plugins, tutorials)”]
- Series 1 | Installation
- Series 2 | Anathomy of a Page
- Series 3 | UI Patterns
- Series 4 | Mixing UI Patterns
- Series 5 | Master Detail Pattern
- Series 6 | Side Menu Pattern
- Series 7 | Tab Pattern
- Series 8 | Page Navigation
- Series 9 | Passing Data Between Pages
- Series 10 | Form Handling And Validation
- Series 11 | Infinite Scroll
- Series 12 | Pull To Refresh
- Series 13 | Touch Gestures
- Series 14 | Grid System
- Series 15 | Storing data in Ionic Framework
- Series 16 | Using Google Maps With Ionic Framework
- Series 17 | Ionic Framework | Get Page Height & Width
- Series 18 | Understanding Ionic View LifeCycle
- Series 20 | Handling Android Back Button Like a Pro
- Series 21 | How to Properly Debug Your Ionic Application
- Series 22 | Creating a Transparent NavBar In Ionic Framework
- Series 23 | What’s the difference between Cordova and Ionic ready state
- Series 24 | Why is The .dot Notation Important in Ionic Framework?
- Series 25 | Programmatically Show Ion List Options Buttons in Ionic Framework
- Series 26 | How to Create Elegant Slider Carousel in Ionic Framework
- Series 27 | Speed Up Your Ionic Application Using These Techniques
Other Resources (themes, templates, plugins, Cordova plugins, starter apps)
- Best Looking Ionic Framework Themes
- Must-have plugins for Ionic Framework
- A Comprehensive List Of Ionic Starter Apps
- Useful Cordova Plugins For Your Ionic Application & Examples
- 15 Great Inspirational UI Theme Designs For Ionic Framework
Cordova Plugin Tutorials
- Changing & Locking Screen Orientation In Ionic Application
- Using Smartphone Camera With Ionic Framework
- Whitelist External Resources and API Calls | Ionic Framework
- Using Cordova Geoloacation API with Google Maps in Ionic Framework
- How to Launch External Application With Ionic Framework
- Using Cordova File Transfer Plugin With Ionic Framework
- How to send an SMS with Ionic Framework and ngCorodva
- How to use Local Notifications with Ionic Framework
- How to Search, Create, and Delete Contacts Using Ionic Framework
- How to Open a File using its default application in Ionic Framework
- How to Show Different Native Modal Windows In Ionic Framework
- Accessing Image Galery using Ionic and ngCordova
- Detecting Device Motion With Ionic Framework and ngCordova
- Handling Native View Animations With Ionic Framework
- Retrieving IP Adress Using Cordova Without External Services
- Using Google AdMob in Your Android Ionic Application
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.
- 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.
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 Command–Option–I.
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.
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.