Una nuova modalità dispositivo per una generazione mobile-first
Poco più di un anno fa abbiamo introdotto la modalità dispositivo, un modo per emulare i dispositivi e utilizzare design reattivi. È arrivato il momento del primo upgrade importante, a partire da Chrome 49. Quali sono quindi le novità?
I dispositivi mobili stanno diventando il punto di partenza in Chrome DevTools. Mentre in passato offrivamo dei modi per emulare i dispositivi mobili, l'impostazione predefinita per lo sviluppo era quella per i computer desktop. L'emulazione dei dispositivi mobili doveva sempre essere attivata. Ora che il consumo di siti per dispositivi mobili ha superato in molti casi i computer desktop, cambieremo posizione anche in DevTools.
Novità
Innanzitutto, l'interfaccia utente è semplificata e utilizza molto meno spazio. Prevediamo che la nuova modalità dispositivo diventerà la modalità di sviluppo principale per la maggior parte degli utenti, quindi un requisito essenziale era un design semplice e lineare che estenda la barra di navigazione principale di DevTools.
Il nuovo righello del dispositivo per il salto rapido sulle query supporti.
Inoltre, abbiamo centrato l'area visibile e aggiunto in alto un nuovo righello per il salto rapido, particolarmente utile per la progettazione reattiva. In questo modo puoi farti un'idea delle dimensioni dei dispositivi più comuni.
Infine, molte opzioni sono state raggruppate o nascoste dietro un pulsante di attivazione/disattivazione quando è possibile. Con queste nuove opzioni composite, è molto più facile passare da una modalità all'altra. Per attivare o disattivare determinati controlli o personalizzare la tua esperienza con la barra degli strumenti, fai clic sulla piccola icona del menu con i tre puntini.
Adattabile per impostazione predefinita
La barra degli strumenti principale di DevTools ora si espande sul lato sinistro della finestra del browser e include gli strumenti più importanti per emulare un'ampia gamma di dispositivi mobili e desktop. Puoi scegliere tra due modalità di sviluppo:
- Adattabile
- Dispositivo specifico
In entrambe le modalità, l'area visibile si trova nella propria finestra ridimensionabile all'interno di Chrome. Questo presenta il vantaggio significativo che puoi massimizzare la finestra del browser e gli strumenti DevTools nel modo che preferisci senza farli saltellare quando provi più dimensioni della pagina e passi avanti e indietro.
Adattabile è la modalità che vuoi usare durante l'iterazione attiva per assicurarti che il tuo sito funzioni su tutti i tipi di dispositivi, non solo su alcuni. In questa modalità, i punti di manipolazione accanto all'area visibile possono essere ridimensionati liberamente.
Il termine dispositivo specifico fa riferimento a quando scegli un dispositivo specifico e blocchi l'area visibile in base alle sue dimensioni. Questa funzionalità è utile se vuoi aggiungere le correzioni finali e apportare le modifiche necessarie ad alcuni dispositivi noti in prossimità del lancio. È per questo che nell'elenco a discesa non mostriamo solo un vasto elenco di tutti i tipi di dispositivi, ma anche quelli più popolari al momento. Se ne selezioni uno, facciamo del nostro meglio per far sì che si comporti in modo più simile al reale: eventi touch, user agent, area visibile e dispositivo chrome e UI (se disponibile) sono tutti emulati.
Debug remoto integrato
Le emulazioni, anche le migliori disponibili, possono farti arrivare fino a questo punto. Ci sono semplicemente cose che le emulazioni non possono fare al momento, ad esempio:
- Controlla se un pulsante è abbastanza grande per il tuo pollice.
- Testa le prestazioni del tuo sito su uno smartphone più lento.
- Esegui il debug di anomalie e limitazioni casuali di alcuni dispositivi.
Per testare in modo sufficiente tutti questi scenari, devi testare, lavorare ed eseguire il debug utilizzando dispositivi fisici reali.
Per un po' di tempo puoi andare a chrome://inspect, connettere il dispositivo tramite USB e aprire una sessione di debug remoto tramite DevTools. Ma ora abbiamo fatto un passo in più e abbiamo ripensato l'aspetto e il comportamento del debug remoto, incorporandolo nel nucleo di DevTools. Invece di passare a un'altra pagina, ora puoi accedere alla finestra di dialogo Ispeziona dispositivi direttamente dal nuovo menu principale. In questo modo, è molto più semplice includere il debug fisico nel flusso di lavoro. Basta collegare il telefono senza uscire da DevTools.
Nuove case per il resto dei precedenti controlli di emulazione
I dispositivi mobili sono ora l'impostazione predefinita in DevTools, pertanto funzionalità come la limitazione della rete sono state spostate nella home page appropriata, in questo caso il riquadro Rete.
Alcune funzionalità, come l'emulazione dei sensori o le impostazioni di rendering, come l'emulazione dei supporti di stampa, sono state spostate in una posizione coerente nel riquadro a scomparsa. Puoi trovare tutti gli extra nel nuovo menu principale in "Altri strumenti".
Sappiamo che questo è un cambiamento significativo a cui tutti dovremo abituarsi. Troverai una copertura completa su tutto ciò che contiene nella documentazione appena aggiornata sulla modalità del dispositivo. Ci piacerebbe conoscere la tua opinione su Twitter o, se hai bisogno di più di 140 caratteri, sul nostro tracker dei bug (sì, anche per le richieste di funzionalità).