如何解决如何在 Android 设备/模拟器上实时重新加载和调试离子/电容器应用程序
我是 Ionic 的新手,想调试在 Android 设备(和模拟器)上运行的 Ionic 应用。
我遵循了 debugging 和 livereload 的官方文档,但仍然没有在 Android 设备上的 VS Code 上遇到断点。
我也用 sourceMapPathOverrides
玩了很多,但没有结果。
我们能否以某种方式使用 VS Code(无 Chrome pls)和 LiveReload 支持调试在 Android 设备上运行的 Ionic/Capacitor 应用程序?
附言我知道这个问题有点笼统,但这是许多初学者(像我一样)面临的问题,并且几个小时的谷歌搜索并没有提供如何做到这一点的一站式解决方案指南,特别是如果你是在电容器上。
解决方法
我必须自己弄清楚...
以下是如何通过 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 运行应用
- 在 VS 代码上运行调试器,选择“Attach to Android WebView”,选择设备和 Web 容器
一些可能对故障排除有用的资源:
https://ionicframework.com/docs/cli/livereload
https://ionicframework.com/docs/troubleshooting/debugging
Ionic emulate android ERR_CONNECTION_REFUSED localhost:8100
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。