請將以下步驟作為工作檢查清單,並依據專案的證據、範圍與限制調整。
實用步驟
- 開啟要檢查的頁面和瀏覽器開發人員主控台。行動版溢位檢查器請先使用回應式模式。
- 檢查程式碼,將完整片段貼到主控台並按 Enter。它會讀取目前頁面;只有 sitemap 中繼資料工具和同源檢查器會發出有限的請求。
- 檢視主控台輸出或下載的 CSV/JSON。瀏覽器政策、驗證狀態和不支援的伺服器方法可能導致部分檢查無法得出結論。
(() => {
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.');
})();執行前請先審查。此指令碼會讀取目前頁面;只有 sitemap 和連結稽核會發出有限的同源請求。請求不會帶上 cookies;指令碼不會變更網站內容。