监视面板在调试中断时自动启用，需确认断点实心命中且顶部有橙色调试工具栏；手动添加表达式或悬停右键“添加到监视”可避免错误；求值失败多因作用域缺失或可选链支持不足，应改用逻辑与操作符。

监视面板不是“开启”出来的，而是调试会话激活后、断点命中时自动可用的 UI 区域；没看到它，大概率是还没真正进入调试中断态。

确认是否已进入有效调试状态

Watch 面板只在真实调试中断时才具备求值能力。常见假性调试包括：

• 顶部没有橙色调试工具栏（含暂停/继续/重启按钮）→ 实际未启动调试，F5 可能只是运行而非调试
• 断点图标是空心红点或灰色 → 未命中，代码根本没执行到那行
• launch.json 中 "type" 配置错误（如写成 "python" 而非 "debugpy"）→ VSCode 启动的是普通进程，不是调试器
• TypeScript 或打包项目中源码映射失效 → 断点停在 .js 文件里，但监视表达式仍按 .ts 变量名写，找不到对应符号

手动调出并添加第一个监视表达式

一旦确认断点已实心红点命中、顶部出现橙色工具栏，即可操作：

VSCode

避免常见的 VSCode 错误——设置冲突、调试器配置和扩展冲突。

下载

• 按 ⇧+⌘+D（Mac）或 Ctrl+Shift+D（Win/Linux）打开“运行和调试”视图
• 在左侧调试面板中找到“监视”区域，点击右上角的“+”号
• 输入合法表达式，例如 user?.name、items.length 或 JSON.stringify(error)，回车确认
• 该表达式立刻出现在列表中，并在每次断点暂停时刷新求值结果

用右键添加比手输更可靠

调试暂停时，光标悬停在编辑器中的变量名上（如 response.data.users），右键选择“添加到监视”：

• 避免拼写错误或嵌套路径写错（比如误写成 response.data.user）
• 自动适配当前作用域上下文，尤其适合 this.state.count 或 props.children 这类易受组件生命周期影响的值
• 对可选链（?. ）支持不稳定的旧版调试器，手输 response && response.data && response.data.users 更稳妥

监视表达式求值失败的典型表现与应对

如果监视项显示 ??、undefined 或报 Cannot evaluate，不是面板坏了，而是上下文缺失：

• i 在 for 循环外部监视 → 块级作用域已退出，无此变量
• state.user 在 React 函数组件顶层监视 → 组件函数尚未执行，state 还未初始化
• user.profile.name 但 user 是 null → 某些 Node.js 版本调试器不支持链式可选操作符，改用 user && user.profile && user.profile.name
• 监视项长期不更新 → 检查是否误点了“继续”跳过了后续断点，或调试器被其他扩展干扰

真正卡住的地方往往不是“怎么打开监视面板”，而是没意识到：它严格绑定当前栈帧，且完全不缓存历史值——断点一过，上下文就丢，重来一遍才是常态。