VSCode调试核心在于断点设置、变量观察和调用栈解读：支持普通、条件、日志、函数及异常断点；变量面板分作用域，可手动监视表达式；调用堆栈揭示执行路径，配合快捷键与热重载提升效率。
VSCode调试不是点一下“开始调试”就完事的，关键在理解断点怎么设、变量怎么看、调用栈怎么读——这些才是定位问题的核心。
断点：不止是红点，要会选类型
普通断点（点击行号左侧）最常用，但遇到循环或条件逻辑时容易卡住。这时候用条件断点更高效：右键断点 → “编辑断点” → 输入表达式，比如 i === 5 或 user.id > 100，只在满足条件时暂停。
日志断点适合不想中断执行又想看值的场景：右键 → “编辑断点” → 填入类似 当前用户: {user.name} 的模板字符串，运行时直接输出到 Debug Console，不暂停。
还有两类容易被忽略：
-
函数断点：在“断点”面板里点 + 号，输入函数名（如
handleClick），不管它在哪定义、被谁调用，只要执行就停 - 异常断点：在“断点”面板勾选 “Caught Exceptions” 或 “Uncaught Exceptions”，JS 抛错瞬间就能捕获，不用等报错堆栈消失
变量观察：分清作用域和实时性
调试时左侧“变量”面板默认显示当前作用域的局部变量，但容易漏掉闭包变量或全局状态。可以手动在“监视”面板添加表达式，比如 window.localStorage、this.state 或 arr.filter(x => x > 10)，支持实时计算。
注意：变量值右侧的小箭头点开能看到原型链、不可枚举属性甚至 Symbol 键；悬停在代码变量上也能快速看值，但修改需双击“变量”面板里的值（仅部分类型支持，如数字、字符串、布尔值）。
调用堆栈：读懂“谁调了谁”
顶部“调用堆栈”面板列的是从当前执行位置往上回溯的函数调用链。越靠上，越接近触发点；越靠下，越接近入口（比如 webpackHotUpdate 或 onClick）。点击某一层，编辑器自动跳转到对应源码位置，并高亮该行调用语句。
常见误区：
- 看到一堆
anonymous别慌——可能是箭头函数或事件回调，展开堆栈项看文件路径和行列号更靠谱 - 异步操作（如
setTimeout、Promise.then）会让堆栈“断层”，这时配合“调试控制台”输console.trace()辅助定位 - React/Vue 等框架常有代理层，堆栈里出现
dispatchAction或queueJob是正常的，重点看它上面那一两层你的业务代码
实用技巧：提速不踩坑
调试不是越慢越好，而是快准稳：
- 按
F9快速切换断点，F5启动，F10单步跳过，F11单步进入，Shift+F11跳出当前函数——熟记这五个快捷键省一半时间 - 调试中改了代码？不用重启调试会话，VSCode 默认支持热重载（尤其对 JS/TS），改完保存，继续 F10/F11 就行
- 多个调试配置？在
.vscode/launch.json里定义不同环境（如 “Chrome”、“Node”、“Jest”），启动时从顶部调试选择器一键切换 - 远程调试 Node.js？加参数
--inspect=9229启动服务，launch.json 中设"request": "attach"和对应端口即可接入
基本上就这些。调试能力不是背出来的，是每次卡住时多点两下“调用堆栈”、多试一次“条件断点”练出来的。
