Measure Cumulative Layout Shift in the console

/**
 * Measure Cumulative Layout Shift (CLS)
 *
 * Monitors layout shifts in real time using the PerformanceObserver API
 * and reports the cumulative CLS score. Logs each individual shift with
 * its value and the elements involved, then shows a running total.
 * Useful for debugging layout instability during development.
 *
 * Usage: Run in browser console on the page you want to measure.
 *        Scroll the page and interact with it to trigger shifts.
 *
 * @category performance
 * @language javascript

 *
 * @author Adame Dahmani https://adame.io
 * @support Support my family project: https://adame.io/fundraiser
 */
(function () {
    var totalCLS = 0;
    var shifts = [];

    new PerformanceObserver(function (list) {
        list.getEntries().forEach(function (entry) {
            if (!entry.hadRecentInput) {
                totalCLS += entry.value;
                shifts.push({
                    value: entry.value.toFixed(4),
                    sources: entry.sources
                        ? entry.sources.map(function (s) {
                              return s.node
                                  ? s.node.nodeName + (s.node.className ? '.' + s.node.className.split(' ')[0] : '')
                                  : 'unknown';
                          })
                        : [],
                });
                console.log(
                    'Layout shift: ' + entry.value.toFixed(4) +
                    ' | Total CLS: ' + totalCLS.toFixed(4)
                );
            }
        });
    }).observe({ type: 'layout-shift', buffered: true });

    window.getCLS = function () {
        console.table(shifts);
        console.log('Total CLS: ' + totalCLS.toFixed(4));
        return totalCLS;
    };

    console.log('CLS observer active. Call getCLS() to see results.');
})();