如何在 Android 设备/仿真器上 LiveReload 和调试离子/电容器应用程序

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?

PS 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. Now we should do reverse TCP so we could attach a debugger to the Android device.
   Run the command prompt and get the emulator device with the following command:
   adb devices list
4. Open a reverse TCP connection using adb:
   adb -s [DEVICE-ID] reverse tcp:8100 tcp:8100
5. From VS Code console run the Ionic on localhost:
   ionic cap run android -l
   and WAIT for it to load completely
6. Run the app from Android Studio on the desired device
7. Run the debugger on VS code, select "Attach to Android WebView", select the device and web container

---

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