VSCode调试UI由五大组件构成：一、左侧调试侧边栏管理断点、变量监控与调试配置；二、顶部调试工具栏提供单步执行等控制指令；三、编辑器内联断点标记支持悬停查看与拖拽迁移；四、变量视图按作用域组织并支持就地编辑；五、调用堆栈面板倒序展示调用链并支持跨帧跳转。
如果您在使用 VSCode 进行代码调试时发现调试界面元素显示异常、功能不可用或无法理解各面板作用，则可能是由于对 Debugger UI 组件的布局逻辑与职责划分缺乏系统认知。以下是针对 VSCode 调试器 UI 各核心组件的逐项解析：
本文运行环境：MacBook Pro，macOS Sequoia。
一、左侧调试侧边栏（Debug Sidebar）
该区域是调试会话的控制中枢，集中管理断点、变量状态、调用堆栈及调试配置入口，所有调试启动与状态切换均由此发起。
1、点击左侧活动栏中的虫子图标（Debug），展开调试侧边栏。
2、在“BREAKPOINTS”区域中，勾选或取消勾选已设置的断点以启用或禁用其触发。
3、在“WATCH”区域点击“+”号，输入表达式（如 this.state.count）实时监控变量求值结果。
4、在“DEBUG CONSOLE”中可直接执行 JavaScript 表达式，输出结果与当前暂停上下文一致。
二、顶部调试工具栏（Debug Toolbar）
该工具栏仅在调试会话处于活动状态时显示，提供单步执行、继续、暂停、重启和停止等核心控制指令，其可见性与调试生命周期强绑定。
1、当调试器暂停在断点时，点击 Continue (F5) 恢复程序运行至下一断点或结束。
2、点击 Step Over (F10) 执行当前行，不进入函数内部。
3、点击 Step Into (F11) 进入当前行调用的函数体首行。
4、点击 Step Out (Shift+F11) 快速执行完当前函数剩余部分并返回上层调用点。
三、编辑器内联断点标记（Inline Breakpoint Indicators）
断点不再仅以左侧装订线红点呈现，VSCode 在代码行号右侧渲染可交互的内联提示，直观展示断点类型、命中次数及条件表达式。
1、将鼠标悬停于行号右侧的红色圆点，弹出浮层显示 Breakpoint hit 3 times 或 Conditional: i > 5。
2、右键点击内联标记，选择“Edit Breakpoint”可修改条件、日志消息或命中次数限制。
3、拖拽内联标记至相邻行，可快速迁移断点位置，松手即生效。
四、变量视图（Variables View）
该面板按作用域层级组织变量数据，自动展开局部变量、闭包、全局对象等上下文，支持就地编辑与类型推断标注。
1、在调试暂停状态下，展开 “Local” 节点查看当前函数内声明的所有变量。
2、点击变量值右侧的铅笔图标，输入新值（如将 count: 0 修改为 count: 100）并回车确认。
3、展开 “This” 节点可查看当前 this 指向对象的全部属性与方法。
五、调用堆栈面板（Call Stack Panel）
该面板以倒序方式列出从当前执行点回溯至程序入口的完整函数调用链，支持跨栈帧跳转与异步上下文识别。
1、点击任意调用栈条目（如 onClickHandler (App.tsx:42)），编辑器自动跳转至对应源码位置并高亮该行。
2、若存在异步操作，条目旁会显示 async 标签，并以虚线连接关联的 Promise 创建点。
3、右键点击某一层栈帧，选择 “Restart Frame” 可重新执行该函数调用，无需重启整个调试会话。
