1

I have Javascript objects (some are arrays) that get populated during http get requests. Some of the values of a property in an object get updated during execution. The code is not mine so I am tracking down where in the code these values get changed. It can be time consuming to do do this tracking so I am looking if there's a way for the debugger to break when a property value changes.

I've seen similar questions on SO but they date back a few years and they suggest using different kinds of code snippets. I would like to think this has gotten easier with one of the modern browsers with maybe a built-in devtools functionality? Is there? If not, what is a good JS snippet to do this?

Tony_Henrich
  • 42,411
  • 75
  • 239
  • 374
  • You can refer to [this answer](https://stackoverflow.com/questions/1759987/listening-for-variable-changes-in-javascript/50862441#50862441) in a similar thread. Besides, you can also check [this article](https://lage.us/Javascript-Watch-Variables-for-Change.html) which provides 7 ways to monitor a Javascript variable for change in value. – Yu Zhou Jul 01 '19 at 06:06
  • Those monitoring methods seem to just tell you when the value changed. I am specifically asking to break at the code which is changing the value. – Tony_Henrich Jul 03 '19 at 00:43

1 Answers1

0

If you know which properties get changed or accessed, but not where, I'd overwrite those properties with a getter/setter pair. When the setter is called, call debugger, or throw new Error(), or console.trace() and examine the 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';

If you can control the creation of the object whose properties get accessed/changed, another option is to create a Proxy instead, which will allow you to intercept the gets/sets of all properties of the object:

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';

(To see the console.trace results, look in your browser console, not the snippet console)

CertainPerformance
  • 356,069
  • 52
  • 309
  • 320