Define code acting on an element in DevTools

Question

I have a webpage with open Dev / F12 tools (in Chrome).

When changing the page size, one of the observed properties of the div style, of course, is modified by some JavaScript code (chrome displays the changed properties in purple):

Is there a way to find out what the JS code is doing, track the source of the JS to change the DOM element?

Answer 1

Yes, you can use Chrome devtools DOM Breakpoints for this:

• Find an item in the Items panel (you did it)
• Right-click an item and select Break> Attribute Modifications (since changing the inline style includes changing the value of the style attribute)

When the modification occurs, the breakpoint will stop JavaScript execution at that point and show the corresponding script on the Sources tab.

If you ever need to see a list of our DOM breakpoints, they are located on the Breakpoints DOM tab in the panel to the right of the Elements panel.