Front-end performance heatmap bookmarklet(github.com)
github.com
Front-end performance heatmap bookmarklet
https://github.com/zeman/perfmap
4 comments
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.
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.
these data are available in dev tools; this can help tell a story without you or me having to write that story every time.
But how can I see exactly what elements are loading when in the Chrome dev tools?
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.
Hope this helps.
this is just a screwdriver, Chrome dev tools is a sonic screwdriver.
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...
Why no Firefox support?
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.
Seems to be only about HTML-based browser hosted front ends.