调试JavaScript代码时浏览器Dev Tool中的作用域问题

这是JavaScript引擎的作用域优化结合浏览器DevTools调试策略共同导致的结果，核心逻辑如下：

1. 词法作用域的按需保留 #

JavaScript采用词法作用域，函数的作用域链在定义时就已确定，但引擎会做性能优化：如果函数没有引用外层某作用域的任何变量，这个外层作用域会被从函数的作用域链中移除——因为它对函数的执行没有任何影响，保留它只会浪费内存。

比如你的示例1中，函数abc完全没用到块级作用域里的const a，引擎就会判定这个块级作用域对abc的执行无意义，直接跳过它，让abc的作用域链直接连接自身局部作用域和全局作用域。

2. DevTools只显示实际生效的作用域 #

浏览器DevTools在调试时，只会展示当前执行上下文实际用到的作用域层级，不会显示那些被引擎优化掉、对当前函数执行没有贡献的作用域。

• 示例1调试abc内部时，作用域链是local(abc) → global，所以DevTools只显示这两个；
• 示例2中abc引用了a，引擎必须保留块级作用域在作用域链里（否则函数找不到a），此时作用域链是local(abc) → block(包含a) → global，DevTools就会把这个块级作用域展示出来。

代码示例对比 #

示例1（未引用块级变量） #

{
  const a = 2;
  function abc() {
    console.log();
  }
  abc();
}

调试abc内部时，作用域链无块级作用域，DevTools仅显示local和global。

示例2（引用块级变量） #

{
  const a = 2;
  function abc() {
    console.log(a);
  }
  abc();
}

调试abc内部时，作用域链包含块级作用域，DevTools会显示该层级。

内容的提问来源于stack exchange，提问作者Berkay Çırak