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

Question

我是 Ionic 的新手，想调试在 Android 设备（和模拟器）上运行的 Ionic 应用程序。
我已经按照官方文档进行了调试和livereload ，但是在 Android 设备的 VS Code 上仍然没有遇到断点。
我也玩了很多sourceMapPathOverrides但没有结果。

我们可以使用 VS Code（无 Chrome pls）并支持 LiveReload 以某种方式调试在 Android 设备上运行的 Ionic/Capacitor 应用程序吗？

PS我知道这个问题有点笼统，但这是许多初学者（像我一样）面临的问题，并且几个小时的谷歌搜索并没有提供如何做到这一点的一体化解决方案指南，特别是如果你重新上电容器。

Answer 1

只好自己想办法了。。。

以下是如何通过 VS Code 调试在 Android 上运行的 Ionic/Capacitor 应用程序的指南：

1. 在 VS Code 上安装以下插件： Android WebView 调试
2. 将以下条目添加到 VS Code 中的launch.json文件中：

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

3. 现在我们应该反向 TCP 以便我们可以将调试器附加到 Android 设备。
   运行命令提示符并使用以下命令获取模拟器设备：
   adb devices list
4. 使用 adb 打开反向 TCP 连接：
   adb -s [DEVICE-ID] reverse tcp:8100 tcp:8100
5. 从 VS Code 控制台在 localhost 上运行 Ionic：
   ionic cap run android -l
   并等待它完全加载
6. 在所需设备上从 Android Studio 运行应用程序
7. 在 VS 代码上运行调试器，select “附加到 Android WebView”，Z99938282F04071859941E18F16EFZCF42Z 设备和 Z21899D84 容器

---

一些可能对故障排除有用的资源：
https://ionicframework.com/docs/cli/livereload
https://ionicframework.com/docs/troubleshooting/debugging
离子模拟 android ERR_CONNECTION_REFUSED localhost:8100