使用 `Proxy` 对象或 getter/setter 在对象更改时中断/暂停 JavaScript (DevTools)

Question

有没有办法让调试器在某个对象或某个对象的某个属性发生变化时暂停？

watch() 已被弃用。建议（参见here 和here）改为使用setter 和getter 或Proxy objects。

但是，Proxy 对象可以在多大程度上用于此目的？我是否必须在代码中的任何地方用它的代理替换某些对象，即无法按原样立即调试预先存在的代码？

上面提到的使用setter和getter的方法也一样？

breakOn()（请参阅here）似乎只在 HTML 元素的更改上中断，而不是 JavaScript 对象。

Answer 1

我是否必须在代码中的任何地方用其代理替换某些对象，即无法按原样立即调试预先存在的代码？

这可能是最简单的，但不是唯一的选择。

如果你确切地知道哪个对象，即你有一个对它的引用，你可以用 getter/setter 替换它的属性：

const obj = { abc: 123 };

function watchProperty(obj, key) {
    const desc = Object.getOwnPropertyDescriptor(obj, key);
    let value = desc.value;
    Object.defineProperty(obj, key, {
        enumerable: desc.enumerable,
        get() {
            console.log('GET', key);
            if (desc.writable === undefined) {
                if (desc.get) return desc.get.call(obj);
                return undefined;
            } else {
                return value;
            }
        },
        set(val) {
            console.log('SET', key, val);
            if (desc.writable === undefined) {
                if (desc.set) desc.set.call(obj, val);
            } else if (desc.writable) {
                value = val;
            }
        },
    });
}

watchProperty(obj, 'abc');
console.log('obj.abc:', obj.abc);
obj.abc = 456;
console.log('obj.abc:', obj.abc);

基于ECMAScript 2022 specification。

请注意，为了能够使用Object.defineProperty，对象不应该已经将configurable 定义的属性设置为false。幸运的是，只有在最初使用 Object.defineProperty 时才会发生这种情况。

我使用了Object.getOwnPropertyDescriptor 并使该属性的行为特定于obj。如果您的对象具有继承属性，则必须在原型链中对其进行更改，但是对于我的watchProperty 实现，这将导致一些奇怪的交互，因为value 和obj 是obj 特定的。

这也让我想到另一点：如果你想观察一个类的一个（或每个）实例，你可以观察原型上的属性。