Detect what script made change to DOM

Viewed 546

I have some html form elements on a page and some script is changing them when the page loads. Something is removing their IDs. I don't know how or why but I need to get to the bottom of it. It's as simple as this:

<p>
    <input id="depSymbol" class="form-control" type="text" placeholder="Symbol" />
    <button id="symCheck" class="wpsm-button white small">check</button></p>
<p>
    <input id="depTimeframe" class="form-control" type="text" placeholder="Timeframe (5, 15, 1H, 1D)" />
</p>

This is on a wordpress site. I think one of the plugins I installed might be causing this but it could be something else. There are too many possible causes. For that reason, I need to know: Is there something in dev tools I can use to see what scripts are affecting changes to the DOM?

1 Answers

With Chrome Dev tools opened, right click on the element and choose Break on attribute modifications. Then refresh the page. It should break into the script that's responsible for modifying the ID.

enter image description here

Related