【问题标题】：What is the significance of faded properties when using console.dir in Chrome Developer Tools Console在 Chrome 开发者工具控制台中使用 console.dir 时褪色属性有什么意义
【发布时间】：2015-07-01 13:03:27
【问题描述】：

在chrome的控制台中使用console.dir()时，对象的属性稍微变淡是什么意思。

例如，看看这个屏幕截图中的“top,width,worldVisible,x & y”。

我在这里查看了 API 参考 https://developer.chrome.com/devtools/docs/console-api#consoledirobject，但没有运气。

谢谢

【问题讨论】：

这些褪色的属性是否在您展开对象后立即具有值，或者您是否需要单击(...)？
@apsillers，在我的示例中，我需要单击它们。不过，与您答案中的可枚举属性绝对相关。谢谢
我问是因为斜体属性名称表示 getter 函数，但斜体 getter 也会导致 (...) 行为。如果您有一个没有(...) 的斜体属性，那将是不寻常的。不过，你确实有它，所以这是完全正常的。（我在回答中添加了一些内容。）

标签： javascript google-chrome debugging object

【解决方案1】：

褪色的属性表示不可枚举的属性。如果我们这样做：

var a = {};
Object.defineProperties(a, {
    hello: { enumerable: false },
    world: { enumerable: true }
});
console.dir(a);

然后我们看到hello 褪色了，而world 没有。

在您的代码中，如果您执行for(prop in obj) { console.log(prop); }（其中obj 是您在控制台屏幕截图中向我们展示的任何对象），您将看到只有褪色的属性没有被枚举。

您也可以使用Object.getOwnPropertyDescriptor(obj, "worldVisible") 进行检查，它应该返回一个具有enumerable: false 属性的对象。

请注意，属性名称上的斜体表示属性值是由 getter 函数定义的。（这也会导致该值在函数运行之前显示(...) 值。）这是与可枚举性完全不同的问题，它会导致名称褪色。您可以拥有斜体 getter 定义的属性，这些属性不是褪色的不可枚举属性，反之亦然。

【讨论】：

运行了一些测试，包括原始对象，它看起来是正确的答案。也意味着它毕竟值得知道，所以我很高兴我问了。

【解决方案2】：

我无法在文档中找到任何官方解释，但我有一个很好的猜测，基于一些测试，灰色属性是 Javascript 引擎而不是代码本身默认/设置的属性。以下是一些示例：

`length` 在一个数组中

var foo = [1,2,3,45,1337];
console.dir(foo);

在控制台中给出：

请注意，索引没有变灰，但 length 和 __proto__ 中的所有内容都是。

原型设计

来自https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/prototype#Examples的代码

var Person = function() {
  this.canTalk = true;
};

Person.prototype.greet = function() {
  if (this.canTalk) {
    console.log('Hi, I am ' + this.name);
  }
};

var Employee = function(name, title) {
  Person.call(this);
  this.name = name;
  this.title = title;
};

Employee.prototype = Object.create(Person.prototype);
Employee.prototype.constructor = Employee;

Employee.prototype.greet = function() {
  if (this.canTalk) {
    console.log('Hi, I am ' + this.name + ', the ' + this.title);
  }
};

var bob = new Employee('Bob', 'Builder');
bob.greet();
console.dir(bob);

在控制台中给出：

这里有很多有趣的东西。 greet 的所有实例都不会灰显。然而，__proto__ 到处都是灰色的（可能是因为它是由引擎设置为其原型的）。同样来自Person 的重写构造函数显示为灰色，但Employee 的显式设置构造函数未显示为灰色。

所以我认为这里有一个粗略的模式，即 Chrom(e/ium) 将它认为你不太可能关心的属性变灰，因为它们是由引擎继承或设置的作为一种语言的构造，但它似乎并不完美。（但是谁，对吧？）另一个有趣的尝试是F12 并输入console.dir(window)。在那里你会看到几乎所有东西都变灰了，除了网站的 Javascript 放入全局窗口命名空间的东西。

【讨论】：

length 在一个数组中

原型设计

`length` 在一个数组中