debugging an ionic app for android platform

4
votes

I have been working with ionic and my application works fine using ionic serve.

However, as soon as I launch the apk in android, it gives white death screen and stays there.

What are the ways in which I can debug my ionic app for android platform?

I once researched a bit about debugging and got to know about chrome remote debugging.

The phone shows up in connected device and the documentation https://developer.chrome.com/devtools/docs/remote-debugging suggests to add the mentioned line of code in webview class. How do I do that? What is the equivalent of web view class in ionic?

I hear people adding it to html views they want to debug but does that suggest that I need to add it to every html page in case I need to debug all my app? It does not sound such a great solution in that case.

Can I please get some help on this?

Also, if there are other simpler ways to debug ionic app, I would really appreciate if mentioned.

Besides, I do not own android with 4.4 + ver. so would be glad to know about alternatives that support android 4.1 .

4
androidgoogle-chromedebugging

4 Answers

8
votes

Try to set the flag android:debuggable="true" into your AndroidManifest.xml? Or use the emulator by using ionic emulate android.

Otherwise try to run your app with ionic run --debug android.

0
votes

Have you tried Genymotion? It's an emulator.

  • Connect the device to the computer.
  • Allow access in the device.
  • Check is correctly connected with adb devices in the console.
  • ionic run android -l
  • In Chrome, go to chrome://inspect.
  • Click inspect in your app.
  • And voilà.
0
votes

For ionic, you can add android:debuggable="true" in the application tag in platforms/android/AndroidManifest.xml

run

ionic run --debug android

then go to chrome, type: chrome://inspect/#devices in URL, and find your device, if you can't find it, it means the debug mode is not on or not authorized.

When you click inspect in the chrome under the device, and still it shows nothing, or blank:

Try to use CTRL+SHIFT+i to inspect this blank window.

If you are in China, you have to enable your VPN to be able to use this feature. Otherwise it'll show blank after you click inspect.

0
votes
ionic build --debug

Should do the trick.