Why does Chrome dev tools say variable is not defined? [duplicate]

Question

In the code below, when paused at the breakpoint, Chrome Dev Tools will tell me "foo" is or is not defined depending on whether or not the console.log line is commented out or not.

Once at the breakpoint, if you type "foo" in the console, or add it as a watch variable, if the console statement is commented out it will say foo is undefined, however if the console statement is not commented out, then it will correctly show the value of foo (1). Why is this happening?

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

The chrome debugger is nuanced about capturing variables.

Since your inner func3 does NOT reference foo, then inside the debugger, you won't be able to console log it - EVEN though if you wrote real code, it would work.

Try this:

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();

Just by adding foo; to the inner function, now the debugger will make it available to you.