为什么 Chrome 开发工具说未定义变量？

Question

在下面的代码中，当在断点处暂停时，Chrome Dev Tools 会根据 console.log 行是否被注释掉来告诉我“foo”是否被定义。

一旦在断点处，如果在控制台中键入“foo”，或者将其添加为监视变量，如果控制台语句被注释掉，它将说 foo 未定义，但是如果控制台语句没有被注释掉，那么它将正确显示 foo (1) 的值。为什么会这样？

function func1(){

    let foo = 1; 

    var func2 = function (){
        function func3 (){
            let foo2 = 4;
            // put breakpoint here
            let foo3 = 5;
            // console.log(foo);  //says foo is undefined when this line commented
        }
        func3();
    }
    func2();
}

func1();

Answer 1

Chrome 调试器在捕获变量方面非常细致。

由于您的内部func3不引用 foo，因此在调试器内，您将无法控制台记录它 - 即使您编写了真正的代码，它也会起作用。

尝试这个：

function func1(){

    let foo = 1; 

    var func2 = function (){
        function func3 (){
            let foo2 = 4;
            foo; // Note that I'm just referencing the variable, not doing anything with it
            // put breakpoint here
            let foo3 = 5;
            // console.log(foo);  //says foo is undefined when this line commented
        }
        func3();
    }
    func2();
}

func1();

只需添加foo;到内部函数，现在调试器就可以将其提供给您。