How to LiveReload and debug Ionic/Capacitor application on Android device/emulator

Question

I'm new to Ionic and want to debug the Ionic app that's running on Android device (and emulator).
I've followed the official documentation for debugging and livereload, but still the breakpoint is never hit on VS Code from Android devices.
Also I've played a lot with sourceMapPathOverrides but no result.

Can we somehow debug the Ionic/Capacitor app that's running on Android device using VS Code (no Chrome pls) and with LiveReload support?

P.S. I know the question is a bit general, but this is a question that many beginners (like me) face and a few-hours-googling doesn't provide an all in one solution guide of how to do that, especially if you're on Capacitor.

Answer 1

Had to figure it out by my own...

Here's the guide of how to debug the Ionic/Capacitor app that's running on Android via VS Code:

1. Install the following plugin on VS Code: Android WebView Debug
2. Add the following entry to launch.json file in VS Code:

    {
      "type": "android-webview",
      "request": "attach",
      "name": "Attach to Android WebView",
      "webRoot": "${workspaceFolder}/*",
      "sourceMapPathOverrides": {
        "webpack:/*": "${workspaceFolder}/*"
      }
    }

3. Edit the capacitor.config.ts file to add a section server: like this:

const config: CapacitorConfig = {
  ... // Leave the original configs above and add the following below: 
  // TODO: [CRITICAL] Comment this when providing builds and uncomment FOR enabling live-reload, uncomment this
  server: {
      url: 'http://localhost:8100',
      cleartext: true
  }
};

4. Now we should do reverse TCP so we could attach a debugger to the Android device.
   In the terminal run or command prompt and get the emulator device ID with the following command:
   adb devices list
5. Open a reverse TCP connection using adb:
   adb -s [DEVICE-ID] reverse tcp:8100 tcp:8100
6. From VS Code console run the Ionic on localhost:
   ionic cap run android -l
   and WAIT for it to load completely
7. Run the app from Android Studio on the desired device. (Use command ionic capacitor open to open the Android studio with the project quickly)
8. Run the debugger on VS code, select "Attach to Android WebView", select the device and web container
9. Enjoy

Note: After installing the app with Android Studio, the step 6 can be skipped next times. And you can just open the app from the phone instead of that step.
The reason this works is that with the command in step 5 we actually create a build that pulls the codes from the localhost everytime we open the app. So the new build is not really needed after a single install (unless the changes are done on the android project side).

---

Some resources that might be useful for troubleshooting:
https://ionicframework.com/docs/cli/livereload
https://ionicframework.com/docs/troubleshooting/debugging
Ionic emulate android ERR_CONNECTION_REFUSED localhost:8100