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.

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.

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