Stop debugger in web browser when object value changed

Question

I have an <input type="hidden">. I need to see when it's value changes. I have many JavaScript files changing it's value.

I can just go everywhere where values are changed and add the debugger statement, but it will take lot of time. I have learned about Object.watch() but it only executes a specific function after the value got changed, though I want to see where it changed in code, not when.

Is there any way to achieve that, maybe by outputting the line number and JavaScript filename or stopping debugger in the web browser?

Answer 1

DOM change breakpoints got your back.

1. Go to Elements panel of DevTools.
2. Find the element in the HTML pane.
3. Right-click on the element.
4. Select Break On > Attribute Modifications.

If you need to view changes to the value of the element too, then right-click on the parent of the element, and select Subtree Modifications.