作用域是代码运行时自然形成的执行上下文，需通过 Chrome DevTools Sources 面板实时观察：设断点或 debugger 暂停后，在 Scope 面板查看 Local、Closure、Global 层级变量，结合 Call Stack 切换上下文，或在 Console 中读写当前作用域变量。
在 JavaScript 开发环境搭建完成后，作用域不是靠“搭建”出来的，而是代码运行时自然形成的执行上下文。真正需要关注的，是**如何在调试过程中实时、准确地观察它**——这完全依赖浏览器 DevTools 的 Sources 面板，而非环境配置本身。
打开 Sources 面板并触发暂停
按 F12（Windows/Linux）或 Cmd+Opt+I（macOS）打开 Chrome DevTools，切换到 Sources 标签页。确保你的 JS 文件已加载（通常在左侧“Page”下可见）。然后通过以下任一方式让代码暂停：
- 在目标行号左侧点击，设置一个普通断点
- 在代码中插入
debugger;语句，刷新页面后自动暂停 - 调用一个已设断点的函数，执行流到达时即停
右侧 Scope 面板就是作用域的实时快照
代码暂停后，Sources 面板右侧会显示 Scope 区域，它按层级清晰列出当前可访问的所有作用域：
-
Local：当前函数内声明的变量（
let/const/function参数等），值实时更新，未执行到的赋值显示为 not initialized -
Closure：外层函数形成的闭包变量（例如内部函数访问了外部函数的
var或let变量） -
Global：全局对象上的属性（如
window.xxx或globalThis.xxx），包括用var在顶层声明的变量
每个变量旁会标注其来源（比如 “from closure 'a'” 或 “from global”），鼠标悬停还能看到原始声明位置。
立即学习“Java免费学习笔记（深入）”；
结合 Call Stack 切换不同作用域
当函数嵌套调用（如 a() → b() → c()）并在某一层暂停时，Call Stack 面板会列出完整调用链。点击栈中的任意一层（比如 a），Scope 面板会立刻切换为该函数对应的作用域，所有变量值随之刷新。这样就能横向对比不同层级的同名变量（如 x 在 a 和 c 中是否指向同一个值）。
控制台里直接读写当前作用域变量
按 Esc 呼出底部 Console，此时输入变量名（如 myVar）回车，返回的是**当前暂停点所在作用域**下的值。你甚至可以临时修改它：count = 999，再继续执行，验证逻辑是否按预期变化。注意：只能读写当前作用域及上级闭包中的变量，不能访问更深层嵌套函数的局部变量（除非它们被闭包捕获）。
