调试时在Debug Console输入表达式可实时求值，作用域限于当前堆栈帧，支持变量、函数、this；Watch面板持续监控表达式；条件断点配合控制台实现精准交互式探查。
调试暂停时直接在 Debug Console 输入表达式
断点停住后，打开调试控制台（Debug Console），输入任意合法 JavaScript 表达式，立刻看到求值结果。这不是“运行代码”，而是直接在当前执行上下文中求值，变量、函数、this 都是真实的。
- 输入
user.name或items.filter(x => x.status === 'pending')，结果秒出 - 支持调用无副作用方法，比如
JSON.stringify(config)或new Date().toISOString() - 避免写
fetch()、localStorage.setItem()这类会改变状态的调用，否则可能干扰后续调试流程 - 作用域只限于当前堆栈帧——如果想访问上层闭包变量但没出现在 Variables 面板里，说明它没被闭包捕获，此时表达式也会报
ReferenceError
用 Watch 面板持续监控关键表达式
“监视”面板不是一次性的，它会在每次断点暂停或单步执行后自动刷新，适合盯住动态变化的值。
- 点击 Watch 区域的 “+” 号，输入
response?.data?.length或calculateTotal(discount, tax)，不用管它是否在当前作用域显式声明 - 右键编辑器中高亮的变量名（如
order.items），选“添加到监视”，能避免拼错长路径 - 表达式语法错误时显示
NaN或undefined，不是 bug，是提示你该检查作用域或属性是否存在 - 重命名监视项（比如把
data.users[0].profile改成 “首用户头像URL”）能让多人协作或回溯时更直观
配合条件断点做精准逻辑验证
光看值不够？得知道“在什么条件下这个值会异常”。这时候别手动改代码加 if (x > 100) debugger，直接用条件断点 + 控制台联动。
- 在循环内右键断点 → “编辑断点” → 填入
i % 10 === 0，只在每十次迭代时中断 - 中断后，在 Debug Console 输入
console.log(`i=${i}, item=${items[i]}`)快速打印上下文 - 再补一句
items[i].price * items[i].qty > 1000，验证业务规则是否触发 - 注意：日志断点（Logpoint）也能输出表达式，但不中断执行；而条件断点 + 控制台组合，更适合需要交互式探查的场景
常见失效原因：作用域、异步、this 指向
输完表达式返回 undefined 或报错，大概率不是正则写错，而是环境没对上。
-
this在箭头函数里不绑定新上下文，但在普通函数断点中，this是真实的实例对象——如果控制台里this.state报错，先确认断点是否落在 class 方法内 - 异步回调里的变量（比如
setTimeout回调）不在当前堆栈帧，Watch 里输result会提示未定义；得把断点设在回调内部，或改用debugger语句强制暂停 - 模块顶层写的
const config = {...}，在函数断点里可以直接用；但如果是import { api } from './utils'，得确认该模块确实已加载且没被 tree-shaken - React 函数组件里，
useState返回的 state 变量名（如count）在断点处可用，但setCount是个函数，不能直接求值——它没返回值，调用它也不会更新 UI，除非继续执行
真实调试中，最常被忽略的是“表达式求值发生在哪个时刻”。它不等于代码执行完那一刻的状态，而是断点暂停那一帧的快照。比如刚调用 setState 后立刻看 state，值还是旧的——因为 React 更新是异步批处理的。这时候与其猜，不如在下一个 useEffect 里下断点再看。
