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.

Answer 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

Answer 2

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