Add little red blocks around all elementtiming nodes (to compare e.g. LCP candidates). Note: LCP candidates don't have intersectionRect.

element_timing_hud.js

<script>
    const observer = new PerformanceObserver(list => {
        for (let entry of list.getEntries()) {
            const size = entry.size || entry.intersectionRect.height * entry.intersectionRect.width;
            console.log(entry.entryType, size, entry.element, entry);
            if (entry.intersectionRect) showRect(entry.intersectionRect);
        }
    })
    observer.observe({ type: 'element', buffered: true });
    observer.observe({ type: 'largest-contentful-paint', buffered: true });
    
    // Thanks Philip Walton!
    function showRect(rect) {
        const box = document.createElement('div');
        box.setAttribute('style', Object.entries({
            position: 'absolute',
            outline: '1px solid red',
            left: `${rect.x}px`,
            top: `${rect.y}px`,
            width: `${rect.width}px`,
            height: `${rect.height}px`,
        }).map((e) => `${e[0]}:${e[1]}`).join(';'));
        document.body.appendChild(box);
    }
</script>