代码之家  ›  专栏  ›  技术社区  ›  Tony_Henrich

如何知道Javascript中的哪些代码更改或访问了对象中的属性?不是DOM对象

  •  0
  • Tony_Henrich  · 技术社区  · 6 年前

    我有Javascript对象(有些是数组),它们在http get请求期间被填充。对象中属性的某些值在执行过程中得到更新。代码不是我的,所以我在跟踪代码中这些值的变化。执行此跟踪可能很耗时,因此我正在寻找是否有一种方法可以在属性值更改时使调试器中断。

    我见过类似的问题,但它们可以追溯到几年前,它们建议使用不同类型的代码片段。我想,使用一款内置devtools功能的现代浏览器,这会变得更容易吗?有?如果不是,那么什么是好的JS代码段?

    1 回复  |  直到 6 年前
        1
  •  0
  •   CertainPerformance    6 年前

    如果你知道 哪一个 属性会被更改或访问,但不会 哪里 ,我会用getter/setter对覆盖这些属性。调用setter时,调用 debugger throw new Error() console.trace() 并检查stacktrace:

    const obj = { foo: 'foo' };
    
    Object.defineProperty(obj, 'foo', {
      get() {
        console.log('getting foo');
        console.trace();
      },
      set(newVal) {
        console.log('setting foo');
        console.trace();
      }
    });
    
    const gottenFoo = obj.foo;
    obj.foo = 'bar';

    如果您可以控制其属性被访问/更改的对象的创建,另一个选项是创建代理,这将允许您拦截 全部的 对象的属性:

    const baseObj = { foo: 'foo' };
    const obj = new Proxy(baseObj, {
      get(_, prop) {
        console.log('getting prop:', prop);
        console.trace();
        return baseObj[prop];
      },
      set(_, prop, newVal) {
        console.log('setting prop:', prop, 'with', newVal);
        console.trace();
        return baseObj[prop] = newVal;
      }
    });
    const gottenFoo = obj.foo;
    obj.foo = 'bar';

    (去看电影) console.trace 结果,请查看浏览器控制台,而不是代码段控制台)