Stai lavorando a un layout responsive, lo controlli su desktop, tutto è perfetto. Lo apri su uno smartphone, il layout si rompe, il font diventa grande come una capocchia di fiammifero e il pulsante «Paga» scivola fuori dal bordo dello schermo.

I colossi del prodotto con budget per laboratori QA possono permettersi di acquistare una flotta di dispositivi reali per ogni schermo. Ma cosa dovrebbe fare un freelance, una startup di tre persone o uno sviluppatore solista? La risposta è l'emulatore DevTools integrato di Chrome. Gratuito, si avvia con una singola scorciatoia da tastiera e copre la stragrande maggioranza delle attività quotidiane di test responsive. Nessun software aggiuntivo da installare, nessuna macchina virtuale, nessuna cloud farm.

Ecco una guida passo passo alla Device Mode: dall'attivazione alla regolazione fine del throttling di rete e all'emulazione dei sensori. Tutto ciò che serve per testare un sito su smartphone e tablet senza lasciare il proprio laptop da lavoro.

💡 Panoramica rapida:

• Apri DevTools (F12 o Ctrl+Shift+I) e abilita la Device Toolbar (Ctrl+Shift+M), la pagina passerà alla modalità di emulazione viewport mobile.
• Seleziona un modello specifico dall'elenco a discesa (iPhone, Pixel, Galaxy) o imposta una risoluzione personalizzata in pixel, Chrome applicherà automaticamente lo user agent appropriato.
• Configura il throttling di rete (Slow 3G / Fast 3G) e abilita l'emulazione touch per vedere come il sito si carica e interagisce con gli utenti su una reale connessione internet mobile.
• Ricorda i limiti: l'emulatore non riproduce la GPU hardware di un dispositivo specifico, il rendering dei font iOS o il comportamento di Safari WebKit, per il test finale è ancora necessario un telefono reale.

Cos'è la Device Mode e quando è sufficiente

La Device Mode è un insieme di strumenti all'interno di Chrome DevTools che emula la visualizzazione di una pagina su un dispositivo mobile. Fa tre cose simultaneamente:

• Emula il viewport, comprimendo l'area di visualizzazione alle dimensioni fisiche dello schermo del dispositivo selezionato. Vedi il sito come lo vedrebbe un utente di iPhone 16 Pro Max o Samsung Galaxy S25.
• Falsifica lo user agent, il server riceve una stringa tipica di un browser mobile. Fondamentale per i siti con serving dinamico che distribuiscono layout diversi a desktop e mobile.
• Abilita l'emulazione touch, il cursore del mouse si trasforma in una simulazione del dito, con supporto per eventi touch, gesti e multi-touch.

Stabiliamo subito i confini. La Device Mode NON emula: il motore di rendering Safari (WebKit), la GPU di accelerazione hardware di un modello specifico, il comportamento della batteria e i processi in background del sistema operativo, o il comportamento della rete cellulare di diversi operatori. Per il test di accettazione finale prima del rilascio, è ancora necessario un telefono fisico. Ma per lo sviluppo e il debugging quotidiani, lo strumento copre le esigenze con ampio margine.

Come aprire la Device Mode: tre metodi

Chrome offre diversi percorsi per il pannello di emulazione. Scegli quello più veloce nel tuo flusso di lavoro.

Metodo 1. Scorciatoie da tastiera, il più veloce

In Chrome, premi:

• Windows / Linux: Ctrl + Shift + M
• macOS: Cmd + Shift + M

Se DevTools non è ancora aperto, si aprirà automaticamente insieme al pannello di emulazione. Premendo di nuovo si disabilita la Device Mode e la pagina torna alla visualizzazione normale.

Metodo 2. Pulsante in DevTools

Apri DevTools (F12 o Ctrl+Shift+I). Nell'angolo in alto a sinistra del pannello, accanto alla scheda Elements, c'è l'icona di un telefono e tablet, Toggle device toolbar. Cliccala.

Metodo 3. Attraverso il menu principale di Chrome

Tre puntini nell'angolo in alto a destra del browser → More Tools → Developer Tools. Poi, il pulsante Device Toolbar, come nel metodo 2. Il percorso è più lungo, ma ti salva se le scorciatoie da tastiera ti sono sfuggite di mente nel bel mezzo di un deploy notturno.

Selezione del dispositivo e impostazioni di emulazione

Dopo aver abilitato la Device Toolbar, la pagina si ricaricherà e sopra di essa apparirà un pannello di controllo. Analizziamo ogni elemento.

Elenco a discesa dei dispositivi

L'elemento centrale, un elenco a discesa con profili preimpostati. Chrome viene fornito con una quindicina di preset: da iPhone SE (per controllare schermi compatti) a iPhone 16 Pro Max, da Pixel 9 a Galaxy S25.

Seleziona un dispositivo e Chrome in un solo passaggio:

• imposta larghezza e altezza del viewport;
• applica lo user agent corrispondente;
• abilita l'emulazione touch (a meno che non sia disabilitata manualmente).

Per aggiungere un dispositivo non presente nell'elenco, clicca Edit... nello stesso menu a discesa e compila il modulo: risoluzione dello schermo, Device Pixel Ratio, stringa user agent. Il profilo personalizzato apparirà nell'elenco generale.

Risoluzione manuale

Non vuoi vincolarti a un modello specifico? Inserisci numeri arbitrari nei campi larghezza e altezza. Scenario tipico: «come appare il layout su uno smartphone Android di fascia media standard?», inserisci una risoluzione tipica e ottieni immediatamente la risposta, senza cercare il modello giusto nell'elenco.

Device pixel ratio

Il DPR determina quanti pixel fisici dello schermo corrispondono a un pixel CSS. I flagship moderni hanno DPR = 3, tablet e telefoni economici 2. Nel pannello di emulazione di Chrome, mostra il valore DPR corrente per il dispositivo selezionato e consente di modificarlo tramite l'elenco a discesa. Ciò influisce direttamente sulla nitidezza delle immagini e delle icone SVG sui display retina.

Rotazione dello schermo, throttling di rete e sensori

Tre impostazioni aggiuntive che trasformano la Device Mode da semplice «lente di ingrandimento» a strumento di test completo.

Rotazione dello schermo

L'icona con due frecce circolari scambia larghezza e altezza. Attiva sempre l'alternanza verticale ↔ orizzontale su ogni schermata chiave: header del sito, scheda prodotto, modulo di pagamento. Lo scrolling orizzontale su una landing page in orientamento verticale è un errore critico che il cliente noterà più velocemente di te.

Throttling di rete

Il menu a discesa No throttling consente di limitare la velocità di caricamento. Profili disponibili:

• Slow 3G (400 Kbps), internet mobile scarso in metropolitana, fuori città o in uno scantinato;
• Fast 3G (1,6 Mbps), internet mobile tipico in città;
• Slow 4G e Fast 4G (4-25 Mbps), buona connessione.

Dopo aver selezionato un profilo, aggiorna la pagina e guarda i tempi nel pannello Network. Se i font o le hero image impiegano più di tre secondi a caricarsi su Fast 3G, un utente con internet lento è già passato a un concorrente.

Emulazione touch

Abilitata per impostazione predefinita quando si seleziona un dispositivo mobile. Il cursore diventa un cerchio traslucido, che simula il tocco di un dito. Verifica tre cose:

• i menu a tendina funzionano al tocco, non al passaggio del mouse;
• la dimensione degli elementi interattivi è sufficiente, secondo le WCAG 2.1, la dimensione minima del target touch è 48×48 pixel CSS;
• non ci sono falsi attivatori di effetti hover fisicamente irriproducibili su un telefono reale.

Geolocalizzazione, media query e sensori

Chrome ha nascosto diversi strumenti utili nel menu «tre puntini» (⋮) all'interno del pannello DevTools, nella sezione More tools.

Geolocalizzazione

La scheda Sensors (More tools → Sensors) consente di impostare coordinate di latitudine e longitudine arbitrarie. Un sito che utilizza l'API Geolocation riceverà il punto specificato invece di quello reale. Comodo per verificare prezzi regionali, rilevamento automatico della lingua dell'interfaccia e promozioni locali.

Media query

Il pannello Rendering (More tools → Rendering) mostra i breakpoint delle media query CSS direttamente sopra la pagina. Abilita il flag Show media queries, sopra la pagina apparirà una scala colorata con indicatori di cambio stile. Cliccando su un punto si imposta immediatamente il viewport alla larghezza corrispondente. Uno strumento indispensabile per il debugging di breakpoint complessi.

Prefers-color-scheme e prefers-reduced-motion

Sempre nel pannello Rendering si trovano gli interruttori:

• prefers-color-scheme, forza il tema chiaro o scuro indipendentemente dalle impostazioni del sistema operativo;
• prefers-reduced-motion, emula una richiesta di disabilitare le animazioni, fondamentale per i test di accessibilità.

Screenshot e registrazione screencast

La Device Mode può acquisire screenshot della pagina emulata. Tre puntini nel pannello Device Toolbar → Capture screenshot, e ottieni un PNG esattamente delle dimensioni che vedi sullo schermo. Per uno screenshot a tutta altezza della pagina, scegli Capture full size screenshot, utile per inviare il layout a un cliente o in una segnalazione di bug.

Se gli screenshot statici non bastano, Chrome registra uno screencast del lavoro con la pagina emulata. Apri il pannello Recorder (More tools → Recorder), crea una nuova registrazione ed esegui le azioni, Chrome registrerà ogni passaggio con timestamp. La registrazione finita può essere esportata come script Puppeteer e automatizzare i nuovi test dopo le modifiche.

Limitazioni: quando non si può fare a meno di un dispositivo reale

L'emulazione di Chrome è uno strumento potente, ma non è la panacea. Ecco cosa fondamentalmente non copre:

• Rendering iOS. Secondo le regole dell'Apple App Store, tutti i browser su iPhone e iPad devono utilizzare il motore WebKit, anche Chrome e Firefox sono tecnicamente wrapper su Safari WebView. DevTools mostra il rendering del motore Chromium (Blink), e le differenze nella visualizzazione dei font, arrotondamenti, ombre e filtri tra Blink e WebKit possono essere significative.
• Sensori hardware. Giroscopio, barometro, NFC, accelerazione video hardware, nulla di tutto ciò esiste nell'emulatore e le API corrispondenti restituiranno null o un errore.
• Comportamento a batteria scarica. iOS e Android scaricano aggressivamente le schede in background a livelli critici di batteria. L'emulatore non lo riproduce.
• Prestazioni reali di JavaScript. Un processore mobile è molte volte più lento di uno desktop, le animazioni che «volano» su un laptop da lavoro possono bloccarsi su un telefono di fascia media. Per la misurazione, usa Lighthouse con il throttling della CPU.

La regola è semplice: conduci l'intero ciclo di sviluppo e layout in Device Mode, ed esegui il controllo finale di ogni rilascio su almeno un dispositivo Android fisico e un iPhone.

Un video breve ma denso del team Chrome Developers: Jecelyn Yeen mostra cinque modi per emulare il viewport mobile, dal passaggio di base ai profili dispositivo personalizzati e al test touch.

⁉️🤔 Domande frequenti

Perché il sito appare diverso in Chrome DevTools e su un iPhone reale?

Chrome su tutte le piattaforme tranne iOS utilizza il motore Blink. Un iPhone reale funziona su WebKit, si tratta di due motori di rendering diversi con una gestione differente di font, smoothing, filtri CSS e ombre. Ecco perché il test finale per iPhone richiede un dispositivo fisico, l'emulatore mostrerà l'immagine «come in Chrome su Mac», non «come in Safari su iPhone».

Qual è la differenza tra emulazione e simulazione nel contesto di DevTools?

L'emulazione riproduce il comportamento del sistema a livello di API e protocollo: falsifica lo user agent, emula gli eventi touch, limita la larghezza di banda di rete a livello di browser. La simulazione è un'imitazione più superficiale che non influisce sui meccanismi di basso livello. La Device Mode in Chrome è precisamente emulazione, non simulazione.

Si può emulare una versione specifica di iOS o Android?

No. La Device Mode emula viewport, user agent e input touch, ma non il sistema operativo e non la versione del motore del browser. Lo user agent può essere falsificato manualmente tramite Network conditions → User agent, ma il rendering rimarrà comunque basato su Blink. Per testare sotto una specifica versione di Safari/iOS, è necessario un dispositivo fisico o un servizio cloud come BrowserStack.

Come testare una PWA o un Service Worker nell'emulatore?

Apri il pannello Application in DevTools. Nella sezione Service Workers, spunta il flag Update on reload e se necessario seleziona Bypass for network. L'emulatore supporta la modalità offline, abilitala con la casella Offline nella scheda Network o nel pannello Service Workers. Il manifest della PWA si verifica nella scheda Manifest, sempre nel pannello Application.

Cosa fare se la Device Toolbar non è attiva, l'icona è grigia?

Il motivo più comune è che ti trovi su una pagina di servizio di Chrome (chrome://extensions, chrome://settings, nuova scheda DevTools). La Device Mode funziona solo su pagine web normali. Apri una qualsiasi pagina http/https e riprova.

Cosa fare quando l'emulatore non basta

La Device Mode in Chrome DevTools copre la parte del leone delle attività di layout responsive: cambio viewport, throttling di rete, input touch, geolocalizzazione, media query, screenshot. Per il lavoro quotidiano di un freelance o di un piccolo team, questo set è più che sufficiente.

Ma ricorda i confini. Rendering iOS, sensori hardware, prestazioni JS reali su hardware mobile debole, tutto questo rimane al di fuori dell'emulazione. Il gold standard: scrivi e fai il debug del layout in Device Mode, e prima di ogni rilascio, esegui i controlli su un iPhone e uno smartphone Android fisici. Due dispositivi, quindici minuti e la certezza che l'utente vedrà il sito come lo avevi pensato.