如何在Chrome上“打破财产变化”？

Firebug for firefox有一个很好的特性，叫做“Break on property change”，在这里我可以标记任何对象的属性，它会在更改之前停止javascript的执行。

我试图在谷歌浏览器中实现相同的function，并且我无法在Chromedebugging器中find该function。 我如何在谷歌浏览器中做到这一点？

Answer 1

如果你不介意弄乱源头，你可以使用访问者重新定义属性。

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

Answer 2

编辑2016.03： Object.observe在Chrome 50中被弃用和删除

编辑2014.05：在Chrome 36中添加了Object.observe

Chrome 36附带了可以在这里使用的本地Object.observe实现：

 myObj = {a: 1, b: 2}; Object.observe(myObj, function (changes){ console.log("Changes:"); console.log(changes); debugger; }) myObj.a = 42; 

如果只是暂时需要，则应将callback存储在variables中，并在完成后调用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.observe ，当赋值没有改变任何东西时，例如，如果你写了myObj.a = 1 ，你将不会得到通知。

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

---

原文（2012.07）：

一个由@katspaughbuild议的console.watch草图：

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

编辑：

请注意，在Firefox中，由于Firefox的非标准Object.watch ， console.watch已经存在。 因此，在Firefox中，您可以在本地监视更改：

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

但是， 这将很快（2017年底）被删除 。

Answer 3

有一个这样的库： BreakOn（）

如果你把它添加到Chrome开发工具作为一个片段（源代码 – >片段 – >右键单击 – >新build – >粘贴） ，你可以随时使用它。

---

要使用它，请打开开发工具并运行代码片段。 然后当myObject.myProperty被改变时中断，从dev-console调用它：

 breakOn(myObject, 'myProperty'); 

您也可以将库添加到项目的debugging版本中，这样您不必每次刷新页面时再次调用breakOn 。