调试控制台支持表达式求值、自动补全与历史命令、区分程序输出与手动执行结果,并可在断点时动态修改变量,结合断点实现高效排错,提升调试效率。

VSCode的调试控制台不只是输出日志的地方,用好它能大幅提升排错效率。掌握一些实用技巧,可以让你在调试时更快定位问题。
1. 支持表达式求值
调试时可以在控制台直接输入变量名或表达式,查看当前作用域下的值。
- 比如输入 user.name,会实时显示当前 user 对象的 name 属性
- 也可以执行函数调用,如 calculateTotal(items),前提是该函数在当前上下文中可访问
- 支持简单计算,例如 count * 2 + 10
这个功能适合快速验证逻辑,不用反复修改代码打日志。
2. 自动补全与历史命令
调试控制台支持类似编辑器的自动补全,输入变量前缀后会提示可用属性和方法。
- 按上下箭头可翻阅之前输入过的命令,重复执行更方便
- 适合多次调用某个检查语句,比如反复查看某个状态对象
这减少了手动输入错误,也加快了交互速度。
3. 区分 console.log 与调试输出
控制台会同时显示程序中的 console.log 输出和你手动执行的结果。
- 程序输出以灰色小图标标识
- 手动执行的表达式结果带紫色背景,容易区分
- 注意:某些异步操作(如 setTimeout)在控制台执行后可能不会立即反映结果
看清来源有助于判断是代码主动打印,还是你临时查询的结果。
4. 结合断点动态调试
在断点暂停时,利用控制台修改变量值,模拟不同状态。
- 比如设置 isValid = true,然后继续执行,看程序是否按预期走分支
- 可临时定义辅助变量帮助分析,如 tempList = data.filter(x => x.active)
- 适合测试边界情况,避免重启调试
这种“热干预”方式比改源码再运行快得多。
基本上就这些。调试控制台像个轻量级REPL,关键是多动手试。不复杂但容易忽略。


