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.
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.
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.