[Feature Request] - Break on property change | subtree modifications

[jasonwilliams]

There are scenarios where an object is updated but I'm unsure what updated it or when it happened. It would be nice to have something similar to Firefox's Break on subtree modification however I appreciate this feature is heavily DOM related and it would be nice to apply this to any object rather than just DOM nodes.

In the below example I'm testing a React component, and SubmitMock.mock changes, but I'm not sure what causes the update, it would be useful if I had an option here to break on subtree modifications (to the mock object). I don't know if Watch is the best place for it (as you can put arbitrary expressions in there), maybe the Variables view would make more sense.

Prior Art

Firefox Dev Tools

Chrome Dev Tools

https://developers.google.com/web/tools/chrome-devtools/javascript/breakpoints

Current workarounds

One way to get around this would be to add a setter on the object and call debugger inside. http://johnkpaul.com/blog/2013/07/20/break-on-property-change/

[kurdtpage]

Data breakpoints have been added for C and C#, would be nice to have this for javascript as well

[connor4312]

I like this idea and would find it quite handy myself. Implementing our own mechanism here (e.g. redefining properties or adding proxies) is not something I want to do since it is invasive and could cause confusing issues in the program. I want something on CDP, but it looks like there is nothing for that. https://bugs.chromium.org/p/chromium/issues/detail?id=1126093

[jasonwilliams]

Thanks for raising upstream!