Find javascript that is changing DOM element

javascript html dom dom-manipulation
p e p picture p e p · Jul 25, 2014 · Viewed 35.7k times · Source

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

Nighto picture Nighto · Apr 30, 2015

Right click on DOM element > Break on > Attributes Modifications

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

Related questions

What is innerHTML on input elements?

I'm just trying to do this from the chrome console on Wikipedia. I'm placing my cursor in the search bar and then trying to do document.activeElement.innerHTML += "some text" but it doesn't work. I googled around and looked at …

Read More
How do I clear the contents of a div without innerHTML = "";

I have a div that is filled by JS created DOM elements, I want the div to be cleared upon the JS function repeating, however I have heard that using document.getElementById('elName').innerHTML = ""; is not a good idea, What …

Read More
How can I remove wrapper (parent element) without removing the child?

I would like to remove the parent without removing the child - is this possible? HTML structure: <div class="wrapper"> <img src""> </div> <div class="button">Remove wrapper</div> After …

Read More