[javascript] 如何在Chrome中“打破財產變化”?


Answers

修改2016.03: Object.observe已被棄用,並在Chrome 50中刪除

編輯2014.05:在Chrome 36中添加了Object.observe

Chrome 36附帶了可在此處使用的本機Object.observe實現:

myObj = {a: 1, b: 2};
Object.observe(myObj, function (changes){
    console.log("Changes:");
    console.log(changes);
    debugger;
})
myObj.a = 42;

如果您只是暫時需要它,則應將回調存儲在變量中,並在完成後調用Object.unobserve

myObj = {a: 1, b: 2};
func = function() {debugger;}
Object.observe(myObj, func);
myObj.a = 42;
Object.unobserve(myObj, func);
myObj.a = 84;

請注意,在使用Object.observe ,當賦值沒有改變任何內容時(例如,如果您寫了myObj.a = 1 ,您將不會收到通知。

要查看調用堆棧,您需要在Dev Tools中啟用“異步調用堆棧”選項:

原文答案(2012.07):

@katspaugh建議的console.watch素描:

console = console || {}; // just in case
console.watch = function(oObj, sProp) {
   sPrivateProp = "$_"+sProp+"_$"; // to minimize the name clash risk
   oObj[sPrivateProp] = oObj[sProp];

   // overwrite with accessor
   Object.defineProperty(oObj, sProp, {
       get: function () {
           return oObj[sPrivateProp];
       },

       set: function (value) {
           //console.log("setting " + sProp + " to " + value); 
           debugger; // sets breakpoint
           oObj[sPrivateProp] = value;
       }
   });
}

調用:

console.watch(obj, "someProp");

兼容性:

  • 在Chrome 20中,您可以在運行時直接將其粘貼到開發工具中!
  • 為了完整性:在Firebug 1.10(Firefox 14)中,您必須將其註入您的網站(例如,如果無法手動編輯源代碼,請通過Fiddler注入); 不幸的是,從Firebug定義的函數在debugger似乎沒有中斷(或者它是配置的問題?請糾正我),但console.log起作用。

編輯:

請注意,在Firefox中,由於Firefox的非標準Object.watchconsole.watch已存在。 因此,在Firefox中,您可以在本地監視更改:

>>> var obj = { foo: 42 }
>>> obj.watch('foo', function() { console.log('changed') })
>>> obj.foo = 69
changed
69

但是, 這將很快(2017年底)被刪除

Question

Firebug for firefox有一個很好的功能,叫做“Break on property change”,可以標記任何對象的任何屬性,並且它會在更改之前停止javascript執行。

我試圖在google chrome中實現同樣的功能,並且我在chrome調試器中找不到該函數。 我如何在谷歌瀏覽器中執行此操作?




這也可以通過使用新的Proxy對象來完成,其目的正是這樣:截取對由代理包裝的對象的讀取和寫入。 您只需將想要觀察的對象包裝到代理中,並使用新的包裝對象而不是原來的對象。

例:

const originalObject = {property: 'XXX', propertyToWatch: 'YYY'};
const watchedProp = 'propertyToWatch';
const handler = {
  set(target, key, value) {
    if (key === watchedProp) {
      debugger;
    }
    target[key] = value;
  }
};
const wrappedObject = new Proxy(originalObject, handler);

現在使用wrappedObject來代替originalObject,並在break處檢查調用堆棧。




Related