Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

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

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.

Screenshot of developer tools

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

Thanks

over 4 years ago · Santiago Trujillo
2 answers
Answer question

0

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.

over 4 years ago · Santiago Trujillo Report

0

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.

over 4 years ago · Santiago Trujillo Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!