angular - 如何在Docker容器Visual Studio Code中调试Angular应用？

Question

我遵循了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 Code中调试此应用程序时，就会出现问题。我以为这很轻松，我只需要放置一个断点并使用默认的 Launch Chrome配置开始调试。

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch Chrome",
      "url": "http://localhost:4200",
      "webRoot": "${workspaceFolder}"
    }
  ]
}

调试开始，Chrome启动，我带领应用程序达到了断点。现在，有趣的部分开始了，因为我的断点被移开了两行(我将其放置在单击链接后启动的测试函数中)。而且，有时它可以工作，而我的断点在放置它的位置，有时它会打开一个只读文件(我的文件，但只有只读)，并在文件末尾带有Webpack注释，最后，有时app不会达到我的断点。

所以我不知道该怎么办，因为我从来不必处理这样的问题。也许我完全错了，这不是在Docker中调试Angular应用程序的方式，或者我在某个地方犯了一个错误。

编辑:

经过多次测试，结果证明这不是与Docker相关的错误。正常调试(没有Docker)似乎也无法正常工作。更多详细信息 here。

Answer 1

那与sourcemaps问题有关。此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}/*"
      }
    }
  ]
}