Find javascript that is changing DOM element

Question

Solution 1

Right click on DOM element > Break on > Attributes Modifications

Via #3 in https://elijahmanor.com/blog/7-chrome-tips-developers-designers-may-not-know

Solution 2

The accepted answer doesn't fully answer the question, because it doesn't help with page loads.

I solved this issue but putting a script block immediately following the element in question.

<script type="text/javascript"> debugger; </script>

I was then able to attach the dom motification break points. By right clicking the element and selecting "break on" -> "attribute modifications" in the developer tools as described in other answers.

Solution 3

you can use :-

document.documentElement.addEventListener('DOMAttrModified', function(e){
  if (e.attrName === 'style') {
    console.log('prevValue: ' + e.prevValue, 'newValue: ' + e.newValue);
  }
}, false);

Have a look at this :-

Event detect when css property changed using Jquery