VSCode中Kando开源项目断点失效：显示“unbound breakpoint”

排查步骤和解决方案 #

• 确认sourceMap配置是否到位
  打开tsconfig.json，必须确保sourceMap设为true：

  {
    "compilerOptions": {
      "sourceMap": true,
      // 其他配置保持不变
    }
  }
  

  没有sourceMap的话，VSCode无法将编译后的JS与TS源码对应，断点自然无法绑定。

• 检查launch.json的路径配置
  确认launch.json里的webRoot指向项目根目录，且sourceMapPathOverrides匹配项目打包结构：

  {
    "configurations": [
      {
        "type": "chrome",
        "request": "launch",
        "name": "Launch Chrome",
        "url": "http://localhost:3000", // 需与项目启动的本地地址一致
        "webRoot": "${workspaceFolder}",
        "sourceMapPathOverrides": {
          "webpack:///./src/*": "${webRoot}/src/*" // 用Vite则改为"vite:///*": "${webRoot}/*"
        }
      }
    ]
  }
  

  路径不匹配的话，VSCode找不到对应源码文件，断点会显示unbound。

• 关闭浏览器开发者工具自动附加功能
  你的怀疑是对的，浏览器自动附加调试会话会和VSCode抢占资源，按以下步骤关闭：

  1. 打开Chrome开发者工具，点击右上角三个点→Settings
  2. 进入Experiments（实验功能），取消勾选自动附加相关选项（如Automatically attach to Node.js targets）
  3. 重启Chrome和VSCode调试会话

• 验证打包工具的sourceMap配置
  如果项目用Webpack或Vite，需确保打包配置启用sourceMap：

  • Webpack示例：

    module.exports = {
      devtool: 'source-map', // 开发环境用该配置，避免精简版sourceMap导致映射失败
      // 其他配置...
    }
    

  • Vite默认开发环境已开启，可在vite.config.js中确认sourcemap: true。

• 从跟踪日志定位问题
  查看跟踪日志时重点关注：

  • SourceMaps.setSourceMapURL：确认sourceMap文件是否成功加载
  • Breakpoint.setBreakpoints：检查断点是否正确发送到调试目标
  • PathConversion：排查路径转换是否出错，导致源码映射失败

额外小技巧 #

• 按Ctrl+Shift+P选择Reload Window重启VSCode窗口，再重新启动调试，可解决部分缓存类问题
• 确保将整个项目根目录作为工作区打开，而非单个文件或子目录

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