javascript firebug教學 firebug中文 - 如何在Chrome中“打破財產變化”?




3 Answers

如果您不介意與源代碼混淆,則可以使用訪問者重新定義屬性。

// original object
var obj = {
    someProp: 10
};

// save in another property
obj._someProp = obj.someProp;

// overwrite with accessor
Object.defineProperty(obj, 'someProp', {
    get: function () {
        return obj._someProp;
    },

    set: function (value) {
        debugger; // sets breakpoint
        obj._someProp = value;
    }
});
firefox lite

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

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




有一個這樣的庫: BreakOn()

如果您將其作為代碼片段添加到Chrome開發工具中(源代碼 - >代碼片段 - >右鍵單擊 - >新建 - >粘貼) ,您可以隨時使用它。

要使用它,請打開開發工具並運行代碼片段。 然後在myObject.myProperty更改時中斷,從dev-console調用它:

breakOn(myObject, 'myProperty');

您還可以將庫添加到項目的調試版本中,因此每次刷新頁面時都不需要再次調用breakOn




function debugProperty(obj, propertyName) {
  // save in another property
  obj['_' + propertyName] = obj[propertyName];

  // overwrite with accessor
  Object.defineProperty(obj, propertyName, {
    get: function() {
      return obj['_' + propertyName];
    },

    set: function(value) {
      debugger; // sets breakpoint
      obj['_' + propertyName] = value;
    }
  });
}



Related