如何在VS Code中配置Chrome调试器，代理调试Angular客户端应用

针对你的Angular 6环境，要实现同时以debug模式启动应用并保留proxy路由，你可以通过VS Code的调试配置（launch.json）来完成，具体步骤如下：

方法1：修改npm脚本+手动附加调试器 #

首先更新你package.json里的proxy脚本，确保生成源码映射（方便debug时查看TS原始文件）：

"scripts": {
  "proxy": "ng serve --open --proxy-config proxy.conf.json",
  "proxy-debug": "ng serve --open --proxy-config proxy.conf.json --source-map"
}

接着配置Chrome调试器（以VS Code为例）：

1. 打开VS Code调试面板（快捷键Ctrl+Shift+D）
2. 点击「创建launch.json文件」，选择「Chrome」环境
3. 替换生成的launch.json内容为：

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Chrome Proxy Debug",
      "url": "http://localhost:4200",
      "webRoot": "${workspaceFolder}/src",
      "sourceMaps": true,
      "userDataDir": "${workspaceFolder}/.vscode/chrome",
      "runtimeArgs": [
        "--disable-web-security" // 可选，解决开发环境跨域调试问题
      ]
    }
  ]
}

4. 先在终端运行npm run proxy-debug启动带proxy的应用，再点击VS Code调试面板的启动按钮，Chrome就会以debug模式打开应用，proxy路由依然生效。

方法2：通过launch.json自动启动（更便捷） #

这种方式无需手动运行npm脚本，VS Code会自动启动带proxy的应用并附加调试器：

1. 创建/修改launch.json为：

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Angular Proxy Debug",
      "url": "http://localhost:4200",
      "webRoot": "${workspaceFolder}/src",
      "sourceMaps": true,
      "preLaunchTask": "npm: proxy", // 关联你package.json里的proxy脚本
      "userDataDir": "${workspaceFolder}/.vscode/chrome"
    }
  ]
}

2. 配置前置任务：打开命令面板（Ctrl+Shift+P），选择「Tasks: Configure Task」，再选择「npm: proxy」，VS Code会自动生成tasks.json
3. 点击调试启动按钮，VS Code会先执行npm run proxy启动带proxy的应用，随后自动打开Chrome进入debug模式，断点、源码映射都能正常工作。

关键注意事项 #

• 确保你的proxy.conf.json配置正确，比如典型的API代理配置：

{
  "/api/*": {
    "target": "http://localhost:3000",
    "secure": false,
    "changeOrigin": true
  }
}

• Angular 6的ng serve默认已支持源码映射，--source-map参数可选择性添加，能进一步确保debug时的源码可读性
• --disable-web-security仅建议在开发环境使用，用于临时解决跨域相关的调试问题

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