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

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?

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?

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

Related

How to debug a website in Android Studio?

I've suspected for a while that my website doesn't work on Android WebView. Trying to debug this, I've installed Android Studio, and fired up some emulators. Sure enough, my website does not behave properly when viewed in WebView in the emulator.
But, I'm not an app developer, and I've never used Android Studio before. Predictably, all of the docs are focused on creating apps :).
How can I debug what's happening in the WebView? Do I need to create an empty project? Is there some DevTools equivalent? Or maybe some way to dump what it's doing to a log file?
I just need a starting point, and am happy to read docs if I'm pointed in the right direction.

Android Studio and Capacitor cannot finde console.log() output

I have a Angular Application that i converted via Capacitor to a Android App. If i start my app in Android Studio i cannot access my Nodejs. Therefor i want to use the console.log() to see where my problem is.
But i cant find an output of my log, even though its there in the web console.
You can see Capacitor logs in two different places.
Chrome remote inspector, just type this in your Desktop Chrome chrome://inspect/#devices and your device should appear there and a list of webs and apps that can be debugged, choose your app and you'll see all the console.logs there.
Logcat. Inside Android Studio on the bottom on the screen there should be a Logcat section, if you click it it should show console.log messages and also native messages.

Not able to run Emulator using the Android studio for my Flutter app, getting NO CONNECTED DEVICES error

Please Note: I tried several available solutions but none worked for me since yesterday hence posting this. I have also mentioned below what are things I have tried so far.
I am new to Android Studio and Flutter application and I am trying to build a simple Flutter app using the Android Studio.
I have downloaded and kept my flutter files in C:\src\flutter. Also added to Environment variables.
I have installed the Android Studio and also installed the Flutter plugin with the Dart.
I created the Virtual Emulator Device using the Tools->AVD Manager and choose the Nexus 6 with the Android 8.1
Created a simple project using the File->New Flutter Project->Flutter Application.
When I try to run this application I get the following error:
As you can see in the screenshot it shows that the No Devices in the emulator section not sure how to run it.
Things I have tried so far:
If I run flutter doctor then I get a tick for all the things except Connect Devices. My guess is that it is obvious because I have not connected any external device but using the emulators.
I tried to create the emulators using the command flutter emulators --create Nexus_6 and tried to launch it using the command flutter emulator launch.
I tried running the Android studio as an Administrator.
Restarted the system several times.
My adb.exe was crashing so updated the windows and replaced it with the new adb.exe as mentioned in one of the solutions.
My flutter emulators show following list in the command prompt:
I tried checking the folder in Appdata -> Local seems to be fine as per other mentioned answers.
When I run the Emulator using the AVD Manager from Android Studio I see that it is firing up the Android Emulator but it is not responding. In addition to this, I also observe in my task manager that process adb.exe(32 bit) is running whereas my WINDOW 8.1 is 64 bit. Is this expected?
I am not sure If I missed something here. Please help me on how to solve the issue.
Using below command on Flutter worked for me:
flutter config --android-sdk [android-sdk-path]
The path is usually C:\Users<username>\AppData\Local\Android\sdk
this path can be found from android studio - SDK manager also.

Kudan sample app not launching

I have problem with launching Kudan sample app on my phone. I am using Kudan in Android Studio.
I created project as was described on website, checked is matches bundeID in my app and on the website(I know key wont be working if they are not the same), Studio doesnt show any errors or warning during compilation, but I cant still launch it on my phone.
Anyone any ideas what might cause it?
Thanks.

Typescript debug for Ionic2-Angular2 application in Visual Studio code

I am working on Ionic2-Angular2 all device (ios/Android/Desktop) app and looking for a good solution to debug Typescript for Ionic2-Angular2 application in Visual Studio code. I know it is easy to debug Node.js backend code in VSCode but ionic 2 application which is targeted to run on various platforms including desktop has mainly client side code written in Angular2-Typescript. VSCode is my favorite editor but ready to move any open source IDE/Editor if it supports Ionic2-Angular2 and Typescript.
you debug it the same way you debug Ionic 1 applications.
See here in the cordova documentation
https://cordova.apache.org/docs/en/latest/guide/next/#debugging-cordova-apps

Resources