调试侧边栏包含调用堆栈、作用域、变量、监视和断点功能，支持查看执行流程与变量状态；2. 编辑器中标记当前行、断点与内联值提示，辅助定位代码问题；3. 调试控制台输出日志、支持表达式求值并显示错误信息；4. 顶部工具栏提供继续、单步执行、重启与停止等调试控制；5. 通过launch.json配置调试参数，实现定制化调试会话。熟练运用这些面板与功能可显著提升调试效率。
Visual Studio Code（简称 VS Code）的调试器 UI 设计简洁但功能强大，合理使用各个面板可以显著提升调试效率。下面详细介绍调试过程中涉及的主要面板及其功能。
1. 调试侧边栏（Debug Sidebar）
点击左侧活动栏中的虫子图标可打开调试侧边栏，这是调试操作的核心区域，包含多个功能区：
- 调用堆栈（Call Stack）：显示当前暂停执行时的函数调用路径。点击任一栈帧可跳转到对应代码位置，方便追溯执行流程。
- 作用域（Scopes）：列出当前执行上下文中的变量范围，如 Local（局部变量）、Global（全局变量）等。展开后可查看各变量的实时值。
- 变量（Variables）：在 Scopes 下展开后可见，展示当前作用域内所有可用变量及其值。对象和数组可逐层展开查看内部结构。
- 监视（Watch）：允许你手动添加表达式或变量名，实时监控其值的变化。适合跟踪复杂表达式或嵌套属性。
- 断点（Breakpoints）：列出所有已设置的代码断点。可勾选启用/禁用单个断点，也可右键进行更多操作，如设置条件断点。
2. 编辑器中的调试标注
在代码编辑区域，调试器会通过视觉标记辅助定位问题：
- 当前执行行：黄色高亮背景表示即将执行的代码行。
- 断点标记：行号左侧的红点表示已设置断点。禁用的断点显示为灰色圆圈。
- 内联值提示：在支持的语言中（如 JavaScript、Python），鼠标悬停或开启设置后可在代码行内看到变量的当前值。
3. 调试控制台（Debug Console）
位于面板区域底部，默认在调试时显示，主要用途包括：
- 输出程序运行时的 console.log 或打印语句内容。
- 支持交互式输入表达式并立即求值（REPL 功能），可用于修改变量或调用函数测试行为。
- 显示未捕获异常和错误堆栈信息，帮助快速定位问题根源。
4. 顶部调试工具栏
启动调试后，编辑器顶部会出现一个浮动工具栏，提供关键控制按钮：
- 继续 / 暂停（F5）：继续执行到下一个断点，或暂停当前运行。
- 单步跳过（F10）：执行当前行，不进入函数内部。
- 单步进入（F11）：进入当前行调用的函数内部，深入调试。
- 单步跳出（Shift+F11）：执行完当前函数剩余部分，并返回到调用处。
- 重启（Ctrl+Shift+F5）：重新启动调试会话。
- 停止（Shift+F5）：终止调试进程。
5. 启动配置与调试视图
通过 .vscode/launch.json 文件配置调试参数，可在调试侧边栏顶部选择不同启动配置。常见设置包括：
- 指定程序入口文件、工作目录、环境变量。
- 设置预启动任务（preLaunchTask），如先编译再调试。
- 配置是否自动附加到子进程、是否启用条件断点等高级选项。
基本上就这些。掌握每个面板的作用，结合快捷键和配置，能让调试过程更高效直观。
