VSCode监视面板需在调试暂停时才激活，按Ctrl+Shift+D打开“运行和调试”视图后，“监视”标签仅在断点命中后亮起并可用；支持点击“+”添加表达式或悬停变量右键“添加到监视”，不启动调试则该区域置灰不可操作。
调试时按快捷键 Ctrl+Shift+D 打开“运行和调试”视图
监视面板不是独立窗口，而是“运行和调试”视图下的一个子区域。必须先进入调试上下文，该面板才会激活并可操作。如果没启动调试，Ctrl+Shift+D 会打开空的调试侧边栏，但“监视”区域是灰的、不可点击。
常见错误现象：按下 Ctrl+Shift+D 后看不到“监视”标签页——大概率因为还没开始调试，或调试已结束。只有在断点暂停、程序处于中断态时，“监视”才可用。
- 先在代码中单击行号左侧添加断点（红点出现）
- 按
F5启动调试（确保launch.json已配置好，且program路径正确） - 等执行停在断点后，再按
Ctrl+Shift+D，此时“监视”标签才亮起并可点击
在“监视”区域点击“+”号添加表达式
VSCode 不提供全局“打开监视面板”的独立命令，它的设计逻辑是“用时即显”：只要调试会话活跃，“监视”区域始终存在，只需展开即可。你不需要记忆额外命令，也不用从菜单里层层查找。
使用场景：想看 user.profile.name 是否为空，或跟踪 items.length > 0 的布尔结果。
- 调试暂停后，直接点击“监视”区域右上角的
+图标 - 输入任意合法表达式，如
this.state.count、response?.data?.users || [] - 按回车确认，表达式立即加入列表，并实时刷新值
- 若输错语法，右侧显示
Expression produces a syntax error，不报红但值为空
右键变量名一键添加到监视，避免拼写错误
手动输入嵌套属性（比如 props.children[0].props.id）极易漏点、错大小写或括号不匹配。VSCode 支持光标悬停后右键直达，这是最稳的添加方式。
性能影响：无。该操作只向监视列表注入字符串，不触发任何求值，直到下次断点暂停才计算。
- 调试暂停时，把鼠标停在源码中的变量或属性名上（如高亮显示
data.items） - 右键 → 选择
添加到监视 - 切换到“监视”面板，确认已添加；表达式默认带完整路径，无需自己补
this.或window. - 注意：若变量未在当前作用域声明（比如闭包外的私有字段），仍可能显示
Cannot access 'xxx' before initialization
监视面板不显示？先检查 launch.json 和断点状态
很多人卡在这一步：明明按了快捷键、也点了 +，但“监视”区域就是空白或不可交互。根本原因往往不在面板本身，而在前置条件没满足。
容易被忽略的三个点：
-
launch.json缺失或type配置错误（例如 Python 项目配成"type": "node"）→ 调试器根本没加载 - 断点设在未被执行的分支（比如
if (false) { ... }内部）→ 程序没停，监视区域不激活 - 调试已结束（控制台输出
Process exited with code 0）→ 必须重启调试才能恢复监视功能
没有“永久开启”的监视面板；它严格绑定调试生命周期。一旦调试终止，所有监视项清空，下次需重新添加。
