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

Question

What does it mean when an object's property is slightly faded when using console.dir() in chrome's console.

For example, take a look at "top,width,worldVisible,x & y" in this screenshot.

I've looked at the API reference here https://developer.chrome.com/devtools/docs/console-api#consoledirobject, but had no luck.

Thanks

Answer 1

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.

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.