JavaScript debugging - hiding class methods in debugger

Question

JavaScript debugging in the IDE (VSCode or WebStorm) can become difficult if you try to debug instances of a class that defines many methods:

As you can see each Vector has about 15 methods. I am interested to see only the instance attributes (x, y, and so on) and to hide the methods while debugging. The methods are the same for each instance and are not relevant. This makes debugging difficult: this may seem like a small issue but if you need to debug a long session of 'big' instances you can get lost.

Is there a way (via the IDE, or via another setting), to filter instances methods on the IDE debugger?

If I could do this I could see x, y values inline and that could save me tone of time, currently, the inline preview in the IDE is overwhelmed with the irrelevant functions signatures.

Alternative:

Is there a way to edit the built-in preview function of the debugger? I could overwrite console.log like this but it won't effect the IDE preview:

const tempConsoleLog = console.log;
console.log = (...argss) => {
  function clear(o) {
    var obj = JSON.parse(JSON.stringify(o));
    // [!] clone

    if (obj && typeof obj === 'object') {
      obj.__proto__ = null;
      // clear

      for (var j in obj) {
        obj[j] = clear(obj[j]); // recursive
      }
    }
    return obj;
  }
  for (var i = 0, args = Array.prototype.slice.call(argss, 0); i < args.length; i++) {
    args[i] = clear(args[i]);
  }
  tempConsoleLog.apply(console, args);
};

No effect on debugger preview:

Works great when invoking console.log(...args):

I still looking for a way to hack the IDE preview somehow...

Edit:

Vector class:

export class Vector {
  x: number;
  y: number;
  faceDirs: Dir[]; // all allowed dirs
  _chosenFaceDir: Dir; // chosen dir
  dir: Dir;

  constructor(x: number | Vector, y?: number) {
    if (x instanceof Vector) {
      this.x = x.x;
      this.y = x.y;
      if (typeof y === 'number') throw Error('illegal');
    } else {
      this.x = x;
      this.y = y as number;
    }
    this.faceDirs = null;
    this._chosenFaceDir = null;

    if (!(this instanceof Dir)) this.dir = new Dir(this.x, this.y);
  }

  // eq = (p: Vector) => p.x === this.x && p.y === this.y;
  eq = (p: Vector) => eq(p.x, this.x) && eq(p.y, this.y);
  notEq = (p: Vector) => !eq(p.x, this.x) || !eq(p.y, this.y);

  add = (p: Vector | number) => operatorFunc(this, p, operators.add);
  sub = (p: Vector | number) => operatorFunc(this, p, operators.sub);
  mul = (p: Vector | number) => operatorFunc(this, p, operators.mul);
  dev = (p: Vector | number) => operatorFunc(this, p, operators.dev);

  absSize = () => Math.sqrt(this.x ** 2 + this.y ** 2);
  size = () => this.x + this.y;
  abs = () => new Vector(Math.abs(this.x), Math.abs(this.y));

WebStorm: youtrack.jetbrains.com/issue/WEB-24515, youtrack.jetbrains.com/issue/WEB-27621 and linked tickets I guess. P.S. I do not see why console.log() should affect the debugger at all: console.log does not report anything to the actual JS debugger; the debugger queries the actual "execution environment" about what variables it has etc. — LazyOne
– LazyOne, Commented Jul 6, 2021 at 10:28
"The methods are the same for each instance and are not relevant." - then your class should define them in the prototype, and not assign separate functions to each instance. What your debugger is telling is that they are instance attributes, exactly like x and y (except for holding function objects not numbers). They're probably even created before them in the constructor, as the debugger keeps the creation order. Please show us your class Vector declaration. — Bergi
– Bergi, Commented Jul 8, 2021 at 21:43
@Bergi i added the Vector class, how should I define the methods in the proto? — Eliav Louski
– Eliav Louski, Commented Jul 10, 2021 at 16:45
@EliavLouski Use proper method definitions, not arrow functions in class fields. — Bergi
– Bergi, Commented Jul 10, 2021 at 16:49
thank you @Bergi well it solves my problem for me for this case. you can write it as answer and I will accept it — Eliav Louski
– Eliav Louski, Commented Jul 10, 2021 at 17:19

Bergi · Accepted Answer · 2021-07-10 22:10:39Z

The methods show up on the instance in the debugger because they are properties on the instance itself. Your class declaration uses class fields, which create instance properties as if they were property assignments in the constructor. Don't do that, it's inefficient and unnecessary in your case, and has weird effects such as the one you're experiencing.

Instead, use normal method definition syntax:

export class Vector {
  x: number;
  y: number;
  faceDirs: Dir[]; // all allowed dirs
  _chosenFaceDir: Dir; // chosen dir
  dir: Dir;

  constructor(x: number | Vector, y?: number) {
    if (x instanceof Vector) {
      this.x = x.x;
      this.y = x.y;
      if (typeof y === 'number') throw Error('illegal');
    } else {
      this.x = x;
      this.y = y as number;
    }
    this.faceDirs = null;
    this._chosenFaceDir = null;

    if (!(this instanceof Dir)) this.dir = new Dir(this.x, this.y);
  }

  eq(p: Vector) { return eq(p.x, this.x) && eq(p.y, this.y); } }
  notEq(p: Vector) { return !eq(p.x, this.x) || !eq(p.y, this.y); }

  add(p: Vector | number) { return operatorFunc(this, p, operators.add); }
  sub(p: Vector | number) { return operatorFunc(this, p, operators.sub); }
  mul(p: Vector | number) { return operatorFunc(this, p, operators.mul); }
  dev(p: Vector | number) { return operatorFunc(this, p, operators.dev); }

  absSize() { return Math.sqrt(this.x ** 2 + this.y ** 2); }
  size() { return this.x + this.y; }
  abs() { return new Vector(Math.abs(this.x), Math.abs(this.y)); }
}

Collectives™ on Stack Overflow

JavaScript debugging - hiding class methods in debugger

Alternative:

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

Alternative:

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related