search

html5rocks / www.html5rocks.com

....a top-notch resource for web developers
https://html5rocks.com
Other
2.22k stars 769 forks source link

UX Profiler chrome extension #1391

Open kostat opened 9 years ago

kostat commented 9 years ago

I'm a creator of UX Profiler Chrome Developer Tools extension. It helps analyzing performance from user perspective by tracking and grouping browser activity (events, network, etc) caused by user action (e.g. click, keypress). Shows all the statistics and lets record profiles. I think this tool can be useful for the community and would like to write an article about it.

kostat commented 9 years ago

Added "Combined asynchronous stack trace popup", similar to that MS highlighted for their VS 2013 release. It's also integrated with angular 1.x $evalAsync. You can see it in action with angular tutorial demo. Here is a screenshot: uxprof3

addyosmani commented 9 years ago

Neat. We haven't traditionally covered extensions in depth here, so I'll leave it up to the team to decide. I'm curious - is there a particular class of applications your UX profiler works well with? I'm also curious how well this works outside of specific frameworks (e.g you demonstrate using it with Angular - does it work equally as well with Polymer or React?)

kostat commented 9 years ago

@addyosmani, well, this extension has a generic core, but this core has to be fed with data. To supply the data it has internal "plugins" specific to the technology. At the moment I have plugins for browser core api, AMD family, jQuery family, angular 1.x. From experience, if used with other frameworks, the extension shows information, but not "good enough". For example, if you are familiar with angular, without integration with its $evalAsync, the "combined call stack" didn't have the knowledge how to trace through $digest loop and was "cut" too early. Though "User Transaction" was correct thanks to "browser core api" plugin. So working with React and Polymer has to be tested, at least. And I indeed plan to certify Ripple, Polymer and React by the end of July. This will produce 1.0 release ;). Regarding application classes - no, there is no limitations. Though UX Profiler shines best when there is significant client side logic, especially complex asynchronous flows, involving XHRs, timeouts etc. So SPA "class" will benefit more then a server-rendered page.

paulirish commented 9 years ago

Another screenshot if anyone is curious: image

i like the high level summary. quite nice.

kostat commented 9 years ago

@paulirish, I would be very grateful, if you could write few words about your experience. Did you miss something? Was something not clear, fluent?

kostat commented 9 years ago

The extension is successfully tested and certified to be used with React, Polymer and Ripple.