VSCode调试功能怎么使用_配置断点与启动调试教程

vscode断点失效主因是调试器未正确映射源码路径，需确保sourcemap配置、launch.json字段准确及运行环境匹配。

VSCode 里怎么加断点才真正生效

断点加不上、点了没反应，大概率不是操作问题，而是当前文件没被调试器识别为可执行源码。VSCode 的断点依赖于调试器是否能将你正在编辑的 .js、.py 或 .ts 文件映射到实际运行的代码路径。比如用 node 调试时，如果项目用了 ts-node 或构建产物（如 dist/index.js），但你在 src/index.ts 里打的断点，就必须有正确的 sourceMap 配置，否则断点会变成空心圆（unverified breakpoint）。

• javaScript/typescript：确保 tsconfig.json 中 "sourceMap": true，且启动配置中 "sourceMaps": true
• python：确认 python.defaultInterpreterPath 指向正确环境，且没在 .pyc 或压缩包里打点
• 通用检查：左下角状态栏看有没有显示「调试」图标；按 Ctrl+Shift+P 输入 Debug: Toggle Breakpoint 看是否响应

launch.json 启动配置里最关键的三个字段

launch.json 不是越复杂越好，多数本地调试只需管住 type、request 和 program（或等价字段）。填错任意一个，调试器根本不会启动。

• "type"：必须和已安装的调试扩展匹配，比如 "node"（对应 Debugger for javascript）、"python"（对应 Python 扩展）、"pwa-node"（新版 Node 调试器）
• "request"：只接受 "launch"（直接运行）或 "attach"（连接已有进程），写成 "run" 或留空都会报错 Invalid request type
• "program"（Node）或 "module"（Python）：路径必须是相对于工作区根目录的，且不能用 ~ 或环境变量，例如写成 "${workspaceFolder}/src/main.js"，而不是 ./src/main.js（后者可能找不到）

为什么 F5 启动后立刻退出，或者卡在“正在启动”

这不是 VSCode 坏了，而是调试器没等到目标进程就认为失败了。常见原因集中在超时、入口不可达、权限或端口冲突。

• node.js：如果脚本执行完立即退出（比如没监听事件、没调用 server.listen()），调试器会等几秒后自动终止。加一句 console.log('ready'); 或设置 "stopOnEntry": true 观察是否真进去了
• Python：检查 "justMyCode": true（默认值）——它会跳过标准库和第三方包，但如果入口文件本身被当成“非我的代码”，也会一闪而过；临时设为 false 排查
• Attach 模式：确保目标进程已用调试参数启动，比如 node --inspect-brk=9229 index.js，且 port 字段和 launch.json 中一致

chrome 调试前端页面时，断点不触发的硬性条件

用 VSCode 调试 Chrome 页面，本质是通过 chrome 类型调试器连接浏览器的 DevTools 协议。只要以下任一条件不满足，断点就永远灰色：

• Chrome 必须以远程调试模式启动：chrome.exe --remote-debugging-port=9222（windows）或 open -a "google Chrome" --args --remote-debugging-port=9222（macos）
• launch.json 中的 "url" 必须和 Chrome 当前标签页地址完全一致（包括 http://、端口、路径），哪怕多一个斜杠也不行
• 前端资源必须启用 source map，且浏览器开发者工具的 Settings → Preferences → Sources → Enable JavaScript source maps 是开启状态

{   "version": "0.2.0",   "configurations": [     {       "type": "pwa-node",       "request": "launch",       "name": "Launch app",       "skipFiles": ["/**"],       "program": "${workspaceFolder}/src/index.ts",       "preLaunchTask": "tsc: build - tsconfig.json",       "outFiles": ["${workspaceFolder}/dist/**/*.js"],       "sourceMaps": true,       "smartStep": true     }   ] }

调试器对路径、协议、编译产物和运行时环境的耦合比想象中更紧。最容易忽略的是：你以为在调试源码，其实调试器连的可能是旧缓存、构建残留，或者另一个同名但不同路径的文件。每次断点失灵，先确认「VSCode 当前打开的文件」和「调试器实际加载的文件」是不是同一个。