javascripthtmlgoogle-chromegoogle-chrome-devtoolschrome-debugging

Detect the code acting on an element in DevTools

I have a web-page with the open Dev/F12 Tools (in Chrome).

When the page is resized, one of the observed div's style properties is modified certainly by some JavaScript code (chrome displays modified properties in purple):
enter image description here

Is there a way to know, what exactly JS code does it, track the JS source of the modification of a DOM element?

Solution

  • Yes, you can use Chrome's devtools DOM Breakpoints to do that:

    1. Locate the element in the Elements pane (you've done that)
    2. Right-click the element and choose Break on > attribute modifications (because changing an inline style involves modifying the style attribute's value)

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

    If you ever need at some point to see a list of our DOM breakpoints, they're in the DOM Breakpoints tab in the panel to the right of the Elements panel.