属性更改的断点

Question

Firefox的Firebug有一个很好的特性，叫做“属性更改时中断”，在这里我可以标记任何对象的任何属性，它将在更改之前停止JavaScript执行。

我试图在Google Chrome中实现同样的功能，但在Chrome调试器中找不到该功能。我如何在谷歌浏览器中做到这一点？

Answer 1

有一个这样的库：BrekOn（）

如果将其作为代码段添加到Chrome开发工具（源代码--

要使用它，请打开dev工具并运行代码段。然后要在更改myObject.my属性时中断，请从dev控制台调用：

breakOn(myObject, 'myProperty');

您还可以将库添加到项目的调试构建中，这样您就不必在每次刷新页面时再次调用breakn。

Answer 2

编辑2016.03:对象。observe在Chrome 50中已弃用并删除

Chrome 36附带本机对象。请注意此处可以利用的实施：

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;

请注意，当使用对象时。遵守，当作业没有更改任何内容时（例如，如果您编写了myObj），您将不会收到通知。a=1。

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

原始答复（2012.07）：

一个控制台。观看@katspaugh建议的草图

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");

兼容性：

• 在Chrome20中，您可以在运行时将其直接粘贴到开发工具中
• 完整性：在Firebug 1.10（Firefox 14）中，您必须将其注入您的网站（例如，如果无法手动编辑源代码，则通过Fiddler）；遗憾的是，Firebug定义的函数在调试器上似乎没有中断（或者这是配置问题？请纠正我），但在控制台上。日志起作用

>>> var obj = { foo: 42 }
>>> obj.watch('foo', function() { console.log('changed') })
>>> obj.foo = 69
changed
69

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

Answer 3

如果您不介意处理源，您可以使用访问器重新定义属性。

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