Debug White Screen Ionic error on devices
This type of error occurs when your Ionic app is working fine in your desktop browser (ionic serve) and then you deploy it to a device or emulator and it doesn’t work at all! What you see is a white screen when you open the app.
There are two ways to figure out what is happening one is using the cli livereload with consolelogs when using run or emulate command, and the second one is using the chrome developer tool.
Ionic livereload with consolelogs
You can only use –consolelogs if you also use –livereload.
ionic run android --livereload --consolelogs
You can use the shorthand version:
ionic run android -l -c
Chrome Developer Tool
You need to configure your device to enable developer mode. For more information go here: https://developers.google.com/web/tools/chrome-devtools/remote-debugging/
Now you need to run your app on an Android device, you can attach the Chrome Developer Tools to the app and see the error in the Console, you need to connect your device with a USB cable to your computer, open your desktop Chrome browser and type chrome://inspect on the address bar.
You should see your device listed, click on inspect and from there you can use the Developer Tools the same way you use it for your desktop browser when do ionic serve. You should see the error causing the white screen, and any other relevant information like the console.log() that you placed on your ionic app code.
This doesn’t work for iOS and Safari web inspector, the most universal way is to use the –livereload option, which will work for both iOS and Android.