Find javascript that is changing DOM element
JavascriptHtmlDomDom ManipulationJavascript Problem Overview
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.
Javascript Solutions
Solution 1 - Javascript
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 - Javascript
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 :-
https://stackoverflow.com/questions/1397251/event-detect-when-css-property-changed-using-jquery
Solution 3 - Javascript
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.