Use console to see where an element was manipulated

Question

I've just started using Timeline.js and I want to change the class of a header from start to whatever. However, the class is set dynamically somewhere in the Timeline library. I've searched through the source code, but it's a bit hard to understand all the connections.

My question is simply: is there a way to see where in the Javascript code an element was created/manipulated/had a class added to it, using the Chrome console?

This is what I've tried so far:

dir($('.start'))

Answer 1

On the Elements panel, right click the element, Break on... > Attribute modifications.

I doubt you can refine the breakpoint to only break on classname changes, but it should be a good starting point.

You can't directly break when the node is created i think, but you can break when the paren't subtree changes (from the same menu). Again, it's not exactly what you need, but it's close enough to get you started.