VSCode调试控制台需暂停在断点才能执行表达式，否则因作用域为空报错；监视面板可持久化求值表达式，支持可选链与空值合并，但不支持赋值或声明，调用方法需警惕副作用。
调试控制台直接输入表达式，必须暂停在断点上
VSCode 的调试控制台不是 REPL，它依赖当前调试上下文。没停在断点时输入 user.name 或 items.filter(x => x > 10) 会报 ReferenceError: user is not defined —— 因为此时作用域为空。
实操建议：
- 先在代码中设断点（比如函数入口、循环体内），运行调试（F5）直到暂停
- 打开“调试控制台”（
Ctrl+Shift+Y或菜单View → Debug Console） - 此时输入任意合法表达式，只要变量在当前栈帧中可访问，就能立即求值
- 支持链式调用、数组方法、三元判断，例如：
response?.data?.users?.[0]?.email || 'N/A'
监视面板添加表达式，避免重复敲写
每次暂停都手动输一遍 calculateTotal(cart.items) 很累，也容易拼错。监视面板（Watch）是专为此设计的持久化表达式跟踪工具。
实操建议：
- 在“调试”视图中打开“监视”面板（通常在左侧或底部标签页）
- 点击
+号，输入表达式，如：cart.items.length、new Date().toISOString()、Math.round(avgScore * 100) / 100 - 注意：表达式会在每次断点命中时自动重新求值，且结果实时刷新
- 不支持赋值语句（如
x = 5）或let/const声明，只接受纯求值表达式
调用方法要小心副作用，尤其涉及异步或状态变更
你可以在控制台里写 api.fetchUser(123) 并回车，它真会发请求——但很可能破坏你正在调试的流程，比如重复提交、触发二次渲染、污染缓存。
实操建议：
- 优先使用无副作用操作：读取属性、调用
.map()/.filter()、格式化字符串等 - 若必须调用有副作用的方法，先确认它是否被
jest.mock拦截，或在开发环境加了if (process.env.NODE_ENV !== 'production')保护 - 对异步函数（如
await loadConfig()），控制台默认不支持await；需改写为loadConfig().then(console.log)或用 IIFE：(async () => console.log(await loadConfig()))() - 修改对象属性（如
user.active = false）虽能执行，但可能绕过 Vue/React 的响应式系统，导致 UI 不更新
深层嵌套与空值安全，别硬写 a.b.c.d
直接输入 response.data.users[0].profile.avatar.url 极易因某层为 null 或 undefined 报错并中断后续调试。这不是语法错误，而是运行时崩溃。
实操建议：
- 用可选链（
?.）和空值合并（??）：response?.data?.users?.[0]?.profile?.avatar?.url ?? 'default.png' - 在监视面板中也适用，且 VSCode 会高亮显示
??后的默认值，便于快速识别 fallback 路径 - 对数组索引不确定时，用
at()替代[0]：items.at(-1)?.id更安全 - 复杂逻辑建议拆成多条监视项，比如分别监控
response?.data、response?.data?.users?.length，比单条长表达式更易定位哪一层出问题
调试控制台的表达式能力很强，但它的“强”建立在上下文真实、作用域清晰、副作用可控的基础上。最容易被忽略的，是误把调试控制台当成了脱离执行环境的沙盒——它每一行都在真实运行你的代码，只是不修改源文件而已。
