英文:
Chrome Dev Tools Debugging Ionic Capacitor Angular app with Source Maps
问题
- 我在VSCode中使用Ionic 6、Capacitor 4、Angular 14，在Nx Workspace中构建我的应用程序（顺便提一下，我使用VSCode）。
- 我通过Nx在项目命令行中运行
nx build my-app --configuration development。 - 我运行
npx cap copy && npx cap sync来同步项目。 - 我运行
npx cap open android打开Android Studio项目。 - 我选择菜单 Build => Make Project 在Android Studio中。
- 我选择菜单 Build => Run（目标是连接的USB手机）。
- 我打开Chrome浏览器，导航到 chrome://inspect，然后检查我的移动应用程序以打开Chrome开发工具。
- 我使用Ctrl+Shift+F在我的源代码中查找要设置断点的内容，但它跳转到Babel编译的js文件而不是ts文件。
- 我得出结论，某种原因导致源映射未正常工作。
这种方式进行调试并不是完全不可能的，但并不如我知道的那样令人愉快。有人能帮我找出问题出在哪里以及如何修复吗？
英文:
I'm using Ionic 6, Capacitor 4, Angular 14, in an Nx Workspace (using VSCode fwiw).
- I build my app in VSCode via Nx
nx build my-app --configuration development. - I run
npx cap copy && npx cap syncon the project command line. - I run
npx cap open androidto open the Android Studio project. - I choose the menu Build => Make Project in Android Studio.
- I choose the menu Build => Run (with my USB-connected phone as the target).
- I open Chrome browser, navigate to chrome://inspect, then Inspect my mobile app to open Chrome Dev Tools.
- I ctrl+shift+f to find something in my source code to set a breakpoint on, and it goes to a Babel-compiled js file instead of a ts file.
- I conclude that somehow source maps aren't working for some reason.
It's not impossible to debug in this way, but it is much less enjoyable than I know it could be. Can anyone help me figure out where things are going wrong and how to fix it?
答案1
得分: 2
使用npx cap sync命令时添加 --inline 选项。
npx cap sync --inline
请注意，不需要运行npx cap copy，因为sync命令包括了复制和更新的功能。如果没有安装新插件，不需要每次都运行sync，只需运行copy，copy也有 --inline 选项。
npx cap copy --inline
英文:
Use --inline option on npx cap sync command
npx cap sync --inline
Note, you don’t need to run npx cap copy since sync does copy + update.
If you didn’t install any new plugins you don’t need to run sync every time, just copy, copy also has --inline option
npx cap copy --inline
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论