Menu
I've been working with a ton of other's JS recently, and am starting to really hate trying to debug it. Even with Chrome's dev tools I can't track down a lot of the DOM changes that are taking place during page load.
Are there any tools that will show me what part of the DOM (say an added attribute) was done by what JS?
Thanks
936
We insert a new p element after 1 second 5 times. We pass in a callback into the MutationObserver constructor that runs when the DOM changes. Then we call observe on the element that we want to observe changes for. subtree set to true means that we watch for child element changes.
The HTML DOM allows JavaScript to change the content of HTML elements.
The easiest way to access a single element in the DOM is by its unique ID. You can get an element by ID with the getElementById() method of the document object. In the Console, get the element and assign it to the demoId variable. Logging demoId to the console will return our entire HTML element.
In Chrome dev tools, you have the option of breaking execution when the DOM changes. 
Also a screenshot to illustrate Wolfram's answer (+1)
50
A minor addition to Jayraj's answer: Breakpoints on DOM Mutation Events. Right click on any element and you can select Break on Subtree Modifications and Break on Attributes Modifications and Break on Node Removal.
This is also possible using Firebug: right click an element and you have some options to monitor it for changes.
23
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
