如何在VS Code中实现Angular与Node.js跨进程调试？

嗨，我之前刚好搭建过Angular和Node.js的联合调试环境，这就把具体步骤和注意事项分享给你，亲测可行：

本质上是两步：一是让Angular开发环境的请求能转发到本地Node.js服务（解决跨域+统一请求路径），二是给Node.js开启调试端口，再通过IDE关联两个项目的调试会话，这样Angular发起API请求时就能自动跳转到Node.js的断点处。

1. 配置Angular的代理转发 #

开发时Angular默认跑在4200端口，Node.js一般用3000，直接请求会跨域，所以用Angular自带的代理工具解决：

• 在Angular项目根目录新建proxy.conf.json文件，写入以下内容：

{
  "/api/*": {
    "target": "http://localhost:3000",
    "secure": false,
    "logLevel": "debug"
  }
}

这里/api/*是你Angular中请求API的前缀，比如你调用/api/user/list，就会自动转发到http://localhost:3000/api/user/list。

• 修改angular.json的serve配置：找到projects -> [你的项目名] -> architect -> serve -> options，添加一行"proxyConfig": "proxy.conf.json"
• 最后把Angular的启动脚本（package.json里的start）改成ng serve --proxy-config proxy.conf.json，确保启动时加载代理配置。

2. 开启Node.js的调试模式 #

要让Node.js允许IDE的调试连接，启动时必须加上调试参数：

• 如果是普通启动：node --inspect=0.0.0.0:9229 server.js（9229是Node.js默认调试端口，也可以自定义其他端口）
• 如果用nodemon做热重载（推荐，改代码不用手动重启）：nodemon --inspect=0.0.0.0:9229 server.js
  启动成功后，控制台会输出类似Debugger listening on ws://0.0.0.0:9229/xxxxxx的日志，说明调试端口已经就绪。

3. VS Code中配置联合调试（最常用场景） #

把Angular和Node.js项目放到同一个VS Code工作区（方便路径识别），然后创建调试配置：

• 点击左侧调试面板，选择“创建launch.json文件”，先选“Node.js”模板，然后替换成以下内容：

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Node.js Server",
      "program": "${workspaceFolder}/[你的Node.js项目文件夹]/server.js", // 替换成你的Node.js入口文件路径
      "runtimeArgs": ["--inspect=9229"]
    },
    {
      "type": "chrome",
      "request": "launch",
      "name": "Angular App",
      "url": "http://localhost:4200",
      "webRoot": "${workspaceFolder}/[你的Angular项目文件夹]/src", // 替换成你的Angular项目src路径
      "sourceMaps": true,
      "skipFiles": ["<node_internals>/**"]
    }
  ],
  "compounds": [
    {
      "name": "Full Stack Debug",
      "configurations": ["Node.js Server", "Angular App"]
    }
  ]
}

• 配置完成后，在调试面板选择Full Stack Debug，点击启动按钮，就能同时启动Node.js服务和Angular应用，并自动打开Chrome浏览器。

4. 测试验证 #

• 在Node.js的API处理代码里设置断点（比如某个路由的回调函数内）
• 在Angular页面上触发API请求（比如点击查询按钮），此时VS Code会自动跳转到Node.js的断点处，你可以查看变量、单步执行、调试调用栈，完全打通前后端的调试流程。

额外小贴士 #

• 如果用WebStorm等其他IDE，思路一致：开启Node.js调试端口，配置Angular代理，然后在IDE中创建两个调试任务并关联。
• 检查端口冲突：确保Angular的4200、Node.js的3000、调试端口9229都没被占用。
• 断点不命中？检查Node.js是否开启了source map（默认开启），Angular的angular.json中sourceMap是否设为true（默认是开启的）。

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