调试暂停时右键变量名选“添加到监视”可快速添加合法JS/TS表达式，支持可选链和索引访问，但需在断点暂停状态且变量已声明；监视值未更新常因作用域退出或异步时机不当。
怎么快速添加变量到监视面板
调试暂停时，光标悬停在源码中的变量名上（比如 user.profile.name 或 items.length），右键直接选“添加到监视”——比手动输入快、零拼写错误、自动带上下文作用域。
这个操作只在断点暂停状态下生效；如果没暂停，右键菜单里不会出现该选项。常见误操作是边运行边右键，结果找不到入口。
- 嵌套属性如
response.data?.users[0].id也能一键添加，VSCode 会原样保留可选链和索引访问 - 不支持添加未声明变量（比如拼错成
usre），但会在监视面板里显示ReferenceError: usre is not defined - 添加后表达式默认命名为原始字符串，长表达式建议立即重命名（点击铅笔图标）
监视表达式里能写什么、不能写什么
监视面板接受任意合法的 JavaScript/TypeScript 表达式，但求值发生在当前调用栈帧的上下文中——不是全局作用域，也不是任意函数内部。
能写的典型例子：JSON.stringify(data)、this.state.count、arr.filter(x => x.active).length；不能写的包括：赋值语句（a = 1）、声明语句（let b = 2）、await（除非在 async 调试帧中且调试器支持）、import 或 require。
- 三元运算符可用于条件过滤：
items.length > 0 ? items[0].name : "empty" - 安全访问推荐用可选链：
user?.profile?.avatarUrl，避免Cannot read property 'profile' of undefined - 调用函数需谨慎：
calculateTotal()会真实执行，可能触发副作用或报错
为什么监视值没更新或显示 undefined
最常见原因是表达式引用了已退出作用域的变量，比如在循环内定义的 let i，断点设在循环外时监视 i 就是 undefined；或者对象属性在后续代码中被删掉（delete obj.key）。
另一个高频原因是异步时机问题：监视 response.data 时，断点停在 fetch() 调用后但 await 还没完成，此时 response 还是 Promise 对象，response.data 自然为 undefined。
- 检查调用堆栈面板，确认当前帧是否包含你要访问的变量声明
- 把表达式简化到最小单元测试，比如先监视
response，再监视response.data - 在调试控制台（
Debug Console）里手动输入同一表达式，看是否报错或返回预期值
多个监视项怎么排序和管理更高效
监视项顺序直接影响阅读效率，尤其当有 5+ 条表达式时。VSCode 允许直接拖拽重排：鼠标移到某条监视项左侧空白处，按住左键上下拖动即可——这个操作不需要打开任何菜单，但很多人不知道手柄在哪。
重命名不是可选项，而是必要动作。默认名称是表达式原文，比如 data.users.filter(u => u.active).map(u => u.id) 占满一行还看不出意图。改成“活跃用户 ID 列表”后，协作调试或回看历史会话时一目了然。
- 拖拽时松手位置决定插入点，目标项上方出现浅色横线即表示将插在此处
- 重命名后，表达式本身不变，只是显示名更新，不影响求值逻辑
- 长期调试会话中，定期清理失效监视项（右键 → Remove）能减少干扰
