Highlight worst INP on page from console

highlight-worstInp-on-page-from-console.js

// Paste code below in console after page load and 
// before interacting with page

const getName = (node) => {
  const name = node.nodeName;
  return node.nodeType === 1
    ? name.toLowerCase()
    : name.toUpperCase().replace(/^#/, '');
};

const getSelector = (node, maxLen) => {
  let sel = '';

  try {
    while (node && node.nodeType !== 9) {
      const el = node;
      const part = el.id
        ? '#' + el.id
        : getName(el) +
          (el.classList &&
          el.classList.value &&
          el.classList.value.trim() &&
          el.classList.value.trim().length
            ? '.' + el.classList.value.trim().replace(/\s+/g, '.')
            : '');
      if (sel.length + part.length > (maxLen || 100) - 1) return sel || part;
      sel = sel ? part + '>' + sel : part;
      if (el.id) break;
      node = el.parentNode;
    }
  } catch (error) {
    // Do nothing...
    console.log(error.message);
  }
  return sel;
};

function showWorstInp(worstInpEntry, lastInpEntry) {
  const __worstInp = document.querySelector("#__worstInp");
  if (__worstInp) { document.body.removeChild(__worstInp) };

  if (!worstInpEntry.target) { return; }

  const {duration, startTime, processingStart, processingEnd} = worstInpEntry;

  const newElem = document.createElement('div');
  newElem.id = "__worstInp";
  
  newElem.innerHTML = `Last INP = ${lastInpEntry.duration} ms<br>Worst INP = ${worstInpEntry.duration} ms`;
  newElem.innerHTML += `<br>|_ Input Delay = ${Math.round(processingStart - startTime)}`;
  newElem.innerHTML += `<br>|_ Proc. Time = ${Math.round(processingEnd - processingStart)}`;
  newElem.innerHTML += `<br>|_ Pres. Delay = ${Math.round(startTime + duration - processingEnd)}`;
  
  newElem.style = `position:fixed; z-index:9999999; top:40px; left:10px; background-color: black; color:white; font-size: 1.5em; padding:.2em .3em; border-radius:3px; `;
  document.body.appendChild(newElem);
};

let worstInp = 0;
let worstInpEntry = null;

const observer = new PerformanceObserver((list, obs, options) => {
  for (let entry of list.getEntries()) {
    if (!entry.interactionId) continue;

    entry.renderTime = entry.startTime + entry.duration;
    worstInp = Math.max(entry.duration, worstInp);
      
    console.log('[Interaction]', entry.duration, `type: ${entry.name} interactionCount: ${performance.interactionCount}, worstInp: ${worstInp}`, entry, options);
    
    if (entry.duration >= worstInp) {
      worstInp = entry.duration;
      worstInpEntry = entry;
    }
    showWorstInp(worstInpEntry, entry);
  }
});

observer.observe({
  type: 'event',
  durationThreshold: 0, // 16 minimum by spec
  buffered: true
});