Compilation of Console Debugging Code

The code checks the height of {body} when it changes.

(() => {
  const H = () => Math.max(
    document.documentElement.scrollHeight,
    document.documentElement.clientHeight,
    document.body?.scrollHeight || 0,
    document.body?.clientHeight || 0
  );

  let last = H(), raf = null;

  const check = () => {
    raf = null;
    const h = H();
    if (h !== last) {
      console.log('[HEIGHT] =',h,'|',h - last);
      last = h;
    }
  };

  const s = () => raf || (raf = requestAnimationFrame(check));

  new ResizeObserver(s).observe(document.documentElement);
  document.body && new ResizeObserver(s).observe(document.body);
  new MutationObserver(s).observe(document.documentElement, { childList: true, subtree: true });

  addEventListener('load', s, { passive: true });
  addEventListener('resize', s, { passive: true });

  console.log('✅ Height watcher ON');
})();

""Stress Test" Interface (Layout Durability Test)

This code will replace all the text on your website with an extremely long piece of text (Lorum Ipsum). It's very useful for checking if your Cards, Buttons, or Grid are breaking when the article title is too long.

document.querySelectorAll('p, h1, h2, h3, h4, h5, h6, span, a').forEach(el => {
  el.innerText = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. ".repeat(3);
});

"X-Ray" mode (Surveying nested structures)

[].forEach.call(document.querySelectorAll('*'), function(el) {
  el.style.outline = '1px solid #' + (Math.random() * 0xFFFFFF << 0).toString(16);
  el.style.backgroundColor = 'rgba(0,0,0,0.05)';
});

List images that are too large (Slower LCP).

This code scans all images on the page and logs out images whose actual size (Natural size) is significantly larger than their displayed size, helping you identify the cause of slow website performance.

(async () => {
  for (const img of $$('img')) {
    try {
      const res = await fetch(img.src);
      const blob = await res.blob();
      const bm = await createImageBitmap(blob);
      const { width: nW, height: nH } = bm;
      const { width: dW, height: dH } = img;

      if (dW > 0 && nW / dW > 1.5) {
        const ratio = (nW / dW).toFixed(2);
        const waste = (((nW * nH - dW * dH) / (nW * nH)) * 100).toFixed(1);
        
        console.log(
          `%c [HEAVY] ${ratio}x %c (${waste}% waste) %c\n` +
          `• Natural: ${nW}x${nH}px\n` +
          `• Display: ${dW}x${dH}px\n` +
          `%c• RECOMMEND: Resize to ${dW * 2}px%c\n` +
          `• URL: ${img.src}\n` +
          `• DOM:`,
          'color:white;background:#e67e22;font-weight:bold;border-radius:3px;padding:2px 5px;',
          'color:red;font-weight:bold;', 
          'color:inherit;',
          'color:green;font-weight:bold;text-decoration:underline;',
          'color:inherit;',
          img
        );

        img.style.outline = '4px dashed #e67e22';
        img.style.outlineOffset = '-4px';
      }
      bm.close();
    } catch (e) {}
  }
})();

Edit content directly

Transform your entire website into a text editor. You can click anywhere to delete text, type new text to test which wording best fits the layout before making changes in the backend.

document.designMode = 'on';

Check for "messy" z-index"

If you encounter an issue where one element overlaps another (like a Header overlapping a Popup), this code will list all elements with the specified attribute. z-index So you can compare the order.

const elements = [...document.querySelectorAll('*')]
  .map(el => ({
    element: el,
    zIndex: window.getComputedStyle(el).zIndex
  }))
  .filter(obj => obj.zIndex !== 'auto');
console.table(elements);