有什么方法可以检测控制台（Devtools）中的变化？

Question

我正在寻找我的问题的答案。我找不到任何东西。 例如：

this.connect = false;

if (this.connect) {
  alert('CONNECTED');
}

如果我在我的 devtools -> 控制台中更改 this.connect = true。它应该提醒消息“已连接”。

有没有办法做到这一点？让它发挥作用真是太棒了！

Answer 1

编辑：不需要代理。只需使用defineProperty 为窗口的connected 属性定义get/set 方法即可。

嘿，看看这个 sn-p - 猜猜这是一个很好的开始方式。

// We are using a property _connected to store the value of the connected property
let _connected = false;

// We are defining a property with the name 'connected' on the this (this = globalThis = window => console dev tool)
Object.defineProperty(this, 'connected', {
  get: () => _connected,
  set: (value) => {
    _connected = value;
    console.log(`Setting 'connected' to: ${value}`);
  }
});

// Try using this.connected = $val inside your console.
this.connected = true;
this.connected = false;
this.connected = "foo";

---

使用像 @Jaromanda X 建议的代理也是可能的，但我想这不是最好的解决方案，因为覆盖 window/this/globalThis - 范围似乎是不可能的：

const _this = new Proxy(window, {
  set: (target, key, value) => {
      if (key === "connected")
        console.log(`Setting 'connected' to set to ${value}`);
      target[key] = value;
      return true;
  }
});

_this.connected = true;
_this.connected = false;
_this.connected = "foo";