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

Capacitor
1

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?

I created a stackoverflow entry, too, but did not get an answer yet:

2

Try this: Remote Debugging WebViews with the Chrome Developer Tools.

1 Like
3

Thank you! This looks good, I will try it.

4

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,

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

Otherwise you will need to so some modifications manually. This project, post breaks it all down

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

1 Like
5

same here for my ionic 5 project.

Cannot connect from android simulator or on android device: i.e. 1st backend API call (for signin in my app) does not connect. It works fine with iOS.

Tried Remote Debugging Webviews and saw below error despite HTTP response is 200/ok

webview-debug-error
webview-debug-error1358×472 88.1 KB

full stack

"SyntaxError: Unexpected token < in JSON at position 0
    at JSON.parse (<anonymous>)
    at XMLHttpRequest.onLoad (http://localhost/vendor-es2015.js:10132:51)
    at ZoneDelegate.invokeTask (http://localhost/polyfills-es2015.js:3741:31)
    at Object.onInvokeTask (http://localhost/vendor-es2015.js:73280:33)
    at ZoneDelegate.invokeTask (http://localhost/polyfills-es2015.js:3740:60)
    at Zone.runTask (http://localhost/polyfills-es2015.js:3518:47)
    at ZoneTask.invokeTask [as invoke] (http://localhost/polyfills-es2015.js:3815:34)
    at invokeTask (http://localhost/polyfills-es2015.js:4953:14)
    at XMLHttpRequest.globalZoneAwareCallback (http://localhost/polyfills-es2015.js:4990:21)"

In network tab the request is fine
{email: "john.doe@provider.com", password: "xyz123"}

but the answer is curiously not json, it is a capacitor code:

<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript">window.Capacitor = { DEBUG: true };
//# sourceURL=capacitor-runtime.js
(function(win) {
  win.Capacitor = win.Capacitor || {
    Plugins: {}
  };

Note breakpoints are never hit but I can see the webview. I build with ionic build then
if ionic capacitor run android --livereload: connection error on simulator and device.

Screenshot 2020-04-20 at 12.33.13 AM
Screenshot 2020-04-20 at 12.33.13 AM828×340 62.8 KB

if npx cap sync android, deployment ok, I can inspect in webview but breakpoints are not hit

6

From your first screenshot it seems that your code is calling http://localhost? Well, localhost from the point of view of the Android device is… the Android device itself. That’s why you get a response from Capacitor.

To call your API you need to use an address that works on your local network at least, if not a public one.

1 Like
7

indeed works fine then (including breakpoints).
thanks !!

8

You can also debug with 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

9

if you want to debug the changes in your cell phone in real time:
ionic capacitor run android --livereload --external

will open Android Studio automatically, then click the run button in android studio