Chrome DevTools中解构赋值致变量标记为块级作用域的疑问

问题现象 #

Chrome DevTools的Scope面板会按局部、全局、模块、块级等类型标记当前作用域内的变量。但在Chrome 108.0.5359.124版本中出现了不符合预期的情况：

• 箭头函数使用解构赋值作为参数时，函数内部声明的变量_c被错误标记为块级作用域；
• 箭头函数使用普通参数时，函数内部声明的变量_d则被正确标记为局部作用域。
  两者仅参数形式不同，且常规代码块（{}包裹）内的const/let变量作用域标记是完全正常的。

复现代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DevTools Scope Test</title>
</head>
<body>
<script>
    // 解构参数的箭头函数：_c被标记为Block
    const testDestruct = ({ a }) => {
        const _c = 3;
        debugger;
    };
    testDestruct({ a: 1 });

    // 普通参数的箭头函数：_d被标记为Local
    const testNormal = (b) => {
        const _d = 4;
        debugger;
    };
    testNormal(2);

    // 验证常规块的标记正常：_e被正确标记为Block
    {
        const _e = 5;
        debugger;
    }
</script>
</body>
</html>

问题本质 #

这是Chrome DevTools 108.0.5359.124版本的显示bug，并非JavaScript语法逻辑问题。
根据ECMAScript规范，箭头函数体内部声明的变量，无论参数是否采用解构赋值，都属于函数的局部作用域。DevTools在处理带解构参数的箭头函数时，错误地将函数体识别为普通块级作用域，才导致了变量类型标记错误。

后续更新到Chrome 109及以上版本后，该问题已被修复，两种场景下的变量都会被正确标记为Local作用域。

内容的提问来源于stack exchange，提问作者Niels Bom