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?
In Chrome dev tools, you have the option of breaking execution when the DOM changes.
Also a screenshot to illustrate Wolfram's answer (+1)
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.
©2020 All rights reserved.