chrome devtools的scope面板在断点命中后自动显示local、closure和global作用域变量，其中closure仅包含被内层函数实际引用的外层变量，未引用的会被引擎优化剔除；配合watch可动态验证表达式。
在 Chrome DevTools 的调试器中，“Scope”面板会自动显示当前断点处所有可访问的变量作用域，包括闭包（Closure）、函数局部（Local）和全局（Global）变量。它不是手动“查看”的工具，而是断点命中后**自动展开的上下文快照**——你只需触发断点，面板就会如实呈现。
断点必须命中才能看到 Scope 面板
Scope 面板只在代码暂停执行时（即断点被触发、执行线程挂起）才激活并填充数据。如果没看到该面板：
- 确认已成功打上断点（行号左侧出现蓝色标记），且代码确实运行到了这一行；
- 检查是否误点了“跳过断点”或禁用了断点；
- 确保没有勾选“Deactivate breakpoints”（右上角三个点 → “Deactivate breakpoints”需未启用）。
Scope 面板中各作用域的识别方式
面板按层级从上到下排列，顺序固定：
-
Local：当前函数内部声明的
let、const、var变量，以及函数参数； -
Closure：当前函数能访问的所有外层函数作用域中的变量（即闭包捕获的变量），每个外层函数会单独列为一个 Closure 条目（如
Closure (foo)）； -
Global：顶层作用域（
window或globalThis）上的属性，包括显式挂载的变量、内置对象（Array、JSON等）及通过var声明的全局变量。
注意：let/const 声明的全局变量不会出现在 Global 下，它们属于模块级作用域（Module），DevTools 当前不单独显示 Module 作用域，但会在 Local 中体现（若在模块顶层暂停）。
让闭包变量清晰可见的关键写法
闭包变量能否出现在 Closure 下，取决于它是否被内层函数实际引用：
- ✅ 有效闭包：外层变量被内层函数读取或写入，DevTools 会将其纳入对应 Closure 条目；
- ❌ 不显示的情况：外层有变量但内层函数完全没用到它，V8 引擎可能优化掉该绑定，Scope 面板也不会列出；
- ? 小技巧：若想验证某个变量是否被捕获，可在内层函数中加一句
console.log(outerVar)再打断点，确保引用存在。
配合 Watch 表达式做动态验证
Scope 面板是静态快照，而 Watch 面板支持输入任意表达式实时求值：
- 比如想确认闭包中某个对象的深层属性：
myClosureObj.items.length； - 或者测试变量是否为
undefined：typeof someVar === 'undefined'； - Watch 结果会随断点步进实时更新，比反复展开 Scope 更灵活。
