时间戳

首页 > 解决方案 > 如何知道 Javascript 中的哪些代码更改或访问了对象中的属性？不是 DOM 对象

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

问题描述

我有在 http get 请求期间填充的 Javascript 对象（有些是数组）。对象中的某些属性值在执行期间会更新。该代码不是我的，所以我正在追踪代码中这些值的更改位置。执行此跟踪可能很耗时，因此我正在寻找调试器是否有办法在属性值更改时中断。

我在 SO 上看到过类似的问题，但它们可以追溯到几年前，他们建议使用不同类型的代码片段。我想认为使用可能具有内置 devtools 功能的现代浏览器之一，这变得更容易了？在那儿？如果不是，那么有什么好的 JS 片段可以做到这一点？

标签： javascriptdebugginginternet-explorerfirefoxgoogle-chrome-devtools

解决方案

如果您知道哪些属性被更改或访问，但不知道where，我会用 getter/setter 对覆盖这些属性。当 setter 被调用时，调用debugger, or throw new Error(), orconsole.trace()并检查堆栈跟踪：

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结果，请查看您的浏览器控制台，而不是代码片段控制台）

推荐阅读