Question

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?

Answer 1

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.