VSCode调试中的表达式求值是在当前暂停帧内安全探查，Debug Console支持合法JS/TS表达式（如user?.name），不支持语句；Watch面板受限于作用域和求值时机，需注意变量可见性、拼写及引用刷新。
VSCode表达式求值不是“运行代码”，而是“在当前暂停帧里安全探查”——理解这点，就能避开 90% 的误用和报错。
Debug Console 里能输什么表达式
调试控制台（Debug Console）支持任意合法的 JavaScript/TypeScript 表达式，但前提是它能在当前调用栈帧中被求值。常见有效写法包括：
-
user?.name（带可选链，防Cannot read property 'name' of undefined） -
items.filter(i => i.status === 'pending')（方法链必须确保items存在且有该方法） -
typeof data === 'object' && data?.id（类型判断 + 安全访问，比直接写data.id更稳） -
JSON.stringify(state, null, 2)（适合快速查看嵌套结构，但大对象会卡顿）
无效写法会直接报错：console.log()、let x = 1、if (x) {} —— 这些是语句，不是表达式，Debug Console 不接受。
Watch 面板表达式为什么总显示 NaN 或 ReferenceError
Watch 面板只在断点暂停时求值，且严格受限于当前堆栈帧的作用域。常见原因有：
- 变量在断点所在行之后才声明：比如断点设在
let count = 0;上方 →count不可见；移到下一行再试 - 拼写错误或大小写不一致：
userData和userdata是两个变量 - 访问了未初始化的属性：
obj.items.length中obj.items是undefined→ 改成obj?.items?.length - 用了
await或async函数：await fetch('/api')会报SyntaxError: await is only valid in async functions，Watch 不支持顶层 await
右键点击源码中的变量名，选择“添加到监视”，能避免手动输入出错，尤其适合长命名或深层嵌套字段（如 response.data.users[0].profile.settings.theme）。
哪些操作看起来有用，其实很危险
Debug Console 允许执行带副作用的操作，但容易干扰程序逻辑，导致结果不可复现：
-
user.name = 'test'—— 看似方便改值验证，但可能触发 Vue/React 的响应式更新或破坏后续逻辑 -
localStorage.setItem('debug', 'true')—— 修改了全局状态，下次调试行为可能已变 -
api.updateOrder(orderId, newData)—— 真实发请求，污染测试数据
如果真要测副作用，建议先复制函数体到 Console 手动执行，并加注释提醒自己；更稳妥的做法是在代码里临时加 console.log() 或使用日志断点（Logpoint），不中断执行流。
Watch 不自动刷新引用内容，这点最容易被忽略
你监视了 obj，然后代码中执行了 obj.name = 'new'，Watch 面板里的 obj 展开树不会自动更新——它不会监听引用变化。必须手动点右侧的刷新图标（↻），或等下次断点暂停时才会重新求值。对于频繁修改的对象，不如直接监视具体字段：obj.name、obj.updatedAt，这样每次暂停都拿到最新值，不用点刷新。
