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.
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 !
Though that comes with challenges of its own.
...or was the firefox quantum move a failure?
I'm not sure what you mean by a "true" WebExtension; Firefox and Chrome addons are two types of webextension. They have a lot of compatibilities and generally share the same APIs on shared features, but each also has its own extra, unique features that will likely never be supported by the other.
> was the firefox quantum move a failure?
If you're choosing to define "failure" as not changing Firefox entirely to be a carbon copy of Chrome, then yes. Otherwise, no.
Maybe its time for me to study Firefox devtools and to find if there are something interesting to do :p
This means that many things should be identical between them: including but not limited to the packaging format, manifest format, security model, and the basic APIs for simple common browser features like tabs, page loads, network connections, etc. which gives you a very high compatibility surface area.
Naturally, APIs for any innovative features either browser have will be unique to that browser. e.g. Firefox has unique APIs for it's Container system, and it's Sidebar. I guess Chrome has some unique features too.
I've built several extensions now that worked seamlessly in both Firefox and Chrome. Firefox exposes a `chrome` object that very nearly matches the Chrome extension API and a `browser` object that goes beyond it (e.g. Promise-based async handling instead of callbacks, some additional functionality).
The only incompatibility between the two that I've specifically come across is that Firefox doesn't allow background pages to be specified as persistent. Otherwise if you're doing fairly standard stuff with content scripts, background scripts, browser actions and page actions everything should Just Work.