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

**URL:** <https://forum.ionicframework.com/t/capacitor-compiled-ionic-app-how-to-debug-in-android-studio/186007>\
**Category:** Capacitor\
**Created:** [March 27, 2020, 1:33pm UTC](https://forum.ionicframework.com/t/capacitor-compiled-ionic-app-how-to-debug-in-android-studio/186007 "2020-03-27T13:33:08Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![jschwenk](https://avatars.discourse-cdn.com/v4/letter/j/ecb155/32.png) [@jschwenk](https://forum.ionicframework.com/u/jschwenk)\
**Post date:** [March 27, 2020, 1:33pm UTC](https://forum.ionicframework.com/t/capacitor-compiled-ionic-app-how-to-debug-in-android-studio/186007/1 "2020-03-27T13:33:08Z")

</div>

I used the command

```
ngx cap open android

```

to open my Ionic 5 project in Android Studio like described [here](https://capacitor.ionicframework.com/docs/getting-started/with-ionic). 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:

> <https://stackoverflow.com/questions/60792611/capacitor-compiled-ionic-app-how-to-debug-in-android-studio>

---

<div class="post-metadata">

**Author:** ![mirkonasato](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/mirkonasato/32/131398_2.png) [@mirkonasato](https://forum.ionicframework.com/u/mirkonasato)\
**Post date:** [March 27, 2020, 6:28pm UTC](https://forum.ionicframework.com/t/capacitor-compiled-ionic-app-how-to-debug-in-android-studio/186007/2 "2020-03-27T18:28:06Z")

</div>

Try this: [Remote Debugging WebViews](https://developers.google.com/web/tools/chrome-devtools/remote-debugging/webviews#open_a_webview_in_devtools) with the Chrome Developer Tools.

---

<div class="post-metadata">

**Author:** ![jschwenk](https://avatars.discourse-cdn.com/v4/letter/j/ecb155/32.png) [@jschwenk](https://forum.ionicframework.com/u/jschwenk)\
**Post date:** [April 13, 2020, 4:31pm UTC](https://forum.ionicframework.com/t/capacitor-compiled-ionic-app-how-to-debug-in-android-studio/186007/3 "2020-04-13T16:31:29Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![aaronksaunders](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/aaronksaunders/32/13729_2.png) [@aaronksaunders](https://forum.ionicframework.com/u/aaronksaunders)\
**Post date:** [April 13, 2020, 5:49pm UTC](https://forum.ionicframework.com/t/capacitor-compiled-ionic-app-how-to-debug-in-android-studio/186007/4 "2020-04-13T17:49:37Z")

</div>

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](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.

> **[aaronksaunders/plain-ng-cap-app](https://github.com/aaronksaunders/plain-ng-cap-app)**
>
> Contribute to aaronksaunders/plain-ng-cap-app development by creating an account on GitHub.

---

<div class="post-metadata">

**Author:** ![kdefombelle](https://avatars.discourse-cdn.com/v4/letter/k/ccd318/32.png) [@kdefombelle](https://forum.ionicframework.com/u/kdefombelle)\
**Post date:** [April 19, 2020, 4:36pm UTC](https://forum.ionicframework.com/t/capacitor-compiled-ionic-app-how-to-debug-in-android-studio/186007/5 "2020-04-19T16:36:56Z")

</div>

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](https://developers.google.com/web/tools/chrome-devtools/remote-debugging/webviews#open_a_webview_in_devtools) and saw below error despite HTTP response is 200/ok

 ![webview-debug-error](https://global.discourse-cdn.com/ionicframework/original/3X/3/f/3f130e6ab628ef122d86003e0b69285946a1560a.png)

**full stack**

```auto
"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:

```auto
<!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](https://global.discourse-cdn.com/ionicframework/original/3X/e/0/e0ac83b7d9ea45025dbf6a66cd906e90817307f1.png)  
if `npx cap sync android`, deployment ok, I can inspect in webview but breakpoints are not hit

---

<div class="post-metadata">

**Author:** ![mirkonasato](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/mirkonasato/32/131398_2.png) [@mirkonasato](https://forum.ionicframework.com/u/mirkonasato)\
**Post date:** [April 20, 2020, 8:46pm UTC](https://forum.ionicframework.com/t/capacitor-compiled-ionic-app-how-to-debug-in-android-studio/186007/6 "2020-04-20T20:46:23Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![kdefombelle](https://avatars.discourse-cdn.com/v4/letter/k/ccd318/32.png) [@kdefombelle](https://forum.ionicframework.com/u/kdefombelle)\
**Post date:** [April 21, 2020, 2:02pm UTC](https://forum.ionicframework.com/t/capacitor-compiled-ionic-app-how-to-debug-in-android-studio/186007/7 "2020-04-21T14:02:36Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![GoTop](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/gotop/32/123661_2.png) [@GoTop](https://forum.ionicframework.com/u/GoTop)\
**Post date:** [September 2, 2020, 12:35pm UTC](https://forum.ionicframework.com/t/capacitor-compiled-ionic-app-how-to-debug-in-android-studio/186007/8 "2020-09-02T12:35:05Z")

</div>

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`

> <https://stackoverflow.com/questions/60792611/capacitor-compiled-ionic-app-how-to-debug-in-android-studio/63705591#63705591>

---

<div class="post-metadata">

**Author:** ![WaldirNeto](https://avatars.discourse-cdn.com/v4/letter/w/8491ac/32.png) [@WaldirNeto](https://forum.ionicframework.com/u/WaldirNeto)\
**Post date:** [September 2, 2020, 3:35pm UTC](https://forum.ionicframework.com/t/capacitor-compiled-ionic-app-how-to-debug-in-android-studio/186007/9 "2020-09-02T15:35:19Z")

</div>

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