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

我之前也遇到过一模一样的情况——容器跑起来热重载正常，就是断点死活不触发，后来折腾了下才搞明白是配置没跟上，给你一步步捋清楚：

第一步：调整Docker启动命令，开启调试端口 #

你原来的启动命令只映射了应用的4200端口，但调试需要额外配置，得把调试相关的端口映射出来，同时让Angular以支持调试的模式启动：

修改后的启动命令如下：

docker run -it \
  -v ${PWD}:/usr/src/app \
  -v /usr/src/app/node_modules \
  -p 4200:4200 \
  -p 9229:9229 \  # 新增：映射Node.js调试端口（前端调试依赖此端口）
  --rm \
  myimage \
  ng serve --host 0.0.0.0 --port 4200 --inspect=0.0.0.0:9229

这里的--inspect=0.0.0.0:9229是关键，它让Angular CLI在容器内启动调试服务，并且允许外部（你的VSCode）连接，同时映射9229端口到宿主机，确保VSCode能访问到。

如果你习惯用package.json的脚本管理，也可以在项目的package.json里加个debug命令：

"scripts": {
  "start": "ng serve --host 0.0.0.0 --port 4200",
  "debug": "ng serve --host 0.0.0.0 --port 4200 --inspect=0.0.0.0:9229"
}

然后启动命令改成：

docker run -it \
  -v ${PWD}:/usr/src/app \
  -v /usr/src/app/node_modules \
  -p 4200:4200 \
  -p 9229:9229 \
  --rm \
  myimage \
  npm run debug

第二步：配置VSCode的launch.json #

打开VSCode的调试面板（快捷键Ctrl+Shift+D），点击"创建launch.json文件"，选择Chrome环境，然后替换成下面的配置：

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "attach",
      "name": "Attach to Docker Angular",
      "url": "http://localhost:4200",
      "webRoot": "${workspaceFolder}",
      "sourceMapPathOverrides": {
        "/usr/src/app/*": "${workspaceFolder}/*"
      }
    }
  ]
}

重点说下sourceMapPathOverrides：因为你的本地代码挂载到了容器的/usr/src/app目录，VSCode需要知道怎么把容器里的源码路径映射到你本地的路径，这个配置就是干这个的——没有它的话，断点会找不到对应的本地代码，显示灰色未绑定状态。

另外，别忘了确认你的Angular项目开启了sourceMap——默认ng serve是开的，但如果之前改过angular.json，检查下这个配置：

"projects": {
  "你的项目名": {
    "architect": {
      "build": {
        "options": {
          "sourceMap": true,
          // 其他配置...
        }
      }
    }
  }
}

第三步：启动调试的正确流程 #

1. 用上面修改后的命令启动Docker容器，确保浏览器能正常访问http://localhost:4200
2. 在VSCode里打开你的项目根目录，在要调试的代码（比如src/app/app.component.ts）里打个断点
3. 切换到调试面板，选择刚才配置的"Attach to Docker Angular"，点击启动按钮
4. 刷新浏览器里的页面，断点应该就会触发了！

常见坑排查 #

• 断点灰色：大概率是sourceMapPathOverrides配置错了，核对下容器里的路径和本地路径是不是对应；或者sourceMap没开
• 无法连接调试：检查Docker端口映射是否正常，确保4200和9229都映射了；确认容器里的应用确实在运行
• 如果要调试Angular CLI本身（比如脚手架代码）：把launch.json的type改成node，port设为9229，同样能attach调试

内容的提问来源于stack exchange，提问作者Bardr