Chrome dev tool issue

最新推荐文章于 2024-09-13 22:03:15 发布

原创最新推荐文章于 2024-09-13 22:03:15 发布 · 443 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#chrome

chrome 专栏收录该内容

0 篇文章

订阅专栏

本文探讨了Chrome开发者工具在显示局部与全局同名变量时存在的显示问题。当局部作用域内的变量与全局变量同名但未赋值时，Chrome可能会误显示全局变量为undefined。文章通过示例代码解释了这一现象，并提醒开发者不要轻易相信Chrome开发者工具中非当前作用域的变量值。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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.