vscode调试时可在debug console中直接输入表达式(如a === b)比较变量,需处于断点暂停状态且变量在当前作用域内;watch面板支持持续自动比对;源码中可用console.log或console.assert临时输出比较结果。

在调试器里直接用 Debug Console 输入表达式比较变量
VSCode 的调试控制台(Debug Console)支持实时执行 JavaScript/TypeScript 表达式,包括变量比较。前提是当前已处于断点暂停状态,且变量在当前作用域中可访问。
常见错误是直接在终端(Terminal)里敲,或者没停在断点——此时变量根本不可见,会报 ReferenceError: xxx is not defined。
- 确保已启动调试(按
F5或点击绿色三角),并在目标行设置了断点且已暂停 - 打开
Debug Console面板(快捷键Ctrl+Shift+Y/Cmd+Shift+Y) - 输入类似
a === b、obj1.name === obj2.name这样的表达式,回车即得结果(true或false) - 注意:若变量是对象或数组,
===比较的是引用,不是内容;想比内容可用JSON.stringify(a) === JSON.stringify(b)(仅限简单结构)
Watch 面板里添加表达式做持续比对
如果要反复观察两个变量是否同步变化,Watch 面板比手动输更高效。它会在每次断点暂停时自动求值并刷新结果。
容易被忽略的一点:Watch 支持任意合法表达式,不只是变量名。
- 在
Watch面板点击「+」号,输入a == b或a.length > b.length - 支持嵌套访问,比如
user.profile?.age >= 18(可选链安全) - 若表达式报错(如
Cannot read property 'x' of undefined),Watch 会显示undefined或错误提示,不影响调试流程 - 多个 Watch 条目可并排查看,适合横向对比多个条件
用 console.log 在源码里写临时比较(不打断点时也有效)
不是所有场景都方便打断点——比如异步回调、事件触发后立刻结束的代码。这时直接在源码里加日志最可靠。
关键在于别只写 console.log(a === b),这样看不出值是什么,出问题还得回头加打印。
- 推荐写法:
console.log('a === b:', a, b, a === b) - 复杂对象可用
console.assert(a.id === b.id, 'id mismatch', { a, b }),失败时才输出 - 注意 Node.js 环境下某些对象(如
Buffer、Promise)在console.log中可能显示不全,需用util.inspect(obj, { depth: null }) - 上线前记得删掉或禁用这些日志,避免污染输出
遇到 Cannot access 'xxx' here 怎么办
这是最常见的作用域问题:变量在当前断点位置不可访问,可能因为被优化、未声明、或在闭包外。
不是所有变量都能在 Debug Console 里直接调,尤其经过编译(如 TypeScript → JS)或启用 sourceMap 不完整时。
- 检查
launch.json中是否启用了"sourceMaps": true,且outFiles路径正确 - 尝试在断点所在函数内定义一个临时变量指向目标,比如
const _a = a; const _b = b;,再在 Console 里用_a === _b - 如果是
let/const声明的块级变量,确保断点停在该块内;var变量提升后通常可跨块访问 - 某些框架(如 React)的 hooks 内部变量(如
useState返回值)在非渲染阶段可能无法直接读取











