Chrome Developer Tools Scope 面板中的颜色是什么意思？

Question

我很好奇为什么有的变量是实心的，有的变量是半透明的。它们之间有什么区别？两种变体都在全局范围内可用。

Answer 1

如果属性显示为灰色，则表示它不可枚举。所以当你遍历对象的属性时它不会出现：

以location对象为例：

枚举属性 toString 时，valueOf 和 __proto__ 不显示：

var keys = []; for (var key in location) { keys.push(key) }; console.log(keys)
-> ["replace", "assign", "hash", "search", "pathname", "port", "hostname", "host",  
"protocol", "origin", "href", "ancestorOrigins", "reload"]

您可以使用 propertyIsEnumerable 来确定当您遍历对象时属性是否会出现：

location.propertyIsEnumerable("search")
// true
location.propertyIsEnumerable("toString")
// false

默认情况下，对象的所有属性都是可枚举的：

但您可以使用 defineProperty 更改它：

Object.defineProperty(post, "author", {
     value: "John Doe",
     enumerable: false
});

当您将该对象记录到控制台时，作者属性显示为略浅的紫色阴影。

（似乎 shorthand 版本不支持此格式化功能，但我们可以使用 dir 函数强制 DevTools 使用较长版本的小对象。）

Chrome Developer Tools Scope 面板中的颜色是什么意思？

What do the colors mean in Chrome Developer Tools Scope panel?

google-chrome-devtools