Chrome dev tool issue

Chrome dev tool display the variables with the same name the same value that is assigned in the current context, even though some of them are defined in other contexts and has been assigned different values. Take the following code as example.

var a = 0;
function func() {
    var a = 1;
}
func();

When you set a break point at the line inside the function and chrome javascript executor pauses at the break point, chrome will show an undefined on the globally defined varible a if you move the mouse point over it, even though the global varible a has been assigned value 0. The truth is, the value of global varible a is still 0, and the local varible in the func is undefined because it’s hoisted but has not been assigned. It’s probably an issue inside chrome, or chrome dev tools could not show the javascript execution context and scope chain, which lead to such an confusing value display. Some developers may think that how could the assignment to the varible defined in the function affect the varible outside the function? Yes, it doesn’t make sense and it could not be. It’s just an error display. Therefore, do not trust the varible values out of the current context inspected with mouse actions in chrom dev tool. Otherwise you will fool yourself.