该代码会检查 {body} 的高度何时发生变化。.

(() => {
  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');
})();

"压力测试"接口（布局耐久性测试）

这段代码会将您网站上的所有文本替换为一段极长的文本（Lorum Ipsum）。它对于检查文章标题过长时卡片、按钮或网格是否出现错位非常有用。.

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射线"模式（探测嵌套结构）

[].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)';
});

列出过大的图像（速度较慢的 LCP）。

这段代码会扫描页面上的所有图像，并记录实际尺寸（自然尺寸）明显大于显示尺寸的图像，从而帮助您确定网站性能缓慢的原因。.

(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) {}
  }
})();

直接编辑内容

将整个网站变成一个文本编辑器。您可以点击任意位置删除文本，输入新文本来测试哪种措辞最适合布局，然后再在后台进行更改。.

document.designMode = 'on';

检查是否存在"混乱"的 z-index 值"

如果遇到元素重叠的问题（例如标题与弹出窗口重叠），此代码将列出所有具有指定属性的元素。 z-index 这样你就可以比较订单了。.

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

在 WordPress 中按帖子标题搜索代码