JavaScript 调试 - 在调试器中隐藏类方法

Question

如果您尝试调试定义了许多方法的类的实例，则在 IDE（VSCode 或 WebStorm）中调试 JavaScript 可能会变得很困难：

如您所见，每个 Vector 大约有 15 种方法。我有兴趣只查看实例属性（x、y 等）并在调试时隐藏方法。每个实例的方法都相同，并且不相关。这使得调试变得困难：这似乎是一个小问题，但如果您需要调试长时间的“大”实例会话，您可能会迷路。

有没有办法（通过 IDE，或通过其他设置）在 IDE 调试器上过滤实例方法？

如果我能做到这一点，我可以看到 x、y 值内联，这可以节省我的时间，目前，IDE 中的内联预览被不相关的函数签名所淹没。

替代方案：

有没有办法编辑调试器的内置预览功能？ 我可以覆盖 console.log like this 但不会影响 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 声明使用类字段，它们创建实例属性，就好像它们是构造函数中的属性分配一样。 Don't do that，在您的情况下效率低下且不必要，并且会产生奇怪的影响，例如您正在经历的那种。

改为使用普通的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)); }
}