Une surcouche de débogage responsive : breakpoints, débordement, règle de grille
Le mode appareil des DevTools est génial jusqu'à ce qu'il soit dans le chemin : il rétrécit votre viewport, il rame au redimensionnement, et il ne peut pas vous dire quel élément cause cette exaspérante barre de défilement horizontale. Cet article construit une surcouche de débogage responsive légère que vous injectez directement sur la page — un badge de taille en direct, le nom du breakpoint actif, un interrupteur de contour-tout, un détecteur de débordement et une règle de colonnes. Associez-la au panneau CSS JustZix et vous pouvez repérer un bug et le corriger dans la même fenêtre.
Pourquoi une surcouche sur la page bat le mode appareil
Le mode appareil répond à « à quoi cela ressemble-t-il à 375px ? » — mais la plupart des bugs responsives ne concernent pas une largeur précise, ils concernent les transitions : une marge qui ne se réduit pas, une image à largeur fixe, un enfant flex qui refuse de rétrécir. Pour ceux-là, vous voulez faire glisser votre vraie fenêtre de navigateur et regarder les nombres changer en direct. Une surcouche injectée vous donne cela, à la performance native, sans habillage qui vole des pixels.
Tout ce qui suit est une seule règle JS. Injectez-la une fois ; la surcouche se met à jour elle-même quand vous redimensionnez.
Le badge de viewport en direct
Commencez par un badge fixe qui affiche la largeur et la hauteur actuelles du viewport et se met à jour à chaque redimensionnement.
(() => {
document.getElementById('jz-resp')?.remove();
const bar = document.createElement('div');
bar.id = 'jz-resp';
Object.assign(bar.style, {
position: 'fixed', left: '10px', bottom: '10px',
font: '12px/1.5 ui-monospace, monospace',
background: '#111', color: '#fff',
padding: '6px 10px', borderRadius: '6px',
zIndex: 2147483600, pointerEvents: 'none',
whiteSpace: 'pre',
});
document.body.appendChild(bar);
function update() {
const w = window.innerWidth;
const h = window.innerHeight;
bar.textContent = w + ' × ' + h + 'px · ' + bpName(w);
}
window.addEventListener('resize', update);
update();Le badge se place en bas à gauche, ignore les événements de pointeur pour ne jamais bloquer un clic, et chevauche un z-index assez élevé pour passer au-dessus de presque tout site.
Nommer le breakpoint actif
Un nombre de pixels brut est utile, mais « sommes-nous dans la plage tablette ? » est la question que vous posez réellement. Mappez les largeurs à des noms — ajustez la table pour correspondre au framework du site (ce sont les valeurs par défaut de Tailwind).
function bpName(w) {
if (w >= 1536) return '2xl';
if (w >= 1280) return 'xl';
if (w >= 1024) return 'lg';
if (w >= 768) return 'md';
if (w >= 640) return 'sm';
return 'xs';
}Maintenant le badge affiche quelque chose comme 1024 × 768px · lg — et au moment où vous faites glisser à travers une frontière de breakpoint, le nom bascule. Ce retour instantané est tout l'intérêt.
Contourer chaque élément
L'astuce classique du « contour-tout » expose le modèle de boîte de toute la page — vous voyez immédiatement les marges égarées, les colonnes désalignées et les imbrications accidentelles. Faites-en un interrupteur pour qu'il ne gêne pas.
let outlined = false;
const styleEl = document.createElement('style');
document.head.appendChild(styleEl);
function toggleOutline() {
outlined = !outlined;
styleEl.textContent = outlined
? '* { outline: 1px solid rgba(255,0,0,.35) !important; }'
: '';
}
// Appuyez sur 'o' pour basculer les contours
window.addEventListener('keydown', e => {
if (e.key === 'o' && !e.metaKey && !e.ctrlKey) toggleOutline();
});Utiliser outline plutôt que border compte — les contours ne prennent pas de place, donc les basculer ne reflue pas la mise en page que vous essayez d'inspecter.
Le détecteur de débordement horizontal
C'est la fonctionnalité qui vaut tout l'article. Une barre de défilement latérale signifie qu'un élément est plus large que le viewport — mais lequel ? Parcourez chaque élément et signalez tout celui dont le bord droit déborde au-delà de document.documentElement.clientWidth.
function findOverflow() {
document.querySelectorAll('.jz-of').forEach(n => {
n.classList.remove('jz-of');
n.style.outline = '';
});
const limit = document.documentElement.clientWidth;
const culprits = [];
document.querySelectorAll('*').forEach(el => {
const r = el.getBoundingClientRect();
if (r.right > limit + 1 || r.left < -1) {
culprits.push(el);
el.classList.add('jz-of');
el.style.outline = '3px solid #f0f';
}
});
console.log('%c' + culprits.length + ' overflowing element(s)',
'color:#f0f');
console.log(culprits);
return culprits;
}
// Appuyez sur 'f' pour trouver le debordement
window.addEventListener('keydown', e => {
if (e.key === 'f' && !e.metaKey && !e.ctrlKey) findOverflow();
});Appuyez sur f et chaque élément fautif reçoit un contour magenta ; la liste atterrit aussi dans la console de sortie pour que vous puissiez inspecter chaque nœud. C'est généralement un seul élément — une image à largeur fixe, une longue chaîne insécable, une marge négative — et maintenant vous savez précisément lequel.
Une règle de colonnes / de grille
Pour vérifier que le contenu s'aligne sur une grille, superposez des colonnes régulièrement espacées. Ceci dessine une règle de 12 colonnes avec des gouttières à travers le viewport.
function toggleRuler() {
let ruler = document.getElementById('jz-ruler');
if (ruler) { ruler.remove(); return; }
ruler = document.createElement('div');
ruler.id = 'jz-ruler';
Object.assign(ruler.style, {
position: 'fixed', inset: '0',
display: 'grid', gap: '16px',
gridTemplateColumns: 'repeat(12, 1fr)',
maxWidth: '1200px', margin: '0 auto',
padding: '0 16px',
zIndex: 2147483500, pointerEvents: 'none',
});
for (let i = 0; i < 12; i++) {
const col = document.createElement('div');
col.style.background = 'rgba(0, 120, 255, .12)';
ruler.appendChild(col);
}
document.body.appendChild(ruler);
}
// Appuyez sur 'g' pour basculer la regle de grille
window.addEventListener('keydown', e => {
if (e.key === 'g' && !e.metaKey && !e.ctrlKey) toggleRuler();
});
})();Faites correspondre maxWidth, gap et le nombre de colonnes à la vraie grille du site. Maintenant vous pouvez voir d'un coup d'œil si les titres, les cartes et les images se calent sur les mêmes lignes — ou dérivent de quelques pixels.
La carte clavier complète
- o — basculer le contour-tout.
- f — trouver les fautifs du débordement horizontal.
- g — basculer la règle de grille à 12 colonnes.
- Le badge de taille se met à jour à chaque redimensionnement, aucune touche nécessaire.
Gardez les vérifications de modificateurs (!e.metaKey && !e.ctrlKey) pour que les raccourcis n'entrent pas en collision avec les commandes du navigateur. Si le site lui-même écoute les touches de lettres simples, passez à quelque chose comme Alt+O.
L'associer au panneau CSS
Cette surcouche vous dit ce qui ne va pas ; le panneau CSS JustZix vous laisse le corriger sans quitter l'onglet. Le workflow :
- Injectez la surcouche depuis le panneau JS et exécutez-la.
- Faites glisser votre fenêtre à travers les breakpoints, en regardant le badge.
- Vous voyez une barre de défilement apparaître ? Appuyez sur
f, obtenez le fautif. - Ouvrez le panneau CSS et corrigez-le en direct —
max-width: 100%,overflow-wrap: anywhere, ce dont il a besoin. - Quand cela a l'air bon, enregistrez le CSS dans la règle pour que la correction persiste.
À voir aussi
- Une surcouche d'audit d'accessibilité en direct — la même approche de surcouche sur la page pour l'accessibilité.
- Une feuille de style d'impression sur mesure pour de meilleurs PDF — corriger la mise en page pour un autre médium.
Cessez de combattre le mode appareil pour des bugs qu'il ne peut pas diagnostiquer. Installez JustZix, injectez la surcouche, et déboguez les mises en page responsives dans votre vrai navigateur à pleine vitesse.
Notez cet article
Aucune note — soyez le premier.