零基础快速上手VSCode断点调试-VSCode-PHP中文网

断点需在调试模式下才生效，必须通过“运行和调试”侧边栏启动（f5），且依赖正确的launch.json配置、sourcemaps设置及实心红点绑定。

零基础快速上手vscode断点调试

断点本身不运行代码，设了红点只是标记位置；必须按 F5 启动调试会话，否则代码照常执行、断点完全无效。

点了右上角绿色三角（Code Runner）或终端里敲 node index.js，断点永远不会触发——那只是普通执行，没走调试协议。必须打开“运行和调试”侧边栏（Ctrl+Shift+D），选中一个配置，再点 ▶️ 启动。

VSCode 不执行代码，它靠 launch.json 告诉底层调试器（如 debugpy、js-debug）怎么跑。配错就等于“发错指令”。

VSCode

避免常见的 VSCode 错误——设置冲突、调试器配置和扩展冲突。

下载

type：大小写敏感，"node" 不能写成 "Node"；浏览器调试用 "pwa-chrome"，不是 "chrome"
program（Node.js）或 module（Python）：路径必须对。推荐用 "${workspaceFolder}/src/index.js"，别写 ./index.js（相对路径依赖 cwd）
cwd：影响 require()、import 和文件读写。Node 报 Cannot find module、Python 报 ModuleNotFoundError，八成是这里设错了

你打在 index.ts 第12行，结果停在编译后的 index.js 第3行甚至跳过——这不是 VSCode 故障，是源码映射没对齐。

TypeScript 项目：确保 tsconfig.json 里 "sourceMap": true，且没开 "inlineSourceMap": true（VSCode 更认独立 .map 文件）
Vite 用户检查 vite.config.ts 中 build.sourcemap 是否为 true；Webpack 用户确认 devtool 设为 'source-map' 而非 'eval'
Node.js 项目要在 launch.json 里显式加 "sourceMaps": true，否则默认可能不启用
前端调试时还要确认 .js.map 文件真生成了、跟 .js 同目录，并在 launch.json 中配好 "webRoot": "${workspaceFolder}"

行号左边点出的红点，只是“标记”。它变成实心（✅）才表示调试器已加载该行、能真正中断；空心（❌）就是 Unbound breakpoint，等于没设。

常见导致空心的原因：文件没保存、语言模式不是对应语言（右下角看是不是 JavaScript 而不是 Plain Text）、sourceMap 没开启
断点只能设在可执行代码行（如变量赋值、函数调用），注释、空行、函数声明行无法设
鼠标悬停断点，如果提示 Unbound breakpoint，就别指望它停

最常被忽略的是：断点位置与实际运行代码是否一致——改了源码但没重新构建（尤其 TypeScript、Vue SFC、React + Babel 场景），.map 文件没更新，断点就永远找不到落点。