What does light purple mean in Chrome's console? [duplicate]

Question

What's the difference between light purple and purple? Thanks.

background:

I was trying to extract all proto functions from Array Type.

const arrayProto = Array.prototype 
const arrayMethods = Object.create(arrayProto) 

arrayMethods returns Array {}

I found all methods are in proto (light purple) while none of them is counted.If I change arrayProto to a normal array like [1,2,3], I can get numbers by arrayMethods[i] since all the numbers are listed in proto. My first thought is that light purple ones are ignored or somehow don't belong to arrayMethods. However I cannot found any documents about this part of console. Why and How to solve it?

Answer 1

In JavaScript, properties may be enumerable or not. Non-enumerable properties are ignored by a for-in loop or Object.keys(). All built-in methods are non-enumerable. (This is why for-in does not list all of the methods on Object.prototype for every object.)

It appears that Chrome uses the dark purple to indicate an enumerable property and light purple to indicate non-enumerable. They do not need to be inherited. Demo (screenshot from Chrome 73.0.3683.103):

Object.defineProperties({}, {
  foo: {enumerable: true, value: 1},
  bar: {enumerable: false, value: 2},
});

If you want to get the properties of an object including even unenumerable ones, you can use Object.getOwnPropertyNames(o). However, you will need to follow the prototype chain yourself if you want to find inherited properties.