我遵循了this教程并成功运行了Docker容器,就像本教程中给出的那样。
docker run -it \
-v ${PWD}:/usr/src/app \
-v /usr/src/app/node_modules \
-p 4200:4200 \
--rm \
myimage
一切正常,包括热重装等。
现在,当我想使用Debugger for Chrome扩展程序在Visual Studio代码中调试此应用程序时,问题出现了。我认为这将是小菜一碟,我只需要放置一个断点并使用默认的Launch Chrome
配置开始调试。
{
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome",
"url": "http://localhost:4200",
"webRoot": "${workspaceFolder}"
}
]
}
调试已启动,Chrome已启动,我已启动应用程序以达到断点。现在有趣的部分开始了,因为我的断点移动了两行(我把它放在一个测试函数中,点击链接后激活)。此外,有时它工作,我的断点在我放置它的位置,有时它打开一个只读文件(我的文件,但只是只读)与文件末尾的Webpack注释,最后,有时应用程序不打了我的断点。
所以我不知道该怎么办,因为我从来没有处理过这样的问题。也许我完全错了,这不是在Docker中调试Angular应用程序的方式,或者我在某个地方犯了错误。
编辑:
经过多次测试,结果发现这不是与Docker相关的错误。正常调试(没有Docker)似乎也不起作用。更多详情here。
答案 0 :(得分:1)
这与源地图问题有关。这个launch.json
有效:
{
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome against localhost",
"url": "http://localhost:4200",
"webRoot": "${workspaceFolder}",
"sourceMapPathOverrides": {
"webpack:/*": "${webRoot}/*"
}
}
]
}