vs code调试核心卡点是launch.json配置、sourcemap加载与调试器附着三者缺一不可;node.js断点不命中需检查type为"node"、program路径正确、es模块加runtimeargs,npm run dev应改用attach模式。

VS Code 调试不是“装个插件点一下就成”,核心卡点在 launch.json 配置是否匹配运行时环境、sourceMap 是否加载成功、以及调试器是否真正附着 —— 三者缺一不可。
Node.js 断点不命中?先确认 type 和 program 是否对得上
常见错误现象:行号旁红点是空心的,F5 后程序飞快跑完,断点完全没反应。
-
type必须是"node"(不是"pwa-node",那是旧版 Debugger for Node.js 的写法) -
program必须指向真实可执行入口,比如"${workspaceFolder}/src/index.js";若用 ES 模块,还得加"runtimeArgs": ["--loader", "ts-node/esm"] - 如果项目用了
npm run dev启动(如 Vite/Next),别配launch,改用attach模式,否则 VS Code 根本连不上进程 - 检查底部状态栏有没有「调试正在运行」字样——没有就说明调试会话压根没起来
Vue / React 前端调试:Chrome 远程端口 + sourceMap 路径必须严丝合缝
典型问题:断点打在 src/App.vue,却停在 dist/js/app.1234.js 里,变量名变成 _a、_b,行号错位。
- Chrome 必须用
--remote-debugging-port=9222启动(Windows 在快捷方式属性目标末尾加,macOS/Linux 用终端命令启动) -
launch.json中webRoot要精确指向开发服务器服务的根目录,比如"${workspaceFolder}/public"或"${workspaceFolder}/src",不能写错层级 - Webpack 项目需设
devtool: 'eval-source-map'(不是'source-map',后者在 HMR 下常失效);Vite 用户确保build.sourcemap为true,且开发服务器未启用 minify -
sourceMapPathOverrides是关键:例如"webpack:///src/*": "${webRoot}/*",路径不匹配,VS Code 就找不到原始文件
Python 调试断不住?module 模式和解释器路径比 program 更可靠
现象:脚本能跑,但断点就是不触发,尤其在包内模块或 pip install -e . 安装后调试时。
- 别依赖
"program": "./src/main.py",优先用"module": "myproject.cli"(对应python -m myproject.cli) -
python.defaultInterpreterPath必须指向虚拟环境里的解释器,比如"./venv/bin/python",系统 Python 很可能没装debugpy - 多进程训练(如 PyTorch
DataLoader(num_workers>0))默认子进程不继承调试上下文,需在配置中加"subProcess": true - 调试 Flask/FastAPI 时,
"justMyCode": false往往要打开,否则进不到框架内部逻辑
调试控制台和 WATCH 面板比鼠标悬停更值得依赖
鼠标悬停看变量容易漏掉闭包变量、异步回调里的值,或者被优化掉的临时量。
- 在 WATCH 面板右键添加表达式,比如
JSON.stringify(state.user)或Object.keys(props),支持任意 JS/Python 表达式 - VARIABLES 面板里展开
Closure节点,能直接看到函数捕获的外部变量,比翻源码找let声明快得多 - 对数组/对象右键选
Copy as Expression,粘贴到 DEBUG CONSOLE 可直接重试,比如arr.filter(x => x.id === 123) - DEBUG CONSOLE 执行代码会终止当前调试会话,别误以为是“继续执行”
最常被忽略的一点:Service Worker 缓存。Chrome DevTools → Application → Service Workers 页面,务必勾选 Update on reload,否则你改了代码、重启服务,浏览器仍在跑旧 JS。











