VSCode调试远超F5：用条件断点、日志断点、忽略次数断点精准控制；启用smartStep和sourceMaps调试异步代码；调试控制台实时执行JS、编辑变量；一套launch.json配置通用于Node.js与浏览器端。
VSCode 是 JavaScript 开发者最常用的编辑器之一，而它的调试能力远不止“点一下 F5”那么简单。掌握几个关键技巧，就能大幅减少 console.log 调试、快速定位异步问题、看清变量生命周期，甚至调试 Node.js 和浏览器端代码统一复用同一套流程。
断点不只是“点击行号”
普通断点（红点）适合暂停执行，但真实场景中常需要更精准的控制：
-
条件断点：右键断点 → “编辑断点” → 输入表达式（如
user.id === 123），只在满足条件时中断，避免在大量循环中手动按 F5 -
日志断点：不暂停，只输出内容（如
用户登录：${user.name}），替代简单 console.log，且不会提交到代码库 - 忽略次数断点：设为“忽略前 99 次”，第 100 次才停，适合排查偶发问题或循环末尾异常
调试异步代码不再“断不住”
Promise、async/await 常让断点失效或跳转混乱，关键是启用 异步堆栈跟踪：
- 在 launch.json 的配置中添加
"smartStep": true，VSCode 会自动跳过内部编译辅助代码（如 Babel、TS 编译后的 _awaiter） - 开启
"sourceMaps": true并确保生成了 .map 文件，这样断点能准确落在原始 TS 或 JSX 行上 - 遇到 await 后断点没触发？检查是否在
node_modules中——默认跳过，可在skipFiles中显式移除相关路径
快速查看和修改运行时状态
暂停后别只盯着“变量”面板，这些操作能提速排错：
立即学习“Java免费学习笔记（深入）”；
- 在“调试控制台”里直接输入表达式（如
localStorage.getItem('token')或arr.filter(x => x.active)），支持完整 JS 语法 - 右键变量 → “复制值”或“复制作为 const”，方便粘贴到测试环境复现
- 双击变量值可直接编辑（仅限基本类型和部分对象属性），改完回车立即生效，适合模拟边界输入
一套配置，多端调试
不用为 Chrome、Node.js、Electron 分别折腾配置：
- 用
vscode-js-debug（已内置）统一处理，launch.json 中 type 设为pwa-node或pwa-chrome -
前端项目加一行
"runtimeExecutable": "npm"和"runtimeArgs": ["run", "dev"]，F5 直接启动并调试 Vite/Next 等 dev server - 调试本地 npm link 包？在被 link 的包根目录加
.vscode/launch.json，用attach模式连接主进程
基本上就这些。不需要记所有配置项，先从条件断点和调试控制台开始用，两周内你会觉得以前靠 console.log 调试像在盲开。
