如何在铬中“打破财产变化”？-Howto“breakonpropertychange”inchrome?

72  

If you don't mind messing around with the source, you could redefine the property with an accessor.

如果您不介意搞乱来源，可以使用访问者重新定义属性。

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

96  

Edit 2016.03: Object.observe is deprecated and removed in Chrome 50

编辑2016.03：在Chrome 50中弃用并删除了Object.observe

Edit 2014.05: Object.observe was added in Chrome 36

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

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

myObj = {a: 1, b: 2};
func = function() {debugger;}
Object.observe(myObj, func);
myObj.a = 42;
Object.unobserve(myObj, func);
myObj.a = 84;

Original answer (2012.07):

原始答案（2012.07）：

A console.watch sketch as suggested by @katspaugh:

@katspaugh建议的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;
       }
   });
}

Invocation:

调用：

console.watch(obj, "someProp");

Compatibility:

兼容性：

• In Chrome 20, you can paste it directly in Dev Tools at runtime!
• 在Chrome 20中，您可以在运行时将其直接粘贴到Dev Tools中！
• For completeness: in Firebug 1.10 (Firefox 14), you have to inject it in your website (e.g. via Fiddler if you can't edit the source manually); sadly, functions defined from Firebug don't seem to break on debugger (or is it a matter of configuration? please correct me then), but console.log works.
• 为了完整性：在Firebug 1.10（Firefox 14）中，您必须将其注入您的网站（例如，如果您无法手动编辑源，请通过Fiddler）;遗憾的是，从Firebug定义的函数似乎没有在调试器上中断（或者它是配置问题？请纠正我），但console.log工作。

Edit:

编辑：

Note that in Firefox, console.watch already exists, due to Firefox's non-standard Object.watch. Hence in Firefox, you can watch for changes natively:

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

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

However, this will be soon (late 2017) removed.

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

55  

There is a library for this: BreakOn()

有一个库：BreakOn（）

If you add it to Chrome dev tools as a snippet (sources --> snippets --> right-click --> new --> paste this), you can use it anytime.

如果您将其作为代码段添加到Chrome开发工具（来源 - >代码段 - >右键单击 - >新建 - >粘贴此内容），您可以随时使用它。

To use it, open the dev-tools and run the snippet. Then to break when myObject.myProperty is changed, call this from the dev-console:

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

breakOn(myObject, 'myProperty');

You could also add the library to your project's debug-build so you don't need to call breakOn again every time you refresh the page.

您还可以将库添加到项目的debug-build中，这样每次刷新页面时都不需要再次调用breakOn。

1  

This can also be done by using the new Proxy object whose purpose is exactly that: intercepting the reads and writes to the object that is wrapped by the Proxy. You simply wrap the object you would like to observe into a Proxy and use the new wrapped object instead of your original one.

这也可以通过使用新的Proxy对象来完成，该对象的目的恰恰是：拦截对Proxy包装的对象的读写。您只需将要观察的对象包装到代理中，然后使用新的包装对象而不是原始对象。

Example:

例：

const originalObject = {property: 'XXX', propertyToWatch: 'YYY'};
const watchedProp = 'propertyToWatch';
const handler = {
  set(target, key, value) {
    if (key === watchedProp) {
      debugger;
    }
    target[key] = value;
  }
};
const wrappedObject = new Proxy(originalObject, handler);

Now use wrappedObject where you would supply originalObject instead and examine the call stack on break.

现在使用wrappedObject来代替您提供originalObject并在break上检查调用堆栈。

0  

function debugProperty(obj, propertyName) {
  // save in another property
  obj['_' + propertyName] = obj[propertyName];

  // overwrite with accessor
  Object.defineProperty(obj, propertyName, {
    get: function() {
      return obj['_' + propertyName];
    },

    set: function(value) {
      debugger; // sets breakpoint
      obj['_' + propertyName] = value;
    }
  });
}

0  

Chrome has this feature built-in in latest versions https://developers.google.com/web/updates/2015/05/view-and-change-your-dom-breakpoints.

Chrome在最新版本https://developers.google.com/web/updates/2015/05/view-and-change-your-dom-breakpoints中内置了此功能。

So no more needs for custom libraries and solutions, just right click on DOM element in the inspector and choose 'Break on' -> 'attribute modifications' and that's it.

因此，不再需要自定义库和解决方案，只需右键单击检查器中的DOM元素并选择“Break on” - >“属性修改”即可。