在 Chrome 开发人员工具控制台中使用 console.dir 时褪色属性的意义是什么

Question

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

例如，请查看此屏幕截图中的 "top,width,worldVisible,x & y"。

我查看了此处的 API 参考资料 https://developer.chrome.com/devtools/docs/console-api#consoledirobject，但没有成功。

谢谢

Answer 1

我无法在文档中找到任何官方解释，但根据一些测试我有一个很好的猜测，灰色属性是 defaults/set 由 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.

放入全局 window 命名空间的内容外，几乎所有内容都变灰了。

Answer 2

淡化属性更适合表示不可枚举的属性。如果我们这样做：

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") 检查这个，它应该 return 一个带有 enumerable: false 属性.

的对象

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

在 Chrome 开发人员工具控制台中使用 console.dir 时褪色属性的意义是什么

What is the significance of faded properties when using console.dir in Chrome Developer Tools Console

javascript

debugging

google-chrome

object

`length` 数组

原型设计

在 Chrome 开发人员工具控制台中使用 console.dir 时褪色属性的意义是什么

What is the significance of faded properties when using console.dir in Chrome Developer Tools Console

javascript

debugging

google-chrome

object

length 数组

原型设计

`length` 数组