Che cosa significano i colori nel pannello Ambito di Chrome Developer Tools?

Question

Sono curioso di sapere perché alcune variabili sono solide e alcune variabili sono metà opacità. Qual'è la differenza tra loro? Entrambe le varianti sono disponibili nell'ambito globale.

Answer 1

Se la proprietà è mostrato in grigio che significa che non è enumerabile. Così non verrà mostrata quando si esegue un ciclo attraverso le proprietà dell'oggetto:

prendere l'oggetto posizione come esempio:

Quando enumerare le proprietà toString, valueOf e __proto__ non mostrano up:

var keys = []; for (var key in location) { keys.push(key) }; console.log(keys) 
-> ["replace", "assign", "hash", "search", "pathname", "port", "hostname", "host", 
"protocol", "origin", "href", "ancestorOrigins", "reload"] 

---

È possibile utilizzare propertyIsEnumerable per trovare ou t se la proprietà verrà visualizzato quando si esegue un ciclo sopra l'oggetto:

location.propertyIsEnumerable("search") 
// true 
location.propertyIsEnumerable("toString") 
// false 

Per impostazione predefinita tutte le proprietà di un oggetto sono enumerabile:

ma si può cambiare che, utilizzando defineProperty:

Object.defineProperty(post, "author", { 
    value: "John Doe", 
    enumerable: false 
}); 

Quando si registra quell'oggetto nella console, la proprietà dell'autore viene visualizzata in una tonalità leggermente più chiara di viola.

(sembra la versione abbreviata non ha il supporto per questa caratteristica la formattazione, ma siamo in grado di costringere DevTools di utilizzare la versione più lunga per un piccolo oggetto utilizzando la funzione dir.)