JavaScript 調試 - 在調試器中隱藏類方法

Question

如果您嘗試調試定義了許多方法的類的實例，則在 IDE（VSCode 或 WebStorm）中調試 JavaScript 會變得很困難：

如您所見，每個Vector都有大約 15 個方法。 我只想查看實例屬性（ x 、 y等）並在調試時隱藏方法。 每個實例的方法都相同並且不相關。 這使得調試變得困難：這似乎是一個小問題，但如果您需要調試“大”實例的長時間會話，您可能會迷失方向。

有沒有辦法（通過 IDE 或通過其他設置）在 IDE 調試器上過濾實例方法？

如果我能做到這一點，我可以看到x ， y值內聯，這可以節省我的時間，目前，IDE 中的內聯預覽被不相關的函數簽名淹沒。

選擇：

有沒有辦法編輯調試器的內置預覽功能？ 我可以像這樣覆蓋console.log但它不會影響 IDE 預覽：

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

對調試器預覽沒有影響：

調用console.log(...args)時效果很好：

我仍在尋找一種以某種方式破解 IDE 預覽的方法......

編輯：

向量類：

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

Answer 1

這些方法顯示在調試器中的實例上，因為它們是實例本身的屬性。 您的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) { 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)); }
}