如何在 Android device/emulator 上 LiveReload 和调试 Ionic/Capacitor 应用程序

Question

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

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

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

Answer 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工作室）
运行 VS 代码上的调试器，select“附加到 Android WebView”，select 设备和 Web 容器
享受

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

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

如何在 Android device/emulator 上 LiveReload 和调试 Ionic/Capacitor 应用程序

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

android

livereload

ionic-framework

visual-studio-code

capacitor