CODEWITHSUNDEEP
javascriptdebuggingvisual-studio-codewebstorm
Eliav Louski
Eliav Louski

Reputation: 5214

JavaScript debugging - hiding class methods in debugger

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

enter image description here

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:
enter image description here

Works great when invoking console.log(...args):
enter image description here

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));

Upvotes: 1

Views: 732

Answers (1)

Bergi
Bergi

Reputation: 664217

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)); }
}

Upvotes: 1

Related Questions