I was looking at a website and saw something interesting: a DOM element that was animated in an interesting way. I wanted to figure out how it was done so I started digging into the source code. It took me ages to track down the piece of code that did this.
Does anyone know of a way to sort of 'track' a DOM element so you can detect by what code it's being manipulated?
In Chrome, you can add DOM Breakpoints. You can find a more in-depth explanation here.
In short, you select the DOM element you want to inspect in the Elements panel and you select Break On... -> Subtree Modifications. When the DOM element changes its structure, you will be pointed to the JS code that does that.
However, if you're specifically after the JS code that does animations, that could change only the CSS of the element, and as far as I know, there's no way to break on that.
On the other hand, Chrome is also pretty flexible in letting you break on JavaScript events that happen in the browser. As jfrej suggested, you can see what action triggers the animation and break on that.
You can set the breakpoint to Attributes modification from the same element menu (Break On...) and it will also break on CSS changes. Thanks to Bergi for the suggestion in the comments. Tried a simple example here.
DOMSubtreeModified events, it should be able to stop on DOMAttrModified, too
In most cases, JavaScript needs to use a selector of some sort to modify HTML structure or to apply CSS. Think what the selector might be - it's usually either ID or Class.
Firebug can do a search in multiple files - just go to the Script tab, focus in the search field and check Multiple Files. This way you should be able to find the piece of code that's targeting the DOM element.
Alternatively, if the animation is triggered by an event, such as a mouse click, you can use Chrome's Developer Tools to add Event Listener Breakpoints under the Sources tab, which will work in the same way as DOM Breakpoints described by Alex.
