监视面板可实时跟踪变量与表达式，调用堆栈面板展示函数执行层级，断点面板管理程序暂停位置；三者协同提升调试效率。
vs code 的调试功能强大且直观，其中“监视”、“调用堆栈”和“断点”面板是调试过程中最常用的核心组件。它们帮助开发者实时查看变量状态、理解程序执行流程并精准控制代码运行。下面分别解析这三个面板的作用与使用技巧。
监视（Watch）面板：动态查看变量与表达式
监视面板允许你添加自定义的变量或表达式，并在调试过程中实时观察其值的变化。
• 可手动输入变量名（如user.name）或复杂表达式（如 items.filter(i => i.active).length），便于追踪逻辑结果。
• 在循环或递归中特别有用，能快速确认某个条件是否满足或数据是否按预期更新。
• 支持在运行时右键“Add to Watch”将变量直接加入监视列表，提升效率。
• 若表达式有语法错误或变量未定义，会显示 NaN 或报错信息，需注意上下文作用域。
调用堆栈（Call Stack）面板：掌握函数执行路径
调用堆栈展示当前暂停点的函数调用层级，反映代码是如何一步步执行到当前位置的。
• 每一行代表一个函数调用帧，顶部为当前执行函数，向下追溯至入口函数（如main 或事件回调）。
• 点击任意堆栈项可跳转到对应源码位置，查看该帧下的局部变量状态，对排查异步或深层调用问题很有帮助。
• 异步操作（如 Promise、setTimeout）可能显示为匿名帧或带有 async 标记，结合时间点分析更清晰。
• 多线程或调试 Node.js 子进程时，可通过切换“线程”视图查看不同执行流的堆栈。
断点（Breakpoints）面板：精确控制程序暂停位置
断点面板列出所有已设置的断点，支持统一管理脚本中断行为。
• 可勾选/取消断点启用状态，无需删除重设；右键提供更多选项，如“编辑断点”设置条件或命中次数。 • 条件断点（Conditional Breakpoint）只在表达式为真时暂停，适合在大量循环中定位特定情况。 • 日志断点（Logpoint）不中断执行，而是向调试控制台输出格式化消息，类似临时打印语句但更整洁。 • 删除文件中的断点后，面板中对应项也会移除；重新加载调试会话可重置全部状态。
基本上就这些。熟练运用这三个面板，能大幅提升定位 bug 和理解代码逻辑的效率。配合变量窗口和调试控制台，形成完整的可视化调试体验。
