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 lavorare con i design responsive. Ora è arrivato il momento del primo aggiornamento importante, che inizierà in Chrome 49. Quali sono quindi le novità?
I dispositivi mobili stanno diventando il punto di partenza di Chrome DevTools. In passato, abbiamo offerto modi per emulare il mobile, ma l'impostazione predefinita per lo sviluppo era il computer. L'emulazione mobile doveva essere sempre attivata. Ora che l'utilizzo dei siti mobile ha superato quello dei siti desktop in molti luoghi, stiamo cambiando anche la nostra posizione in DevTools.
Novità
Innanzitutto, l'interfaccia utente è semplificata e occupa molto meno spazio. Prevediamo che la nuova modalità Dispositivo diventerà la modalità di sviluppo principale per la maggior parte degli utenti, pertanto era necessario un design pulito e semplice che espanda la barra di navigazione principale di DevTools.
La nuova regola per i dispositivi di salto rapido sopra le query sui contenuti multimediali.
Inoltre, abbiamo centrato la visualizzazione e aggiunto in alto una nuova righello dei dispositivi per i salti rapidi, uno strumento molto utile per la progettazione in base al responsive che ti dà un'idea delle dimensioni dei dispositivi più comuni.
Infine, molte opzioni sono state raggruppate o nascoste dietro un pulsante di attivazione/disattivazione se possibile. Queste nuove opzioni composite semplificano molto il passaggio da una modalità all'altra. Per attivare/disattivare determinati controlli o personalizzare la tua esperienza con la barra degli strumenti, fai clic sull'icona del menu con 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 una serie di dispositivi mobili e desktop. Puoi scegliere tra due modalità di sviluppo:
- Adattabile
- Dispositivo specifico
In entrambe le modalità, il viewport si trova in una finestra ridimensionabile all'interno di Chrome. Questo ha il vantaggio significativo di poter massimizzare la finestra del browser e DevTools come preferisci e di non doverli spostare quando testi più dimensioni della pagina e passi da una all'altra.
Responsive è la modalità che ti consigliamo di utilizzare durante l'iterazione attiva per assicurarti che il tuo sito funzioni su tutti i tipi di dispositivi, non solo su alcuni specifici. In questa modalità, i manici accanto all'area visibile sono ridimensionabili a piacere.
Dispositivo specifico si riferisce alla scelta di un dispositivo specifico e al blocco del viewport in base alle sue dimensioni. Questa opzione è utile quando vuoi apportare le ultime correzioni e modifiche per alcuni dispositivi popolari in prossimità del lancio. Ecco perché nel menu a discesa non mostriamo solo un elenco enorme di tutti i tipi di dispositivi, ma quelli più apprezzati al momento. Se ne selezioni uno, facciamo del nostro meglio per farlo funzionare il più possibile come un dispositivo reale: vengono emulati gli eventi tocco, l'agente utente, la visualizzazione, il browser e l'interfaccia utente del dispositivo (se disponibili).
Debug remoto integrato
Le emulazioni, anche le migliori disponibili, hanno dei limiti. Ci sono semplicemente cose che le emulazioni non possono fare oggi, ad esempio:
- Verifica che un pulsante sia abbastanza grande per il tuo pollice.
- Verifica le prestazioni del tuo sito su uno smartphone più lento.
- Debug di stranezze e limitazioni casuali di determinati dispositivi.
Per testare adeguatamente tutti questi scenari, devi testare, lavorare e eseguire il debug utilizzando dispositivi fisici reali.
Da un po' di tempo, puoi visitare la pagina chrome://inspect, collegare il dispositivo tramite USB e aprire una sessione di debug remoto tramite DevTools. Ora però abbiamo fatto un passo avanti e abbiamo riorganizzato l'aspetto e il comportamento del debug remoto, incorporandolo nel nucleo di DevTools. Invece di passare a un'altra pagina, ora puoi accedere a Controlla dispositivi come finestra di dialogo direttamente nel nuovo menu principale. In questo modo,
è molto più facile includere il debug fisico nel flusso di lavoro: basta
collegare lo smartphone, senza dover uscire da DevTools.
Nuove posizioni per il resto dei controlli di emulazione precedenti
Poiché ora il mobile è l'impostazione predefinita in DevTools, funzionalità come la limitazione della rete sono state spostate nella loro posizione corretta, in questo caso il riquadro Rete.
Alcune funzionalità, come l'emulazione dei sensori o le impostazioni di rendering come l'emulazione di supporti di stampa, sono state spostate in un punto coerente del riquadro App. Puoi trovare tutti gli extra nel nuovo menu principale in "Altri strumenti".
Sappiamo che si tratta di un cambiamento significativo a cui dovremo abituarci tutti. Troverai una copertura completa di tutto ciò che contiene nelle documentazioni sulla modalità Dispositivo appena aggiornate. Saremo lieti di ricevere tue notizie su Twitter o, se hai bisogno di più di 140 caratteri, sul nostro bug tracker (sì, anche per le richieste di funzionalità).