VSCode调试控制台支持断点暂停时实时求值合法JS/TS表达式，但不支持语句；Watch面板仅在断点时单次求值，需避免副作用、异步及大对象序列化。
调试控制台里直接输入表达式就能求值
VSCode 调试控制台不是终端，但它支持在断点暂停时实时执行合法的 JavaScript / TypeScript 表达式。只要变量在当前栈帧中已声明且可访问，就能立刻看到结果。
常见错误现象：输入 console.log(x) 报 SyntaxError；或写 if (x > 0) { ... } 直接报错——因为控制台只接受「表达式」，不接受语句。
- 有效写法：
user.name、items.filter(i => i.id > 100)、typeof data === 'object' && data?.length - 安全技巧：优先用可选链（
?.）和空值合并（??），避免Cannot read property 'xxx' of undefined - 注意作用域：断点停在
let x = 5;这一行上方时，x还未声明，控制台会提示ReferenceError
Watch 面板适合长期监控但有求值时机限制
Watch 面板不是“实时监听器”，它只在每次断点暂停时才对表达式求值一次。这个行为容易被误认为“卡住”或“没更新”。
使用场景：你想持续关注某个计算结果（如 calculateTotal(cart)）或深层属性（如 config.api.timeout），又不想反复手动输入。
- 必须是纯表达式：不能写
debugger;、function() {}或await fetch(...)（会报SyntaxError: await is only valid in async functions） - 不会自动响应引用变化：比如你监视了
obj，之后代码中执行obj.count++，Watch 里展开的obj不会自动刷新数值——得点右侧的↻图标或等下次断点再触发 - 大对象慎用
JSON.stringify(obj)：可能造成 VSCode 卡顿，尤其当obj含循环引用或几万条数据时
别在 Watch 里调用有副作用的函数
虽然语法上允许写 getData() 这样的调用，但一旦该函数内部修改状态、发请求、写 localStorage，就可能干扰程序原本的执行流，导致后续逻辑异常或断点跳过。
性能影响比想象中更明显：如果 getData() 是个遍历 10 万条记录的同步函数，每次断点暂停都会卡住几秒，甚至让调试器无响应。
- 替代方案：在 Debug Console 中手动执行，并加判断条件，例如
if (userId === 123) getData() - 更稳妥的做法：把关键逻辑抽成无副作用的纯函数，比如
getPreviewData(items)，再放进 Watch - 异步需求不要硬塞进 Watch：改用日志断点（Logpoint），例如输入
User {user.id} loaded: {user.status}，不中断执行也能看值
复杂表达式建议先在 Debug Console 验证再搬进 Watch
Debug Console 比 Watch 更宽松：它允许跨作用域访问（只要在调用栈里）、支持多步临时赋值（如 const tmp = items[0]; tmp.name）、还能粘贴整段逻辑做快速验证。
Watch 的表达式一旦出错（比如拼错变量名或用了未定义的函数），只会显示 NaN 或红色错误信息，很难定位问题根源。
- 推荐流程：先在 Debug Console 输入完整表达式 → 确认能跑通且结果合理 → 复制到 Watch 面板 → 添加成功后观察是否稳定更新
- 特别注意路径别名：如果项目用了
@/utils这类别名，Watch 里不能直接import，但 Debug Console 里也无效——这类需求更适合用Live Code扩展配合侧栏预览 - 嵌套太深时别硬展开：比如
response.data.results[0].user.profile.settings.theme.color，不如拆成两行 Watch 项，分别监控response.data.results和response.data.results[0]?.user
调试控制台和 Watch 的边界其实很清晰：前者是「探针」，后者是「仪表盘」。很多人卡在 Watch 里反复改表达式却看不到值，往往是因为没意识到它根本不执行语句、不跟踪引用变更、也不处理异步——这些都得靠人主动判断和切换工具。
