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

【问题标题】：Google Chrome Developer Tools - Globally Watching a VariableGoogle Chrome 开发者工具 - 全局观察变量
【发布时间】：2015-11-18 00:50:31
【问题描述】：

我需要跟踪更改对象属性的代码。 Google Chrome DevTools 中的断点是根据行号设置的；但在这种特殊情况下，我不知道在应用程序流中操作对象的代码，因此无法跨行应用监视表达式。

有没有一种方法可以让我在应用程序范围内观察变量而不考虑代码行数？

请注意，我需要在源代码中找到在哪里对象属性发生更改的位置，而不是“何时”或“什么”应用了更改。

【问题讨论】：

Is there a way to "watch" a variable in google chrome?的可能重复
您是否也在寻找堆栈跟踪？
不，只是需要一种方法来找到不情愿地修改对象的代码。如果我可以在不在应用程序中注入调试代码的情况下找到它，那就更好了。我希望谷歌浏览器有这个功能，因为它似乎是一个基本的调试功能。

标签： javascript google-chrome google-chrome-devtools javascript-objects javascript-debugger

【解决方案1】：

Object.prototype.watch() 提供了一种在对象属性更改时执行回调函数的方法。

来自MDN documentation：

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

【讨论】：

【解决方案2】：

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

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

【讨论】：