Menu
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?
826
When the application is running, select Attach to running android on device or Attach to running android on emulator to attach the debugger to it. From here on, you can set breakpoints, inspect variables, and do everything else that the Visual Studio Code debugger supports.
Developer Options & USB Debugging are enabled by default in the Android emulator. 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.
To inspect your app with remote debugging, open Chrome and now navigate to chrome://inspect/devices, which will show you all connected devices. Click on inspect for the instance you want to debug and a new window with the familiar Chrome debugging tools comes up.
Now, on your Android device, open the Ionic Framework app that you would like to debug using Chrome. Once your app is running on the Android device, go back to Chrome and click on "Inspect" under your device in the list of remote targets. This will open the Chrome Developer Tools in a new window.
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?
157
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
23
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
