属性更改时的断点

如果您不介意弄乱源代码，则可以使用访问器重新定义属性。

// 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;
    }
});

编辑 2016.03：Object.observe 已弃用，并在 Chrome 50 中移除

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.observemyObj.a = 1

若要查看调用堆栈，需要在开发人员工具中启用“异步调用堆栈”选项：

原始答案（2012.07）：

@katspaugh建议的草图：console.watch

var console = console || {}; // just in case
console.watch = function(oObj, sProp) {
   var 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中，您可以在运行时将其直接粘贴到Dev Tools中！
• 为了完整性：在Firebug 1.10（Firefox 14）中，您必须将其注入您的网站（例如，如果您无法手动编辑源代码，则通过Fiddler）;可悲的是，从Firebug定义的函数似乎没有中断（或者这是一个配置问题？请纠正我），但可以工作。debuggerconsole.log

>>> var obj = { foo： 42 } >>> obj.watch（'foo'， function（） { console.log（'changed'） }） >>> obj.foo = 69 changed 69 

编辑：在Firefox 57中被删除。Object.watch