断点是调试基础,点击行号或按F9可设置;条件断点通过右键编辑,支持布尔表达式如i===10;日志点用于输出变量值而不中断执行,格式为{variable};命中条件可设定触发次数,异常断点能捕获未处理错误。

VSCode的调试功能强大且灵活,适合从初学者到高级开发者的各种需求。掌握调试器不仅能帮你快速定位问题,还能深入理解代码执行流程。下面从最基础的断点开始,逐步深入到复杂的条件断点和高级技巧。
基础断点:快速暂停执行
在VSCode中设置断点非常简单:点击代码行号左侧的空白区域,会出现一个红点,表示断点已设置。程序运行到这一行时会自动暂停。
调试启动后,你可以查看当前作用域内的变量值、调用栈以及表达式求值结果。这是最基本的调试方式,适用于大多数场景。
- 点击行号旁空白处添加或移除断点
- 按F9快捷键也能快速切换断点
- 调试面板中的“变量”区域显示当前上下文中的所有值
条件断点:只在满足条件时中断
有时候你并不希望每次执行到某一行都暂停,而是想在特定条件下才中断。右键点击断点,选择“编辑断点”或输入JavaScript表达式来设置条件。
例如,你可以在循环中设置i === 10作为条件,这样只有当循环计数器等于10时才会暂停。
- 支持布尔表达式,如count > 100
- 可使用函数调用判断,比如data.isValid()
- 避免副作用表达式,不要在条件中修改数据状态
日志点:不中断但输出信息
如果你只想打印一些信息而不停止程序运行,可以使用“日志点”。右键设置断点,选择“转换为日志点”,然后输入要输出的内容。
在日志消息中可以用{ }包裹变量名,比如当前值:{value},VSCode会在运行时自动替换为实际值。
- 适合高频执行的代码路径,避免频繁中断影响调试节奏
- 可用于跟踪变量变化趋势而不打断执行流
- 输出内容会显示在调试控制台中
命中条件与异常断点:更精细的控制
除了普通条件,还可以设置“命中次数”断点。比如只在该断点被触发第5次或超过10次时才中断。这在排查偶发问题时特别有用。
另外,在调试面板中启用“异常断点”,可以让程序在抛出未捕获或所有异常时自动暂停,极大提升错误定位效率。
- 命中条件支持“等于”、“是倍数”、“大于等于”等选项
- 异常断点可在“调用堆栈”窗口上方开关
- 结合源码映射,即使在压缩代码中也能有效工作
基本上就这些。熟练使用这些功能后,你会发现很多原本需要靠console.log反复尝试的问题,现在几秒钟就能搞定。调试不是玄学,关键是掌握工具的细节。










