[timdorr]

This is already built into the Chrome Dev Tools on the Performance tab. You have to start it manually, but you get much more detail and low level feedback: https://developers.google.com/web/tools/chrome-devtools/eval...

[paulirish]

Not entirely right, though I do love the Perf tab. (Disclosure: I work on it.)

This extension adds instrumentation to listen to changes to DOM nodes and style attributes. And it reports exactly what the change was: https://github.com/pilagod/js-tracker/blob/master/src/tracke...

That level of detail isn't really provided in the Perf tab, as it's quite invasive and can have significant perf overhead in a busy webapp. (DevTools does have a hidden experiment called "Timeline: Invalidation Tracking" which does report on various DOM/CSS changes, though. It's cool).

Also, I should point out a _very_ similar extension my mate built: https://github.com/kdzwinel/DOMListenerExtension Same basic idea, but just reporting every change to DOM nodes that a MutationObserver can see.

[pilagod]

Really nice explanation in detail, I do really learn a lot from your reply.

And I'm so glad to hear that your mate has done a great job relevant to this topic, I have search for a long time but didn't get any relative work. I will look over his repo and learn more from there.

Thanks again for your in-depth reply !

[DaveSchmindel]

I too was wondering why this particular extension made it to the front page...

[pilagod]

This extension leverage the prototype chain of HTML DOM API, so it is coupled with the front end environment.