VS Code启动Chrome调试器后断点变灰不可达问题求助

问题描述 #

在VS Code中开发Angular项目时，启动Chrome调试器前断点显示为红色，但启动调试后断点变为灰色，无法触发。已确认sourceMap配置为true，采用标准Chrome调试配置。

相关配置 #

tsconfig.json #

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "ES2022",
    "module": "es2020",
    "resolveJsonModule": true,
    "esModuleInterop": true,
    "lib": ["es2018", "dom"],
    "useDefineForClassFields": false
  },
  "angularCompilerOptions": {
    "enableI18nLegacyMessageIdFormat": false
  }
}

angular.json（development配置） #

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

launch.json #

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Uruchom przeglądarkę Chrome względem hosta lokalnego",
      "url": "http://localhost:4200",
      "webRoot": "${workspaceFolder}"
    }
  ]
}

解决方案 #

• 确保调试前已启动Angular项目：运行ng serve，验证http://localhost:4200可正常访问，调试器需要关联到运行中的实例。
• 调整launch.json的webRoot路径：如果项目源码在src目录，将webRoot改为"${workspaceFolder}/src"，匹配Angular source map的映射路径。
• 清除编译缓存并重建：执行ng clean清除旧编译文件，再运行ng serve，避免旧source map文件干扰。
• 验证断点位置有效性：将断点放在组件的ngOnInit等必然执行的生命周期方法中，排除代码未被执行的情况（如懒加载路由未触发、条件分支未进入）。
• 优化sourceMap配置：在tsconfig.json的compilerOptions中添加"inlineSourceMap": false和"inlineSources": false，确保生成独立的source map文件。
• 更新调试扩展：检查VS Code的「Debugger for Chrome」扩展是否为最新版本，必要时卸载重装。

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