Find javascript that is changing DOM element

Question

Are there any techniques I can use to find what javascript is altering an HTML element? I am having some trouble finding how a particular element is getting an inline style of display:none added on load. I know I will find the script that does this eventually, but I want that process to be easier.

My ideal solution would be some way of breaking javascript execution as soon as a DOM element is modified. I am aware of Chrome's dev tools ability to right click an element and select Break On > Attribute Modifications. However, this is happening sometime during page load, so it'd be really nice if I could insert some script before all other script declarations that says 'watch for an element with class XYZ' and break JS execution on element modification. Then, JS execution would either break where I can see the JS that modified the element, or perhaps that could be found by looking at the call stack, but either way, I would be able to see the script that triggered the break to happen. I have found some answers that tell me how to do that using Chrome dev tools / Firebug, but like I said, this question is about the programmatic approach.

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

Comments

[Nighto]

@VitalyZdanevich can you provide a codepen example?

[Tyguy7]

Ok, so you can't set this kind of breakpoint and reload the page.... only seems to work with sources breakpoints.

[Steven Kalt]

Yep, looks like DOMAttrModified is deprecated in all major browsers according to MDN

[p e p]

I would have appreciated this back when I posted the question! I was able to do what I needed way back when but this is what I was missing.