Google Chrome开发者工具-全局观察变量

Question

我需要跟踪更改对象属性的代码。断点在谷歌Chrome DevTools设置在行号;但是在这个特殊的场景中，我不知道在应用程序流中操作对象的代码，因此不能在行上应用watch表达式。

是否有一种方法，我可以在应用程序范围内观看变量，而不管代码行?

请不要，我需要在源代码中找到对象属性更改的位置，而不是"何时"或"什么"更改应用

Answer 1

Object.prototype.watch()提供了一种方法，可以在对象的属性发生变化时执行回调函数。

来自MDN文档:

var o = { p: 1 };
o.watch('p', function (id, oldval, newval) {
  console.log('o.' + id + ' changed from ' + oldval + ' to ' + newval);
  return newval;
});
o.p = 2;
o.p = 3;
delete o.p;
o.p = 4;
o.unwatch('p');
o.p = 5;

输出:

o.p changed from 1 to 2
o.p changed from 2 to 3
o.p changed from undefined to 4

此外，ECMAScript 7将提供更高级的Object.observe()函数:参见https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object/observe

Answer 2

您可以定义属性访问器函数并在其中设置断点。详细信息请参见defineSetter。

var o = {};
Object.defineProperty(o, 'value', {
  set: function(val) {
    this._value = val;
    console.log(val);
  }
});
o.value = 5;