How to change string representation of objects in Nodejs debug console view

Question

How do I change the string representation of an object instance in nodejs debug console. Is there a method (like toString() in .NET) I can override?

Consider the following code:

class SomeObject{
    constructor(){
        this._varA = "some text";
        this._varB = 12345;
        this._varC = "some more text";
        this._varD = true;
        this._varE = 0.45;
    }

    toString(){
        return "custom textual rapresentation of my object";
    }
}

var array = [];

array.push(new SomeObject());
array.push(new SomeObject());
array.push(new SomeObject());

console.log(array);

This produces the following:

However in other environments and programming languages I have worked on, overriding the toString() method would show the result of toString() (in the example above "custom textual representation of my object") instead of the dynamic textual representation created by the debugger (in the example code above this is: SomeObject {_varA: "some text", _varB: 12345, _varC: "some more text", …}) - which I don't doubt for one minute it is very useful when a custom alternative is not defined.

I also realise that console.log(array.toString()); or even console.log(array.map(t=>t.toString())); will produce something similar to what I am after, however this then prevents me to navigate through the objects using the debug navigation ie. drill into the object graph.

If this is not possible, would others benefit from this? If there is enough interest, I can look into defining and implementing it as a feature.

Answer 1

When you do console.log it internally calls formatValue in util.js, which has a below check

const maybeCustomInspect = value[customInspectSymbol] || value.inspect;

Which means if your value has a inspect method it gets called and then you can return the toString in the same. So change your code to

class SomeObject{
    constructor(){
        this._varA = "some text";
        this._varB = 12345;
        this._varC = "some more text";
        this._varD = true;
        this._varE = 0.45;
    }

    inspect(depth, opts) {
        return this.toString();
    }

    toString(){
        return "custom textual rapresentation of my object";
    }
}

var array = [];

array.push(new SomeObject());
array.push(new SomeObject());
array.push(new SomeObject());

console.log(array);

Makes it print

[ custom textual rapresentation of my object,
  custom textual rapresentation of my object,
  custom textual rapresentation of my object ]

Nodejs has documentation on the same too

https://nodejs.org/dist/latest-v8.x/docs/api/util.html#util_custom_inspection_functions_on_objects

The inspect method I used is deprecated as per documentation and the correct way to do it is below

const util = require('util');

class SomeObject{
    constructor(){
        this._varA = "some text";
        this._varB = 12345;
        this._varC = "some more text";
        this._varD = true;
        this._varE = 0.45;
    }

    [util.inspect.custom](depth, options) {
        return this.toString();
    }

    toString(){
        return "custom textual rapresentation of my object";
    }
}

var array = [];

array.push(new SomeObject());
array.push(new SomeObject());
array.push(new SomeObject());

console.log(array);

Edit: 28th-Mar-2018

So I launched the script using below

$ node --inspect-brk=54223 test.js 
Debugger listening on ws://127.0.0.1:54223/81094440-716b-42a5-895e-4ea2008e0dff
For help see https://nodejs.org/en/docs/inspector

And then ran a socat forwarder using below

$ socat -v TCP-LISTEN:54222,fork TCP:127.0.0.1:54223

When you debug the variable array in debugger, you get below output on the socat terminal

The information is that reconstructed by debugger to give you a meaningful representation.

Now the v8 debug api has no idea that we want to represent it differently, like we did for console.log. Now there may be something similar in V8 code that does something similar, but looking at the source code, I was not able to figure out there exists such a thing. So you may need to confirm from someone who has V8 debugger api knowledge, if something of this sort exists

If not the you need to construct something at the IDE level, which again is not a a easy thing to do

Answer 2

There has been a new option added to VS Code to enable tweaking the debugger output: simply add the below to your launch configuration

"customDescriptionGenerator": "function (def) { if (this.toString) { const _v = this.toString(); if (_v.indexOf(\"[object Object]\") < 0) return _v; } return def; }",

Viola: your entities viewed with "toString" in watch, retaining the ability to drill down etc.