VSCode监视面板显示{…}或[Object]，主因是变量未初始化、作用域退出或对象被压缩/冻结；需确保断点位于对象有效作用域内，可用JSON.stringify或toRaw绕过Proxy，支持点号/方括号语法精准监控嵌套属性。
调试时对象属性不展开？先确认断点位置和变量作用域
VSCode 的监视面板（Watch）本身不“自动展开”对象，它只显示你添加进去的表达式求值结果。如果看到 {…} 或 [Object] 而不是具体属性，通常是因为：变量尚未初始化、作用域已退出、或对象被压缩/冻结。比如在异步回调里访问 res，但断点设在回调外，res 就是 undefined；又或者你在函数返回后才打开监视面板，局部变量已销毁。
实操建议：
- 确保断点停在对象确实存在且可访问的位置，比如
const user = await fetchUser();后立即暂停 - 不要直接写
user，试试JSON.stringify(user, null, 2)强制展开（仅限可序列化对象） - 对 Proxy 或 Vue 响应式对象，监视
user._rawValue或用toRaw(user)（需引入）绕过代理层
Watch 面板里怎么加嵌套属性？支持点号和方括号语法
监视面板接受任意合法 JavaScript 表达式，不局限于变量名。你可以直接输入 user.profile.avatar.url 或 items[0].name，VSCode 会在断点命中时实时求值并显示结果。这比手动展开对象更精准，尤其适合监控深层字段变化。
注意点：
-
user?.profile?.avatar?.url这种可选链写法完全可用，避免因中间某层为null导致整个表达式报错 - 带空格或特殊字符的 key 必须用方括号，例如
obj["first name"]，obj.first name会语法错误 - 计算属性如
user.fullName如果是 getter，监视会触发执行；频繁使用的 getter 可能带来副作用，慎加
为什么 Watch 显示 “Cannot read property 'x' of undefined”？不是面板问题，是代码逻辑
这个错误信息不是 VSCode 监视面板的 bug，而是你在 Watch 中写的表达式在当前断点上下文里求值失败了。比如写了 response.data.items[0].id，但 response 是空对象、data 是 undefined，JS 自然抛错。
快速排查方法：
- 把长表达式拆开：先加
response，再加response.data，逐级验证哪一层开始为undefined - 用空值合并操作符兜底：
response?.data?.items?.[0]?.id ?? "N/A" - 如果该对象来自 API，检查 Network 面板确认响应体结构是否和代码假设一致
Watch 和 Debug Console 的关键区别：求值时机与副作用风险
Watch 面板里的表达式在每次断点暂停时**自动重新求值**，而 Debug Console 是你手动敲回车才执行。这意味着 Watch 更适合持续观察，但也更容易触发意外副作用——比如你在 Watch 里写了 doSomething()，每次暂停都会调用它。
安全做法：
- Watch 里只放纯读取操作，避免调用修改状态的函数、
setState、push等 - 需要执行带副作用的代码，一律切到 Debug Console 手动操作
- Watch 表达式里不要用
$_（Debug Console 特有），它在 Watch 中无效
