Capacitor compiled Ionic app: How to debug in Android Studio?

Question

I used the command

ngx cap open android

to open my Ionic 5 project in Android Studio like described here. This works fine.

In my app, i`m connecting to server which returns json data needed by my app. This connection does not seem to work, I only have the loading animation in my app.

How can I debug this? It is working in the PWA version and on my Ionic testserver, but the app has a problem connecting. I need an error message or something, to know what goes wrong.

What is a good way to fix such problems? Can I output or log something in android studio from the typescript code?

Platon

Answer 1

Open the Chrome browser and navigate to the URL chrome://inspect/#devices. Your connected Android device should show up in the list of Remote Targets.

On your device, open the Ionic app that you would like to debug using Chrome. With your app running on the device, head back to Chrome and click on inspect chrome://inspect/#devices

see more: Capacitor compiled Ionic app: How to debug in Android Studio?

Aglimmer

Thank you! I Love it! :) – Platon

Answer 2

I have posted a full project here specifically for use with Angular and Capacitor.

I believe the trick is that you have to use live-reload to debug. If you used the ionic cli to build your project then you should be good to go using the basic commands provided, otherwise you will need to so some modifications manually. This project, post breaks it all down

https://github.com/aaronksaunders/plain-ng-cap-app

Capacitor Run, see section on liveReload - https://ionicframework.com/docs/cli/commands/capacitor-run

Balmung