调用堆栈面板显示函数调用链路并支持跳转与右键操作；变量面板分区块实时呈现作用域变量，可展开、悬停预览、复制；监视表达式动态计算结果；调试UI可拖拽调整或重置布局；快捷键提升调试效率。
一、调用堆栈面板功能与交互方式
调用堆栈面板显示当前调试暂停时的函数调用链路，从最内层执行函数到入口点依次排列，帮助定位代码执行路径。该面板支持点击跳转至对应源码位置，并可右键执行上下文操作。
1、在调试过程中暂停执行后，左侧活动栏点击“运行和调试”图标（或按 Ctrl+Shift+D）打开调试视图。
2、在“调用堆栈”区域，逐行查看函数名、文件路径及行号信息。
3、点击某一行，编辑器自动跳转至该函数调用所在的源文件与具体行。
4、右键某条堆栈项，可选择“复制调用堆栈”或“在控制台中求值”。
二、变量面板的结构与数据呈现逻辑
变量面板分“局部变量”、“全局变量”、“闭包”等折叠区块，实时反映当前作用域中所有可访问标识符及其值，支持展开对象与数组以查看嵌套内容。
1、调试暂停时，“变量”面板自动刷新，显示当前作用域全部变量。
2、点击变量旁的三角箭头，展开对象属性或数组元素。
3、悬停于变量值上，显示完整字符串预览或类型提示。
4、右键变量值，可选择“在控制台中求值”或“复制值”。
三、监视表达式添加与动态更新机制
监视面板允许手动输入任意合法 JavaScript/TypeScript 表达式，调试器在每次暂停时重新计算并显示其结果，适用于跟踪复杂状态或跨作用域变量。
1、在“监视”区域点击“+”号按钮，光标进入编辑状态。
2、输入表达式，例如 user.profile.name 或 arr.length > 5。
你是 TypeScript 项目架构专家，专注于脚手架搭建生产就绪的 Node.js 和前端应用。生成包含现代工具链（pnpm、Vite、Next.js）、类型
3、按 Enter 确认添加，该表达式即出现在监视列表中。
4、调试暂停时，右侧实时显示该表达式的计算结果，若值为对象则可点击展开。
四、调试UI布局调整与视图重置方法
VSCode 允许用户拖拽、隐藏或重排调试相关面板，确保关键信息在有限空间内高效呈现；当布局错乱时可通过内置命令快速恢复默认状态。
1、将鼠标悬停在“调用堆栈”“变量”或“监视”面板标题栏，出现拖动手柄后按住左键拖动至目标位置。
2、右键任一面板标题，取消勾选“显示在侧边栏”可将其移至面板底部区域。
3、按 Ctrl+Shift+P 打开命令面板，输入并选择“调试：重置调试视图布局”。
4、确认执行后，所有调试面板恢复初始垂直排列状态。
五、快捷键驱动的调试UI操作流程
键盘操作可绕过鼠标交互，显著提升调试效率，尤其适用于断点密集或需频繁切换上下文的场景。
1、按 Ctrl+Shift+Y 快速聚焦到“调试控制台”面板。
2、按 Ctrl+Shift+D 切换至“运行和调试”视图。
3、在“变量”面板中按 Tab 键可在变量项间移动，按空格键展开/折叠对象。
4、按 F9 在当前行切换断点，按 F5 启动/继续调试，触发 UI 状态同步更新。
