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

7rtdyuoh  于 2022-12-16  发布在  Ionic
关注(0)|答案(1)|浏览(202)

我是Ionic的新手,想要调试在Android设备(和模拟器)上运行的Ionic应用程序。
我已经遵循了debugginglivereload的官方文档,但仍然没有在Android设备的VS代码中命中断点。
我也玩了很多sourceMapPathOverrides,但没有结果。
我们能用VS代码(没有Chrome pls)和LiveReload支持调试Android设备上运行的离子/电容器应用程序吗?
P.S.我知道这个问题有点笼统,但这是许多初学者(像我一样)面临的问题,几个小时的谷歌搜索并没有提供一个如何做到这一点的所有解决方案指南,特别是如果你在电容器。

zpf6vheq

zpf6vheq1#

我得自己想办法...
以下是如何通过VS代码调试Android上运行的Ionic/Capacitor应用的指南:
1.在VS代码上安装以下插件:Android WebView Debug
1.将以下条目添加到VS代码中的launch.json文件:

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

1.编辑capacitor.config.ts文件以添加server:部分,如下所示:

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
  }
};

1.现在,我们应该执行反向TCP,以便将调试器附加到Android设备。
在终端运行或命令提示符,并使用以下命令获取仿真器设备ID:
adb devices list
1.使用adb打开反向TCP连接:
adb -s [DEVICE-ID] reverse tcp:8100 tcp:8100
1.从VS代码控制台在本地主机上运行Ionic:
ionic cap run android -l
并等待它完全加载
1.在所需设备上运行Android Studio中的应用。(使用命令ionic capacitor open快速打开包含项目的Android Studio)
1.在VS代码上运行调试器,选择“附加到Android WebView”,选择设备和Web容器
1.好好享受
注意:使用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

相关问题