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;

此功能是否已在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; } 
    });
})();

只需在浏览器控制台中运行即可。

JavaScript中用户定义对象属性的断点

2 个答案: