VS Code断点无效主因是source map未正确生成或加载、launch.json配置不匹配、代码未执行或被优化、扩展/缓存干扰；需依次排查源码映射、调试配置、运行逻辑及环境干扰。
vs code调试器断点无效，通常不是代码写错了，而是环境配置或调试设置没对上。下面几个原因最常见，按优先级排查基本能解决大部分问题。
源码映射（source map）未正确生成或加载
尤其在使用 TypeScript、Vue、React 或 Webpack/Vite 构建的项目中，浏览器实际运行的是编译后的 JavaScript，而你在 TS 或 JSX 文件里打的断点，需要 source map 告诉调试器“这行源码对应编译后哪一行”。如果没生成、路径不对、或没启用，断点就会变空心（unbound）。
- 检查构建配置：TypeScript 项目确保 tsconfig.json 中
"sourceMap": true；Webpack 加devtool: 'source-map'；Vite 默认开启，但若用了build.sourcemap: false就要改回来 - 确认生成的
.map文件和 JS 文件同目录，且文件名匹配（如index.js对应index.js.map） - 在 VS Code 的 调试控制台 或浏览器开发者工具的 Source 面板里，看是否能展开原始文件（如
App.tsx），不能展开说明 source map 没加载成功
launch.json 配置不匹配运行环境
VS Code 不知道你到底在调试 Node.js、Chrome 还是 Edge，也不清楚服务跑在哪、用什么启动命令。配置错一个字段，断点就失效。
- 如果是前端项目，用
chrome或ms-edge类型调试器时，确保url字段指向已启动的服务地址（如"http://localhost:5173"），而不是本地 HTML 文件路径 - 如果是 Node.js 后端，
program要指向实际入口文件（如"./dist/index.js"），不是src/index.ts；若用 ts-node，需设"runtimeExecutable": "npx ts-node"并配好args - 检查
webRoot（前端调试常用）：它告诉调试器从哪开始找源码，默认是${workspaceFolder}，但若构建产物在dist/，而源码在src/，这个路径必须准确，否则断点找不到对应位置
代码未真正执行，或被优化/跳过
断点显示为实心但就是不触发？可能那行根本没走到，或者被 JS 引擎优化掉了。
- 确认断点所在代码路径确实被执行：加个
console.log验证逻辑是否进入该分支 - 某些压缩/生产模式下（如
mode: 'production'），Uglify/Terser 可能移除未使用变量、内联函数，导致断点“消失”——开发时务必用development模式调试 - 异步代码中打在回调外层？比如
setTimeout(() => { /* 断点在这 */ }, 100)，但主线程已退出，调试器可能来不及挂起——可尝试在回调开头加debugger;辅助定位
扩展或缓存干扰
VS Code 调试依赖多个扩展协同工作（如 Debugger for Chrome、ESLint、Prettier），有时冲突或缓存出错也会让断点失灵。
- 临时禁用非必要扩展（特别是格式化、语法检查类），重启 VS Code 后再试
- 清除调试缓存：关闭所有窗口 → 删除
${workspaceFolder}/.vscode/.debug（如有）→ 重启 VS Code - 更新 VS Code 和相关调试扩展到最新版，旧版本存在已知的 source map 解析 bug（如 1.75 之前某些 Vite 项目断点不生效）
基本上就这些。多数时候，先看断点是空心还是实心，再查 source map 和 launch.json，90% 的问题就定位到了。
