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

【问题标题】：Break points on User Defined object properties in JavaScriptJavaScript 中用户定义对象属性的断点
【发布时间】：2012-09-16 15:37:16
【问题描述】：

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

你好

是否有任何 JavaScript 调试工具或插件可以帮助设置断点用户定义的对象属性。

例如：

我有一个 JavaScript 对象文字

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 元素移除、属性修改的断点但不适用于用户定义的对象属性。

谢谢。

【问题讨论】：

标签： javascript json debugging firebug google-chrome-devtools

【解决方案1】：

看看一些浏览器支持的神奇的 getter 和 setter： https://developer.mozilla.org/en-US/docs/JavaScript/Guide/Working_with_Objects#Defining_getters_and_setters

您应该能够定义一个设置器并在其中放置一个断点。

出于兼容性原因，最好将这些代码保留在生产代码之外，但它们是调试某些问题的唯一实用方法。

【讨论】：

【解决方案2】：

使用这样的东西：

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

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

【讨论】：