Usare i DevTools dentro il pannello
L’attenzione se la prende l’anteprima multi-dispositivo. Il motivo per smettere di passare al browser sono i DevTools che stanno sotto.
Simulator Panel ha console, rete e archiviazione integrati, insieme alla profilazione di prestazioni e accessibilità. Quasi tutti usano l’anteprima dei dispositivi e non aprono mai questi strumenti: un peccato, perché rispondono proprio alle domande che l’anteprima solleva.
Prima la rete, sempre
Quando una pagina si comporta male a una larghezza e non a un’altra, la scheda di rete lo chiarisce in pochi secondi. Cerchi due cose: una richiesta fallita in silenzio e una richiesta partita due volte.
È la seconda a sorprendere. Un componente che si ri-renderizza al ridimensionamento spesso richiede di nuovo, e l’unico posto in cui si vede è un pannello di rete con due righe identiche. La pagina continua a funzionare, quindi nessuno se ne accorge finché non arriva la fattura o il limite di frequenza.
La console a ogni larghezza, non solo a una
Gli errori non sono indipendenti dalla larghezza. Un layout che collassa a un breakpoint piccolo può lanciare dove quello desktop non lo fa: una misura che restituisce zero, un elemento non ancora nel DOM a quella dimensione.
Quindi leggi la console specificamente nell’anteprima del telefono piccolo. È quella che si salta ed è quella in cui gli errori si concentrano.
Archiviazione, per il bug che capita solo a te
Lo strumento di archiviazione chiude il «da me funziona». Metà di quei casi è un valore vecchio nel local storage da una build precedente: un feature flag, un token in cache, un banner chiuso che non tornerà mai più.
Svuota e ricarica prima di spendere un’ora su un bug che nessun nuovo visitatore vedrà mai.
La profilazione che vale la pena fare una volta
Prima di un lancio, esegui la profilazione di prestazioni e accessibilità alla larghezza più piccola che supporti. Non su desktop: è sul telefono piccolo che una pagina pesante diventa davvero lenta e che le aree tattili falliscono.
Un’avvertenza da dire chiaramente: questo misura la pagina nel tuo browser, sulla tua macchina. Ti parla della pagina, non di un Android di quattro anni su un treno. Considera un buon punteggio necessario, non sufficiente.
Domande frequenti
Perché controllare la console a più larghezze?
Gli errori non sono indipendenti dalla larghezza. Un layout che collassa a un breakpoint piccolo può lanciare dove il desktop non lo fa: una misura che restituisce zero, un elemento non ancora nel DOM a quella dimensione.
Come individuo una richiesta duplicata?
La scheda di rete mostra due righe identiche. I componenti che si ri-renderizzano al ridimensionamento spesso richiedono di nuovo; la pagina continua a funzionare e nessuno se ne accorge finché non arriva un limite di frequenza o una fattura.
Un buon punteggio di profilazione basta prima del lancio?
No. Misura la pagina nel tuo browser sulla tua macchina. È necessario ma non sufficiente: un vero telefono economico su una rete vera è il test che non può sostituire.
