Front-end performance heatmap bookmarklet

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

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

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.

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.