Các bước thực tế
Mở trang cần kiểm tra và bảng điều khiển dành cho nhà phát triển của trình duyệt. Với công cụ kiểm tra tràn trên di động, trước tiên hãy bật chế độ responsive.
Xem xét mã, dán toàn bộ đoạn script vào console rồi nhấn Enter. Script đọc trang hiện tại; chỉ công cụ kiểm tra metadata sitemap và các bộ kiểm tra cùng origin mới gửi request có giới hạn.
Xem kết quả trong console hoặc CSV/JSON tải xuống. Chính sách trình duyệt, trạng thái xác thực và phương thức máy chủ không được hỗ trợ có thể khiến một số phép kiểm tra chưa kết luận được.
Script dành cho console của trình duyệt
Xem xét trước khi chạy. Script đọc trang hiện tại; chỉ các lần kiểm tra sitemap và liên kết mới gửi request cùng origin có giới hạn. Request không gửi cookie; script không thay đổi nội dung website.
(() => {
const width = document.documentElement.clientWidth || innerWidth;
const MAX_SCAN = 8000;
const MAX_RESULTS = 80;
const candidates = [];
const walker = document.createTreeWalker(document.body, NodeFilter.SHOW_ELEMENT);
let scanCapped = false;
while (walker.nextNode()) {
if (candidates.length === MAX_SCAN) {
scanCapped = true;
break;
}
candidates.push(walker.currentNode);
}
const overflowRows = candidates.map((el) => {
const rect = el.getBoundingClientRect();
const style = getComputedStyle(el);
return { element: el, selector: el.tagName.toLowerCase() + (el.id ? '#' + CSS.escape(el.id) : '') + [...el.classList].slice(0, 2).map((name) => '.' + CSS.escape(name)).join(''), left: Math.round(rect.left), right: Math.round(rect.right), width: Math.round(rect.width), position: style.position, overflow: rect.left < -2 || rect.right > width + 2 };
}).filter((row) => row.overflow && row.width > 0).sort((a, b) => Math.max(b.right - width, -b.left) - Math.max(a.right - width, -a.left));
const rows = overflowRows.slice(0, MAX_RESULTS);
console.table(rows.map(({ element, ...row }) => row));
console.info('Viewport width:', width, '· document width:', document.documentElement.scrollWidth, '· out-of-viewport elements:', overflowRows.length, '· shown:', rows.length, '· scanned elements:', candidates.length);
if (overflowRows.length > MAX_RESULTS) console.warn('Showing the ' + MAX_RESULTS + ' largest candidates out of ' + overflowRows.length + ' overflowing elements.');
if (scanCapped) console.warn('Scan stopped at ' + MAX_SCAN + ' elements; additional elements were not checked.');
if (document.documentElement.scrollWidth > width) console.warn('The document is wider than the current viewport. Run again at the target mobile width.');
console.info('This reports geometry only; fixed headers, intentional carousels, transforms, and browser zoom may produce false positives.');
})();