Angular项目VSCode调试断点未激活问题求助

以下是针对该问题的具体解决步骤：

• 确保使用开发模式构建项目
  运行ng serve启动项目时，不要添加--prod或--configuration production参数，生产模式下代码会被压缩混淆，无法正常命中断点。

• 修正launch.json配置
  调整调试配置的webRoot指向项目的src目录，并添加source map相关配置，帮助调试器正确映射源码：

  {
      "version": "0.2.0",
      "configurations": [
          {
              "type": "chrome",
              "request": "launch",
              "name": "Launch Chrome against localhost",
              "url": "http://localhost:4200",
              "webRoot": "${workspaceFolder}/src",
              "sourceMaps": true,
              "sourceMapPathOverrides": {
                  "webpack:///*": "${webRoot}/*"
              }
          }
      ]
  }
  

• 验证angular.json中的sourceMap配置
  打开项目根目录的angular.json，找到对应项目的开发构建配置，确保sourceMap为true：

  "development": {
    "buildOptimizer": false,
    "optimization": false,
    "vendorChunk": true,
    "extractLicenses": false,
    "sourceMap": true,
    "namedChunks": true
  }
  

• 清理缓存并重启项目
  执行ng clean清理构建缓存，然后重新运行ng serve，避免缓存导致source map生成异常。

• 确认断点设置位置
  确保断点是设置在src目录下的.ts源码文件中，而非dist等编译后的文件内。

• 检查VS Code调试设置
  在VS Code设置中搜索debug.javascript.sourceMaps，确认该选项处于勾选状态，保证调试器启用source map解析。

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