Utilisez ces étapes comme liste de travail et adaptez-les aux éléments disponibles, au périmètre et aux contraintes du projet.
Instructions pratiques
- Ouvrez la page à vérifier et la console développeur du navigateur. Activez d’abord le mode responsive pour contrôler les débordements mobiles.
- Vérifiez le code, collez le script complet dans la console et appuyez sur Entrée. Il lit la page actuelle ; seuls l’audit du sitemap et les vérifications de liens envoient des requêtes limitées à la même origine.
- Consultez la console ou le fichier CSV/JSON téléchargé. Les règles du navigateur, l’authentification et les méthodes non prises en charge par le serveur peuvent rendre certains résultats incertains.
(() => {
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.');
})();Vérifiez le code avant de l’exécuter. Il lit la page actuelle ; seuls les audits sitemap et liens envoient des requêtes limitées à la même origine, sans cookies. Le contenu du site n’est pas modifié.