英文:
Debug Angular app in vscode works, but requires me to hit a breakpoint in browser first?
问题
我遇到了调试我的Angular应用程序时的问题。该应用程序本身在Docker镜像内运行。我创建了一个挂载点用于源文件，以便我可以依赖ng重新编译更改并提供服务。一切都正常，但调试有点不稳定。
当我在我的源文件中放置断点（例如在应用程序初始化时），并通过VSCode启动Firefox时，使用以下配置：
{
"name": "Launch Firefox",
"type": "firefox",
"profileDir": "/home/bp/snap/firefox/common/.cache/mozilla/firefox/c90bexwg.default-release",
"keepProfileChanges": true,
"request": "launch",
"url": "http://localhost:4200/",
"tmpDir": "./webapp/.firefox-temp",
"pathMappings": [
{
"url": "webpack:///src",
"path": "${workspaceFolder}/webapp/src"
},
{
"url": "webpack:///node_modules",
"path": "${workspaceFolder}/webapp/node_modules"
},
{
"url": "webpack:///webpack",
"path": "${workspaceFolder}/webapp/webpack"
}
]
}
断点将不会触发。当我刷新页面几次时，情况也是一样，断点不会触发。
但是，当我还在浏览器中打开调试器（对于Firefox是F12），并在同一文件中添加一个断点时，该断点会触发。而且奇迹般地，在Firefox浏览器中触发断点后，我的VSCode中的断点也可以正常工作。
我尝试过在Google上搜索此问题，但没有找到相关信息。
有人能否认出这种行为，并知道是什么原因造成的，以及是否可以修复？
英文:
I am having trouble debugging my angular app. The app itself runs inside a docker image. I created a mount for the source files, so that I can rely on ng recompiling changes will serving. All works well, but debugging is somewhat unreliable.
When I put a breakpoint in my source (app init e.g.) and I launch firefox through vscode using
"configurations": [
{
"name": "Launch firefox",
"type": "firefox",
"profileDir": "/home/bp/snap/firefox/common/.cache/mozilla/firefox/c90bexwg.default-release",
"keepProfileChanges": true,
"request": "launch",
"url": "http://localhost:4200/",
"tmpDir": "./webapp/.firefox-temp",
"pathMappings": [
{
"url": "webpack:///src",
"path": "${workspaceFolder}/webapp/src"
},
{
"url": "webpack:///node_modules",
"path": "${workspaceFolder}/webapp/node_modules"
},
{
"url": "webpack:///webpack",
"path": "${workspaceFolder}/webapp/webpack"
}
]
},
the breakpoint will not hit. When I refresh the page a couple of times, same story, the breakpoint won't hit.
But, when I also open the debugger in the browser (f12 for firefox) and add a breakpoint in the same file, that breakpoint will hit. And magically, after having hit a breakpoint in firefox browser, my breakpoints in vscode are also working fine.
I tried to google for this, but came up kind of empty.
Does anybody recognize this behavior and have a clue what is causing this, and if its fixable?
答案1
得分: 1
解决方案是不使用Docker来开发应用程序，而是在构建应用程序进行生产之后再进行Docker步骤。直接在您的计算机上开发，使用ng serve --o命令，在浏览器上添加断点。
英文:
The solution would be to not develop your app with Docker and have this Docker step once you build the app for production. Develop directly on your computer, use ng serve --o and add breakpoints on your browser.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论