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

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


Faded properties apper to indicate non-enumerable properties. If we do:

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

then we see that hello is faded, while world is not.

console image showing faded <code>hello</code> property

In your code, if you do for(prop in obj) { console.log(prop); } (where obj is whatever object you're showing us in your console screenshot), you'll see that only the faded properties are not enumerated.

You can also check this with Object.getOwnPropertyDescriptor(obj, "worldVisible"), which should return an object with an enumerable: false property.

Note that the italics on the property names indicate that the property value is defined by a getter function. (This also causes the value to display a (...) value before the function is run.) This is a totally separate issue from enumerability, which causes the names to be faded. You can have italic getter-defined properties that are not faded non-enumerable properties, and vice versa.


I haven't been able to find in the documentation any official explanation, but I have a good guess based on some tests that grayed out attributes are those that are defaults/set by the Javascript engine and not by the code itself. Here are some examples:

length in an Array

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

Gives in the console:

console screenshot with length grayed out

Notice that the indices are not grayed out but length and everything in __proto__ is.

prototyping

The code from 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);

Gives in the console:

enter image description here

There are a lot of interesting things here. All instances of greet are not grayed out. However everywhere __proto__ is grayed out (probably because it is set by the engine to its prototype). Also the overridden constructor from Person is grayed out, but the explicitly set constructor of Employee is not grayed out.

So I think there is a rough pattern here, which is that Chrom(e/ium) grays out properties that it thinks you're going to be less likely to care about, either because they were inherited or set by the engine as a construct of the language, but it seems its not perfect. (But who is, right?) Another interesting thing to try is to F12 and type console.dir(window). There you'll see almost everything grayed out except for things put into the global window namespace by the website's Javascript.