VSCode调试技巧包括：一、设断点并启动调试；二、用条件断点精准触发；三、调试控制台实时执行与修改；四、日志点替代console.log；五、监视表达式动态跟踪变量。
如果您在使用 VSCode 开发程序时遇到运行异常或逻辑错误，但难以快速确定问题根源，则可能是由于缺乏对调试功能的系统性运用。以下是多种高效定位并修复 Bug 的实用技巧：
本文运行环境：MacBook Air，macOS Sequoia。
一、设置断点并启动调试会话
断点是调试的核心机制，它能让程序在指定代码行暂停执行，从而允许开发者检查变量状态、调用栈及执行流程。
1、在代码行号左侧灰色区域单击，出现实心红点即表示断点已设置成功。
2、确保当前工作区已配置有效的 launch.json 文件，若无则点击调试侧边栏中的“创建 launch.json 文件”，选择对应环境（如 Node.js、Python 或 Chrome）。
3、按 Ctrl+Shift+D 打开调试视图，点击绿色三角形按钮启动调试会话。
4、程序运行至断点处将自动暂停，此时可在“变量”面板中查看当前作用域内所有变量值。
二、使用条件断点精准捕获异常场景
当问题仅在特定数据条件下复现时，普通断点会频繁中断，降低效率；条件断点可限定仅在满足表达式时暂停。
1、右键已设断点，在弹出菜单中选择“编辑断点”。
2、在输入框中填写布尔表达式，例如 i === 5 或 user.id === null。
3、保存后，该断点仅在表达式返回 true 时触发，避免无关循环或重复调用干扰。
三、利用调试控制台实时执行与修改
调试控制台支持在暂停状态下直接运行 JavaScript 表达式或修改变量值，有助于快速验证假设或绕过临时障碍。
1、在调试暂停时，切换到“调试控制台”面板（快捷键 Ctrl+Shift+Y）。
2、输入任意合法表达式，如 document.querySelector('input').value，回车即可获取结果。
3、尝试赋值语句，例如 count = 100，可即时改变当前作用域变量，观察后续行为变化。
四、启用日志点替代常规 console.log
日志点无需修改源码即可输出信息，避免因频繁增删 console.log 导致代码污染或提交风险。
1、右键断点位置，选择“添加日志点”。
2、在弹出输入框中填写模板字符串，如 "用户点击次数：{clickCount}"，其中花括号内为可访问的变量名。
3、程序运行至此行时将自动打印日志，且不中断执行，适合高频路径追踪。
五、监视表达式动态跟踪关键值变化
对于难以预测何时偏离预期的变量或计算结果，可添加监视表达式，使其持续显示最新值，无需手动展开变量树。
1、在调试视图中点击“监视”面板右上角的“+”号图标。
2、输入需跟踪的表达式，例如 response.status 或 items.filter(x => x.active).length。
3、每次单步执行或继续运行后，监视列表会自动刷新对应值，便于识别突变节点。
