直接在断点暂停时查看变量值比 console.log 更快，watches 可动态监视表达式且不污染代码；variables 标签页显示当前作用域变量，需注意加载限制、异步变量不可用、source map 配置；watch 支持任意 js 表达式但慎用副作用、作用域限制和解构语法；常见不更新原因包括作用域错位、const 动态值、未定义变量；可双击编辑变量值（let/var/对象属性/数组元素），但 const 原始值不可改；watch 本质是当前执行帧的 repl 快照，依赖引擎变量生命周期。
直接在断点暂停时看变量值，比手动加 console.log 快得多；但真正省时间的，是用 Watches 监视动态变化的表达式——它不依赖代码修改，也不污染源文件。
断点暂停后，变量在哪看？
触发断点后，Variables 标签页自动展开当前作用域所有变量。注意三点：
- 展开
this或对象层级过深时，WebStorm 默认只加载前 100 个属性，想看全得右键 →Load Children - 异步回调里的变量（比如
setTimeout内）可能显示unavailable，不是 bug，是 V8 引擎优化导致作用域提前释放 - 如果变量名被压缩（如
_a），确认是否启用了 source map，且调试的是未混淆的构建产物
怎么添加一个有效的 Watch 表达式？
Watches 不是只能输变量名，它支持任意可求值的 JS 表达式，但要注意执行上下文和副作用：
- 输入
user.profile.name没问题，但user.save()会真执行——别在 Watch 里调用有副作用的函数 - 不能跨作用域访问局部变量，比如在函数 A 的断点里 Watch 函数 B 的
temp变量，会报ReferenceError - 支持 ES6 解构写法，例如
{ id, email } = user，但需确保左侧变量未声明过，否则语法报错 - 想监视数组长度变化？直接写
items.length，比盯着整个数组列表更轻量
Watch 不更新？常见卡点在这儿
明明加了 Watch，值却一直不动或显示 NaN，大概率是这几个原因：
- 断点没停在你认为的作用域：比如在箭头函数里设断点，但 Watch 写的是外层函数的参数名，实际已脱离该作用域
- 用了
const声明但值被 Proxy 或 getter 动态改变，Watch 显示初始值，需改用user.getDisplayName()这类实时调用 - Watch 表达式里引用了未定义变量（比如拼错成
usre），WebStorm 默认静默失败，不会报错，只会显示undefined或空白 - 项目启用了严格模式且 Watch 里用了未声明变量，会直接抛
ReferenceError，此时 Watch 区会标红
调试时临时改变量值，比重跑快十倍
在 Variables 或 Watches 里双击值，可以直接编辑并回车生效——这个操作对 let、var、对象属性、数组元素都有效，但注意：
- 不能改
const声明的原始值（如const count = 5），但可以改它的属性（const obj = {}; obj.a = 1） - 改完对象属性后，如果后续代码依赖该对象的引用相等性（
===），行为可能和预期不一致 - 修改
event对象的属性（如event.preventDefault = () => {}）会影响原事件流，慎用 - 改完立即单步（F8）或继续（F9），确认逻辑是否按新值走通
Watch 的本质是 REPL 上下文快照，不是魔法。它依赖当前暂停帧的执行环境，也受限于 JS 引擎的变量生命周期——越贴近真实运行时逻辑去构造 Watch 表达式，越不容易掉坑里。
