Angular应用：TypeScript控制台行号丢失与VSCode断点绑定失败解决

• 完善tsconfig.json配置，确保相关source map参数正确：
  在compilerOptions中除了sourceMap: true，还要添加：

  "inlineSources": true,
  "sourceRoot": "/"
  

  inlineSources会把TypeScript源码嵌入到source map文件中，避免路径映射问题；sourceRoot指定源码的根目录，帮助工具定位正确的文件位置。

• 检查启动/构建命令，确保未禁用source map：
  运行ng serve时不要添加--source-map=false参数，若需要重新构建，使用ng build --source-map明确开启source map生成。

• 修正VSCode调试配置（.vscode/launch.json）：
  确保调试配置中正确设置源码映射和路径覆盖，示例配置：

  {
    "version": "0.2.0",
    "configurations": [
      {
        "name": "ng serve",
        "type": "chrome",
        "request": "launch",
        "preLaunchTask": "npm: start",
        "url": "http://localhost:4200/",
        "webRoot": "${workspaceFolder}",
        "sourceMaps": true,
        "sourceMapPathOverrides": {
          "webpack:///*": "${webRoot}/*"
        }
      }
    ]
  }
  

  重点确认webRoot指向项目根目录，sourceMapPathOverrides将webpack的虚拟路径映射到本地源码路径。

• 清理缓存并重启：
  删除项目根目录下的node_modules/.cache文件夹，执行ng clean（Angular 12及以上版本可用），然后重新运行npm install和ng serve，同时重启VSCode和浏览器。

• 检查浏览器DevTools设置：
  在Chrome DevTools的设置中，确保勾选"Enable JavaScript source maps"选项，切换到Sources面板，确认能看到对应的.ts文件而非编译后的.js文件。

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