如何使用Proxy或getter/setter在JS对象变更时触发DevTools调试暂停

常见实现方案及疑问解答 #

1. 无需修改业务代码的即时调试方案 #

针对已有项目临时调试的场景，直接在浏览器控制台执行代码修改目标对象的属性描述符即可，调试完成后刷新页面即可恢复原有逻辑，完全不侵入业务代码：

// 替换为你要监听的对象和属性名
const targetObj = 你的目标对象;
const watchProp = '要监听的属性名';

// 缓存原有属性值
let originalVal = targetObj[watchProp];
Object.defineProperty(targetObj, watchProp, {
  get() {
    // 如需监听属性读取操作可在此处加 debugger
    return originalVal;
  },
  set(newVal) {
    // 属性被赋值时自动触发断点
    debugger;
    originalVal = newVal;
    return true;
  }
})

如果需要监听对象所有属性的变更，可以批量操作：

const targetObj = 你的目标对象;
Object.keys(targetObj).forEach(prop => {
  let val = targetObj[prop];
  Object.defineProperty(targetObj, prop, {
    get() { return val },
    set(newVal) {
      console.log(`属性${prop}变更：旧值${val}，新值${newVal}`);
      debugger;
      val = newVal;
      return true;
    }
  })
})

2. Proxy方案实现逻辑 #

Proxy方案可以同时监听对象新增属性、删除属性等全量操作，适合需要长期埋点调试的场景，实现代码如下：

function createWatchProxy(target, watchProps = []) {
  return new Proxy(target, {
    set(target, prop, newVal) {
      // 未指定监听属性则监听所有属性变更，指定则仅监听目标属性
      if (watchProps.length === 0 || watchProps.includes(prop)) {
        debugger;
      }
      target[prop] = newVal;
      return true;
    },
    deleteProperty(target, prop) {
      // 监听属性删除操作
      debugger;
      delete target[prop];
      return true;
    }
  })
}

关于是否需要全量替换原对象的疑问：

• 若为临时调试场景，只要目标对象是可访问的（比如挂载在全局作用域），直接在控制台执行window.原对象名 = createWatchProxy(window.原对象名)即可替换引用，无需修改业务代码，刷新后自动还原
• 若为生产环境埋点场景，则需要统一替换所有引用位置的原对象

3. setter/getter方案的适配性 #

setter/getter方案不存在需要全量替换原对象的问题，直接通过Object.defineProperty修改已有对象的属性描述符即可，无论是临时调试还是长期埋点都可以灵活适配，侵入性远低于Proxy方案。

4. breakOn方法的适用范围 #

你提到的breakOn方法确实仅支持监听HTML元素的属性变更、子节点变更、节点移除三类事件，无法作用于普通JavaScript对象，不能满足该需求。

内容的提问来源于stack exchange，提问作者root