Front-end performance heatmap bookmarklet

by leonvonblut • 12 years ago

60 9 12 years ago

Achshar• 12 years ago

This only shows images (for me). Chrome dev tools have a much more detailed profiling built in. Though it can be a bit overwhelming at first.

leonvonblut• 12 years ago

this is just a screwdriver, Chrome dev tools is a sonic screwdriver.

Kiro• 12 years ago

But how can I see exactly what elements are loading when in the Chrome dev tools?

chrisbalt• 12 years ago

Kiro, you can view this information and more in the "Network" tab of the Developer Tools in Chrome. Make sure the red "Record Network Log" circle is enabled, refresh the page (suggest you also check the "Disable cache" checkbox) and you should see a stream of everything loading on the page in great detail, including the timing data, which is painted on the page with this tool.

Hope this helps.

smcnally• 12 years ago

Agreed that Chrome dev tools are awesome for devs. A heatmap like this is much more approachable to a significant portion of the dev-related population. It will be useful and time-saving when you're explaining to a product person, e.g., what including that giant image element mid-page will do to UX; when explaining to biz dev what your concerns are re including "just two lines of js" for a partner widget in the right rail; when explaining to rev ops why the new programmatic partner is sucking the wind out of things.

these data are available in dev tools; this can help tell a story without you or me having to write that story every time.

zeman• 12 years ago

You can see more of my performance data visualizations (like PerfMap) in a recent talk I gave at Velocity NY. http://speedcurve.com/blog/velocity-a-better-waterfall-chart...

silverwind• 12 years ago

Why no Firefox support?

givehimagun• 12 years ago

Looks like Firefox 32 does not have the Resource Timing API on by default. They have a note in the readme to check caniuse.com and then caniuse.com mentions you have to turn on the API in 32 in about:config.

_random_• 12 years ago

Seems to be only about HTML-based browser hosted front ends.

Front-end performance heatmap bookmarklet

Related Stories