VSCode中TypeScript断点变灰色空心提示unbound breakpoint无法触发怎么办

• 第一步：检查tsconfig.json配置
  必须开启sourcemap生成才能建立TS源码与编译后JS文件的映射关系，同时确保输出目录与launch.json中的配置匹配，参考配置片段：

{
  "compilerOptions": {
    "sourceMap": true,
    "outDir": "./dist",
    // 其余原有配置保持不变
  }
}

修改配置后重新触发编译，确认dist目录下每个.js文件都对应生成了.js.map文件。

• 第二步：修正launch.json配置
  原有配置未给Attach模式加sourcemap相关配置，且outFiles匹配范围过大容易命中node_modules内的无效文件，修改后的完整配置如下：

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Attach by Process ID",
      "processId": "${command:PickProcess}",
      "request": "attach",
      "skipFiles": [
          "<node_internals>/**"
      ],
      "type": "pwa-node",
      "sourceMaps": true,
      "outFiles": ["${workspaceFolder}/dist/**/*.js"],
      "resolveSourceMapLocations": ["${workspaceFolder}/**", "!**/node_modules/**"]
    },
    {
      "type": "pwa-node",
      "request": "launch",
      "name": "Launch Program",
      "skipFiles": [
          "<node_internals>/**"
      ],
      "program": "${workspaceFolder}/dist/index.js",
      "restart": true,
      "console":"integratedTerminal",
      "sourceMaps": true,
      "outFiles": ["${workspaceFolder}/dist/**/*.js"],
      "resolveSourceMapLocations": ["${workspaceFolder}/**", "!**/node_modules/**"]
    }
  ]
}

• 第三步：确认启动流程正确

1. 先按Ctrl+Shift+B执行默认的tsc:watch构建任务，确认终端无编译报错
2. 再启动对应调试模式，不要跳过构建步骤直接启动调试，避免编译产物未更新导致映射失败

• 第四步：异常场景排查
  如果完成以上操作仍失效，检查以下项：

1. VS Code打开的工作区根目录是tsconfig.json所在的目录，避免${workspaceFolder}路径匹配错误
2. 项目路径不含中文、空格、特殊字符，未使用软链接目录作为工作区
3. VS Code内置的「JavaScript Debugger」插件处于启用状态

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