Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

457
Visualizações
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 Respostas
Responde à pergunta

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 Relatório

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 Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda