What do the colors mean in Chrome Developer Tools Scope panel?

Question

I am curious why some variables are solid and some variables are half opacity. What is the difference between them? Both variations are available in the global scope.

Answer 1

If the property is shown dimmed that means it's not enumerable. So it won't show up in when you loop through the object's properties:

Take the location object as an example:

When enumerating the properties toString, valueOf and __proto__ don't show 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"]

---

You can use propertyIsEnumerable to find out if the property will show up when you loop over the object:

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

By default all properties of an object are enumerable:

But you can change that by using defineProperty:

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

When you log that object to the console the author property appears in a slightly lighter shade of purple.

(It seems the shorthand version doesn't have support for this formatting feature, but we can force DevTools to use the longer version for a small object using the dir function.)