如何在 Android 设备/模拟器上 LiveReload 和调试 Ionic/Capacitor 应用程序答案

【问题标题】：How to LiveReload and debug Ionic/Capacitor application on Android device/emulator如何在 Android 设备/模拟器上 LiveReload 和调试 Ionic/Capacitor 应用程序
【发布时间】：2021-05-24 08:32:47
【问题描述】：

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

我们能否以某种方式调试在 Android 设备上运行的 Ionic/Capacitor 应用，使用 VS Code（请不要使用 Chrome）并支持 LiveReload？

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

【问题讨论】：

标签： android ionic-framework visual-studio-code capacitor livereload

【解决方案1】：

必须自己解决...

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

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

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

现在我们应该执行反向 TCP，以便我们可以将调试器附加到 Android 设备。
运行命令提示符并使用以下命令获取模拟器设备：
adb devices list
使用 adb 打开反向 TCP 连接：
adb -s [DEVICE-ID] reverse tcp:8100 tcp:8100
从 VS Code 控制台在本地主机上运行 Ionic：
ionic cap run android -l
并等待它完全加载
在所需设备上从 Android Studio 运行应用程序。（使用命令ionic capacitor open快速打开带有项目的Android studio）
在 VS 代码上运行调试器，选择“附加到 Android WebView”，选择设备和 Web 容器
享受

注意：使用 Android Studio 安装应用后，下次可以跳过第 6 步。您可以直接从手机打开应用程序，而无需执行该步骤。
这样做的原因是，使用第 5 步中的命令，我们实际上创建了一个构建，每次打开应用程序时都会从本地主机中提取代码。因此，在单次安装后并不真的需要新版本（除非更改是在 android 项目端完成的）。

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

【讨论】：

所以你必须从 VS Code 和 Android Studio 运行应用程序？既然不是原生代码，那么如何从 Android Studio 运行呢？
您只需运行一次 Android Studio 即可在设备上安装应用程序。之后，由于应用程序从 localhost 中提取代码，因此不再需要 Android Studio。（除非您做了一些影响 APK 本身的重大更改）。
@MRichards，用该信息更新了答案。