如何在 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 cmets，最后，有时应用程序没有击中我的断点。

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

已编辑：

经过多次测试，发现这不是 Docker 相关的 bug。正常调试（没有 Docker）似乎也不起作用。更多详情here.

Answer 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}/*"
      }
    }
  ]
}