JavaScript中用戶定義對象屬性的斷點

Question

javascript中用戶定義對象屬性的斷點

你好

是否有任何JavaScript調試工具或插件有助於在用戶定義的對象屬性上放置斷點。

例如：

我有一個JavaScript Object Literal

var TextBox = { color:"gray", size:"100px", border:true }

這是我的代碼進行修改

function foo(){ TextBox["color"] = "blue"; }

我正在尋找在TextBox.color上設置一個斷點，以便在修改屬性時我可以找到誰正在進行修改或哪個函數進行了更改。

當TextBox.color = null; or delete TextBox.color;時它也應該中斷TextBox.color = null; or delete TextBox.color; TextBox.color = null; or delete TextBox.color;

此功能是否已在firebug或chrome開發人員工具中提供？

我已經看到了html元素刪除，屬性修改的斷點，但沒有用於用戶定義的對象屬性 。

謝謝。

Answer 1

看看一些瀏覽器支持的魔術getter和setter： https ： //developer.mozilla.org/en-US/docs/JavaScript/Guide/Working_with_Objects#Defining_getters_and_setters

您應該能夠定義一個setter並在其中放置一個斷點。

出於兼容性原因，可能最好將這些代碼保留在生產代碼之外，但它們是調試某些問題的唯一實用方法。

Answer 2

使用這樣的東西：

(function() {
    var obj=TextBox; var realValue = obj.color; 
    Object.defineProperty(obj, 'color', { 
        set: function(newValue) { debugger; realValue = newValue; },
        get: function() { debugger; return realValue; } 
    });
})();

並只需在瀏覽器控制台中運行它。