调试控制台是VSCode中强大的交互式评估环境，支持执行表达式、调用函数、修改变量、遍历对象、操作DOM及切换作用域，大幅提升调试效率。

如果您在使用 VSCode 进行代码调试时，仅将调试控制台视为日志输出窗口，则可能忽略了它作为交互式评估环境的核心能力。以下是深入利用调试控制台的多种方式：

本文运行环境：MacBook Air，macOS Sequoia。

一、执行任意表达式并即时查看结果

调试控制台支持在断点暂停状态下直接输入 JavaScript/TypeScript 表达式，VSCode 会立即求值并显示返回值，无需修改源码或重新运行。

1、在代码中设置断点并启动调试会话。

2、待程序暂停后，在调试控制台中输入 user.name.toUpperCase()。

3、按下回车，控制台立即输出当前作用域下 user 对象的 name 属性大写形式。

二、调用函数与修改变量值

控制台可访问当前堆栈帧中的所有局部变量、闭包变量及全局对象，允许主动调用函数或覆盖变量内容，用于验证逻辑分支或模拟异常状态。

1、在断点暂停时，输入 calculateTotal(items, 'USD') 并执行，观察返回值是否符合预期。

2、输入 count = 999，回车后该变量在后续断点中即以新值参与执行。

3、输入 localStorage.setItem('debugMode', 'true')，可临时启用前端调试开关。

三、展开与遍历复杂对象结构

控制台支持对对象、数组、Map、Set 等结构进行交互式展开，点击三角箭头即可逐层查看属性与值，避免手动 console.log 多层嵌套。

1、暂停后输入 response.data，回车。

2、在输出结果上点击右侧小箭头，展开 response.data 的全部字段。

3、继续点击嵌套对象（如 response.data.items[0]）旁的箭头，查看首项完整结构。

四、使用 $ 和 $$ 快捷命令操作 DOM（仅限浏览器调试）

当使用 Chrome 或 Edge 调试 Web 页面时，调试控制台继承浏览器开发者工具的快捷命令，可快速选取和检查元素。

1、确保调试配置为 launch 模式且已附加到浏览器标签页。

2、暂停后输入 $('[data-testid="header"]')，返回匹配的第一个 DOM 元素。

3、输入 $$('button')，返回所有 button 元素的 NodeList。

4、对返回的元素调用 .style.backgroundColor = 'yellow' 实时高亮页面控件。

五、切换不同作用域上下文进行评估

当存在多层调用栈时，调试控制台默认使用最内层作用域；但可通过顶部下拉菜单切换至任意上级栈帧，从而评估不同函数内的变量状态。

1、触发多层函数调用并在深层函数中暂停。

2、查看调试面板顶部“CALL STACK”区域，确认存在多个函数条目。

3、点击调试控制台右上角的上下文选择器，从下拉列表中选择 app.js:renderComponent。

4、此时输入 props.theme 将读取 renderComponent 函数作用域下的 props 值。