Google Chrome開發者工具-全局監視變量

Question

我需要跟蹤更改對象屬性的代碼。 Google Chrome DevTools中的斷點是根據行號設置的； 但是在這種特殊情況下，我不知道在應用程序流程中操縱對象的代碼，因此無法在行上應用監視表達式。

有沒有一種方法可以不管代碼行如何在應用程序范圍內監視變量？

請不要讓我需要在源代碼中找到對象屬性更改的位置，而不是“何時”或“什么”應用更改。

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;