Un overlay di debug responsive: breakpoint, overflow, righello a griglia
La modalita dispositivo dei DevTools e ottima finche non e d'intralcio: riduce il tuo viewport, va a scatti al ridimensionamento e non puo dirti quale elemento sta causando quell'esasperante barra di scorrimento orizzontale. Questo articolo costruisce un leggero overlay di debug responsive che inietti direttamente sulla pagina — un distintivo della dimensione dal vivo, il nome del breakpoint attivo, un interruttore per contornare tutto, un cercatore di overflow e un righello a colonne. Abbinalo al pannello CSS di JustZix e puoi individuare un bug e correggerlo nella stessa finestra.
Perche un overlay sulla pagina batte la modalita dispositivo
La modalita dispositivo risponde a "come appare a 375px?" — ma la maggior parte dei bug responsive non riguarda una larghezza specifica, riguarda le transizioni: un margine che non collassa, un'immagine con larghezza fissa, un figlio flex che si rifiuta di restringersi. Per quelli vuoi trascinare la tua vera finestra del browser e guardare i numeri cambiare dal vivo. Un overlay iniettato ti da questo, a prestazioni native, senza arredo che ruba pixel.
Tutto qui sotto e un'unica regola JS. Iniettala una volta; l'overlay si aggiorna da solo mentre ridimensioni.
Il distintivo del viewport dal vivo
Inizia con un distintivo fisso che mostra la larghezza e l'altezza correnti del viewport e si aggiorna a ogni ridimensionamento.
(() => {
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();Il distintivo sta in basso a sinistra, ignora gli eventi del puntatore cosi non blocca mai un clic e cavalca uno z-index abbastanza alto da superare quasi ogni sito.
Dare un nome al breakpoint attivo
Un conteggio grezzo di pixel e utile, ma "siamo nell'intervallo tablet?" e la domanda che davvero ti poni. Mappa le larghezze a nomi — adatta la tabella per corrispondere al framework del sito (questi sono i valori predefiniti di 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';
}Ora il distintivo legge qualcosa come 1024 × 768px · lg — e nel momento in cui trascini attraverso un confine di breakpoint, il nome cambia. Quel riscontro istantaneo e tutto il punto.
Contornare ogni elemento
Il classico trucco del "contorna tutto" espone il box model dell'intera pagina — vedi subito margini vaganti, colonne disallineate e annidamenti accidentali. Rendilo un interruttore cosi non e d'intralcio.
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; }'
: '';
}
// Press 'o' to toggle outlines
window.addEventListener('keydown', e => {
if (e.key === 'o' && !e.metaKey && !e.ctrlKey) toggleOutline();
});Usare outline invece di border conta — i contorni non occupano spazio, quindi attivarli non causa un riflusso del layout che stai cercando di ispezionare.
Il cercatore di overflow orizzontale
Questa e la funzione che vale l'intero articolo. Una barra di scorrimento laterale significa che qualche elemento e piu largo del viewport — ma quale? Percorri ogni elemento e segnala quelli il cui bordo destro sborda oltre 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;
}
// Press 'f' to find overflow
window.addEventListener('keydown', e => {
if (e.key === 'f' && !e.metaKey && !e.ctrlKey) findOverflow();
});Premi f e ogni elemento incriminato riceve un contorno magenta; l'elenco arriva anche nella Output Console cosi puoi ispezionare ogni nodo. Di solito e un solo elemento — un'immagine a larghezza fissa, una lunga stringa senza interruzioni, un margine negativo — e ora sai con precisione quale.
Un righello a colonne / griglia
Per controllare che il contenuto si allinei a una griglia, sovrapponi colonne distanziate uniformemente. Questo disegna un righello a 12 colonne con grondaie attraverso il 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);
}
// Press 'g' to toggle the grid ruler
window.addEventListener('keydown', e => {
if (e.key === 'g' && !e.metaKey && !e.ctrlKey) toggleRuler();
});
})();Fai corrispondere maxWidth, gap e il numero di colonne alla griglia reale del sito. Ora puoi vedere a colpo d'occhio se titoli, schede e immagini si agganciano alle stesse linee — o derivano di qualche pixel.
La mappa completa della tastiera
- o — attiva il contorna-tutto.
- f — trova i colpevoli dell'overflow orizzontale.
- g — attiva il righello a 12 colonne.
- Il distintivo della dimensione si aggiorna a ogni ridimensionamento, senza bisogno di tasti.
Mantieni i controlli dei modificatori (!e.metaKey && !e.ctrlKey) cosi le scorciatoie non si scontrano con i comandi del browser. Se il sito stesso ascolta i tasti lettera semplici, passa a qualcosa come Alt+O.
Abbinarlo al pannello CSS
Questo overlay ti dice cosa e sbagliato; il pannello CSS di JustZix ti lascia correggerlo senza lasciare la scheda. Il flusso di lavoro:
- Inietta l'overlay dal pannello JS ed eseguilo.
- Trascina la tua finestra attraverso i breakpoint, guardando il distintivo.
- Vedi comparire una barra di scorrimento? Premi
f, ottieni il colpevole. - Apri il pannello CSS e correggilo dal vivo —
max-width: 100%,overflow-wrap: anywhere, qualunque cosa serva. - Quando sembra giusto, salva il CSS nella regola cosi la correzione resta.
Vedi anche
- Un overlay di audit di accessibilita dal vivo — lo stesso approccio dell'overlay sulla pagina per l'accessibilita.
- Un foglio di stile di stampa personalizzato per PDF migliori — correggere il layout per un diverso mezzo.
Smetti di combattere con la modalita dispositivo per bug che non puo diagnosticare. Installa JustZix, inietta l'overlay e fai il debug dei layout responsive nel tuo vero browser a piena velocita.
Valuta questo articolo
Nessuna valutazione — sii il primo.