When debugging JS in VS Code, why are some object properties faded in color?

When I add this particular preexisting variable from our codebase (typescript) on watch in VSCode, I can see some attributes in faded color and some in normal color. The variable is of type any. I don't know its structure yet.

What do the faded ones mean?

One more thing I observed that, if I print the variable using JSON.stringify, only the normal colored attributes get printed. I have tried recursive JSON.stringify, but it prints the same. The faded colored attributes can be queried in code and they return the correct values though, for e.g. error.options.

How do I print the entire structure?

The dimmed properties are those which are not enumerable and not getters.

From a quick experiment with the following:

const foo = Object.create(null, {
const b = {a:1,b:2,c:3};
const c = Object.create(b, {
  a: {configurable:true, enumerable:true, writable:true, value:1},
  b: {configurable:true, enumerable:true, writable:false,value:1},
  c: {configurable:true, enumerable:false,writable:true, value:1},
  d: {configurable:true, enumerable:false,writable:false,value:1},
  e: {configurable:false,enumerable:true, writable:true, value:1},
  f: {configurable:false,enumerable:true, writable:false,value:1},
  g: {configurable:false,enumerable:false,writable:true, value:1},
  h: {configurable:false,enumerable:false,writable:false,value:1},
  i: {configurable:true, enumerable:true, get(){return 1;}},
  j: {configurable:true, enumerable:false,get(){return 1;}},
  k: {configurable:false,enumerable:true, get(){return 1;}},
  l: {configurable:false,enumerable:false,get(){return 1;}},
});

c, d, g, and h are dimmed.

Sure enough, looking a the source code, that's what it's checking for. https://github.com/microsoft/vscode-js-debug/blob/a8859b0435a9e8cbfe5a123359827674fa5d9de3/src/adapter/variableStore.ts#L481. Seems like an intuitive thing to do to me.

What I find interesting is that it doesn't dim private properties, but this might be a behaviour of VS Code core instead of vscode-js-debug, since that extension is hinting those as private.

As for why your JSON.stringify isn't getting them and what you can do, see Why does JSON.stringify not serialize non-enumerable properties?.

If you want to print enumerable properties in other ways, some debugger consoles display them if you use things like console.log or related functions. The debug console provided by vscode-js-debug does in the Debug Console Panel.