Tổng Hợp Code Console Debug

Code kiểm tra chiều cao {body} khi có sự thay đổi.

(() => {
  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" Giao diện (Kiểm tra độ bền Layout)

Đoạn code này sẽ thay thế toàn bộ văn bản trên web bằng một đoạn text cực dài (Lorum Ipsum). Rất hữu ích để check xem các Card, Button hoặc Grid của bạn có bị vỡ khi tiêu đề bài viết quá dài hay không.

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

Chế độ "X-Ray" (Soi cấu trúc lồng nhau)

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

Liệt kê các hình ảnh quá nặng (Slower LCP)

Đoạn code này quét toàn bộ ảnh trên trang và log ra những ảnh có kích thước thực tế (Natural size) lớn hơn nhiều so với kích thước hiển thị, giúp bạn tìm ra nguyên nhân gây chậm web.

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

Chỉnh sửa nội dung trực tiếp

Biến toàn bộ website thành một trình soạn thảo văn bản. Bạn có thể click vào bất kỳ đâu để xóa chữ, gõ chữ mới nhằm test xem câu chữ nào khớp với layout nhất trước khi sửa trong backend.

document.designMode = 'on';

Kiểm tra z-index "lộn xộn"

Nếu bạn bị lỗi cái này đè lên cái kia (như Header đè lên Popup), đoạn code này sẽ liệt kê tất cả các phần tử có thuộc tính z-index để bạn so sánh thứ tự.

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