vscode debugger with typescript: what determines how an object is rendered?

I'm using vscode to write some typescript, and I have set a breakpoint. When I open the Debug pane and ask it to evaluate an object, what is it doing to produce the string representation?

The reason I am asking is because I am using this solution to control the way that console.log renders an instance of a class, and it works great -- but it doesn't seem to impact the way the object is rendered in the debugger.

To be more specific, the below code (also available in the typescript sandbox here) results in the desired output from console.log. However, when I set a breakpoint just before the console.log line and evaluate myObj in the debugger, what's displayed is

cls {property: 'property', hello: 'override', newProperty: 'new property'}

rather than

Greeter3Generated {property: 'property', hello: 'override', newProperty: 'new property'}

Code in question:

function classDecorator3<T extends { new (...args: any[]): {} }>(
  constructor: T
) {
  const cls = class extends constructor {
    newProperty = "new property";
    hello = "override";
  };
  Object.defineProperty(cls, 'name', {
    get: () => `${constructor.name}Generated`
  });
  return cls
}

@classDecorator3
class Greeter3 {
  property = "property";
  hello: string;
  constructor(m: string) {
    this.hello = m;
  }
}

const myObj = new Greeter3("world")
console.log(myObj);
//=>  Greeter3Generated: { "property": "property", "hello": "override", "newProperty": "new property" } 

from vscode debugger with typescript: what determines how an object is rendered?