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

Question

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

有没有一种方法可以在应用程序范围内监视变量，而不管代码行数如何？

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

Answer 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