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

Question

如果您尝试调试定义了许多方法的 class 实例，

JavaScript 在 IDE（VSCode 或 WebStorm）中调试可能会变得困难：

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

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

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

选择：

有没有办法编辑调试器的built-in预览功能？我可以覆盖 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 预览的方法...

编辑：

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

Answer 1

这些方法显示在调试器中的实例上，因为它们是实例本身的 属性。您的 class 声明使用 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)); }
}

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

JavaScript debugging - hiding class methods in debugger

javascript

debugging

visual-studio-code

webstorm

选择：