监视面板不能解决调试难题，但能揭示变量真实值与预期的落差；watch支持任意表达式实时求值，比variables面板更灵活，但不支持赋值或await，需避免字符串拼接、异步状态和闭包误用。
监视面板本身不能“解决”调试难题，但它能让你看清变量在断点处的真实值——多数逻辑错误，就藏在你“以为它是什么”和“它实际是什么”的落差里。
为什么watch比variables面板更值得盯住
调试时variables面板只显示当前作用域的局部变量和参数，而watch面板允许你主动输入任意表达式，实时求值。比如你在递归函数里想确认stack.size()是否超限，或检查user.profile?.permissions?.includes("admin")是否为true，这些都得靠watch手动加进去。
- 表达式支持链式调用、三元运算、数组索引（如
items[0]?.name） - 不支持赋值语句或
await，输入await fetch("/api")会报错Expression produces a runtime error - 若表达式涉及未初始化变量或空引用，会显示
undefined或null，而不是抛异常中断调试流程
常见watch误用：字符串拼接、异步状态、闭包变量
新手常把watch当控制台用，输"id: " + userId结果发现一直显示"id: undefined"——因为userId还没被赋值，字符串拼接提前执行了。类似地，在React组件中监视props.count + state.delta，可能拿到的是上一次渲染的state快照，而非当前最新值。
- 避免拼接：直接监视
userId和"id: "两个独立项，对比看哪个是undefined - 异步场景下，监视
Promise.resolve().then(...)没意义，应改用console.log打点或在then内设断点 - 闭包中的变量（如
useEffect里捕获的count）在watch里显示的是定义时的值，不是当前渲染的值；需配合Debug Console输入count再回车验证
如何让watch表达式真正“活”起来
默认watch只在断点暂停时刷新一次。要让它持续响应变化，得启用Auto expand（右键表达式 → Toggle Auto Expand），但注意这仅对对象/数组生效，且可能拖慢调试器响应速度。
- 对复杂对象（如
response.data.items），开启Auto expand后可展开看到深层字段，但首次展开可能触发getter副作用（比如computed属性重新计算） - 监视
Array.from(document.querySelectorAll("button"))这类DOM查询表达式，每次刷新都会重新执行，可能导致元素引用失效 - 想监控某变量是否被修改，可用
Object.is(oldValue, newValue)写成布尔表达式，比肉眼盯数字更可靠
真正难的不是加表达式，而是判断该监视什么——往往要先在call stack里定位到出问题的函数，再回头想“哪几个值的组合决定了这个分支走向”，然后把它们全塞进watch。漏掉一个，就可能错过关键线索。
