Quando realizziamo un sito web o un'applicazione web, abbiamo sempre il compito di verificare se tutto funziona correttamente su un dispositivo mobile o anche su un Tablet. Se stiamo lavorando allo sviluppo non abbiamo come controllarlo, poiché dovremmo prima inviare le nostre modifiche al server e lì consultarlo sul nostro dispositivo mobile.
Ma non dobbiamo preoccuparci poiché Google Chrome ha una funzionalità che ci consente con pochi semplici passaggi di verificare come funziona il nostro sito Web o la nostra applicazione sul dispositivo mobile che desideriamo.
1. Emula dispositivo mobile in Google Chrome
Come diciamo, Google Chrome incorpora uno strumento orientato agli sviluppatori con il quale possiamo accedere alle opzioni escluse a colpo d'occhio. Uno di questi è l'emulatore di dispositivi mobili in Modalità dispositivo.
Passo 1
Avremo un menu in basso che verrà visualizzato, che ci mostra il codice HTML della pagina. Per mostrare il pannello degli sviluppatori di Chrome andremo su "Menu / Altri strumenti / Strumenti per sviluppatori" o faremo la seguente combinazione di tasti:
Su Windows e Linux
Ctrl + Maiusc + M
Su Mac
+ ⌘ + M
Passo 2
Vedremo che si apre un pannello di codice. Osserviamo l'icona che corrisponde alla "Modalità dispositivo" e che verrà attivata quando apparirà in blu. Fare clic su di esso per attivarlo.
Passaggio 3
Mentre ci andiamo al menu in alto sopra la pagina emulata e selezioniamo il dispositivo che vogliamo emulare, in questo caso selezioniamo Apple iPhone x e aggiorniamo in modo che le modifiche abbiano effetto. Abbiamo un'ampia varietà di preset configurati in modo che con un clic abbiamo il nostro modello simulato.
Passaggio 4
Se vogliamo creare misurazioni personalizzate andremo dove appare il modello del terminale e faremo clic su "Modifica".
Passaggio 5
Appariranno quei modelli che sono precedentemente configuratori o possiamo aggiungerne uno in modo personalizzato facendo clic su "Aggiungi dispositivo personalizzato".
Passaggio 6
Nelle opzioni all'interno della Modalità dispositivo avremo la possibilità di attivare o meno i sensori che simulano un touch screen.
NotaFare clic sull'icona a tre punti per visualizzare, tra le altre, l'opzione "Sensori"
2. Emula la connettività di rete mobile in Google Chrome
Lo stato della rete e il suo test grazie a Chrome ci permette di testare il nostro sito web attraverso diversi tipi di connessioni di rete come 3G e anche senza connessione.
Passo 1
Possiamo anche emulare la rete in cui ci troviamo. Per fare ciò, andiamo alla scheda "Rete" e selezioniamo un tipo di rete nell'elenco comprimibile.
Passo 2
Se abbiamo stabilito un limite, vedremo un avviso per ricordarci che lo abbiamo abilitato.
3. Aggiungi limiti alla connettività di rete mobile in Google Chrome
Passo 1
Questo limite è importante e possiamo impostare limiti personalizzati con condizioni configurate da noi stessi. Per fare ciò, premiamo il seguente tasto per aprire il pannello Impostazioni.
F1
Passo 2
Fare clic sull'opzione "Limitazione". Selezioniamo la possibilità di "Aggiungi profilo personalizzato".
Passaggio 3
Qui imposteremo le impostazioni dei limiti in modo personalizzato.
4. Apri il pannello delle condizioni di rete in Google Chrome
Abbiamo più opzioni nel pannello degli sviluppatori in DevTools.
Passo 1
Per fare ciò, andiamo al menu a tre punti sul lato destro e facciamo clic su "Altri strumenti" / "Condizioni di rete".
Passo 2
Da qui possiamo abilitare o disabilitare la cache e cambiare l'agente predefinito con uno personalizzato.
Con questa funzionalità non dovremo più cercare il nostro cellulare per testare che il nostro sito web o la nostra applicazione funzioni correttamente, non resta che esplorare un po' di più questo strumento e utilizzarlo per accorciare i tempi di test e implementazione.
