Come visualizzare pagine web come su dispositivi mobili con Google Chrome

Il mercato degli smartphone non smette di crescere. Anche Google premia tutte le pagine "web friendly" all'interno dei risultati dei suoi motori di ricerca. Per questo sempre più siti web vengono ottimizzati per aprirsi correttamente su tutti i tipi di dispositivi mobili, anche tralasciando le versioni desktop, o limitando alcune funzioni o alcuni contenuti al loro interno. Browser Web, come Google Chrome , rileva da dove stiamo caricando un sito web (un PC, un cellulare, un tablet, ecc.) e richiedi la versione corrispondente al server. Ma fortunatamente è molto facile ingannare il server.

Quando utilizziamo il browser web, di solito siamo abituati a digitare un URL al suo interno o a fare direttamente una query nel motore di ricerca e ad attendere i risultati. Ma sappiamo davvero tutto quello che succede sotto quando lo facciamo?

visualizza le pagine web come su dispositivi mobili con Google Chrome

La Console per gli sviluppatori di Chrome

Tutti i browser Web, in particolare Chrome, hanno tutti i tipi di funzioni e strumenti per tutti gli utenti. Uno di questi è il console di sviluppo . Come suggerisce il nome, questa è una console progettata in modo che i web designer possano vedere come funziona il loro sito Web, conoscere in dettaglio tutto ciò che accade sul frontend e testare diverse modifiche e regolazioni sulla pagina "al volo".

Possiamo aprire questa console in qualsiasi momento semplicemente premendo il tasto Tasto F12 sulla nostra tastiera. Possiamo anche aprire questa console facendo clic con il pulsante destro del mouse in un punto qualsiasi della pagina e scegliendo il " Ispezione ” o con la scorciatoia da tastiera Ctrl + Maiusc + I. Questo si aprirà (per impostazione predefinita, anche se possiamo cambiarlo) nella parte destra della finestra e da lì saremo in grado di vedere un gran numero di opzioni.

Google Chrome - Web come in el móvil 1

Noi essere in grado di vedere l'HTML completo della pagina che abbiamo aperto, tutti gli elementi che la compongono, ognuna delle connessioni che si fanno con il server, le prestazioni della pagina, la memoria che consuma... Assolutamente tutto ciò che è in relazione con il web.

Siamo in grado di aggiungere elementi al codice , modificare qualsiasi punto della pagina, eliminare contenuti che non ci interessano, vedere errori, rilevare possibili colli di bottiglia o problemi che possono incidere negativamente sulla SEO del web… le possibilità sono infinite. Possiamo anche inserire il codice direttamente nella pagina dalla tua console per vedere come risponde.

Ovviamente, dobbiamo tenere a mente che le modifiche che apportiamo da questa console sono locali. Non stiamo hackerando il sito web in questione, né stiamo salvando alcuna modifica. Per ricaricare nuovamente la pagina, dobbiamo semplicemente premere F5 per aggiornarla e tornerà al suo stato originale.

Per chiudere la console possiamo utilizzare nuovamente il tasto F12, oppure semplicemente cliccare sul pulsante di chiusura che troviamo nella parte in alto a destra di questa console di sviluppo.

Cambia il tipo di visualizzazione di un sito web

Uno degli strumenti più interessanti che possiamo trovare all'interno di questa console di sviluppo è la possibilità di cambiare il tipo di dispositivo che simula il caricamento della pagina. Per impostazione predefinita, Chrome utilizzerà le proprietà del nostro PC (ovvero, indicherà al server che siamo un computer e, a seconda della risoluzione e delle proporzioni dello schermo, è mostrerà la pagina corrispondente) per visualizzare la pagina. Ma se il web è reattivo, questo può cambiare.

Per fare ciò, ciò che faremo è aprire gli strumenti di sviluppo che abbiamo appena visto nel punto precedente e vedremo una piccola icona che appare nella parte in alto a sinistra di quella sezione.

Google Chrome - Web come in el móvil 2

Questa icona ci permetterà di cambiare rapidamente il tipo di visualizzazione del browser web. Non appena cliccheremo su di esso saremo in grado di vedere come la dimensione della pagina cambia e il modo in cui vengono caricati gli elementi. In caso contrario, potremmo dover premere F5 per ricaricare.

Google Chrome - Web come in el móvil 3

In alto possiamo vedere una barra da cui possiamo cambiare vari aspetti di questa visualizzazione mobile. Ad esempio, possiamo simulare come apparirebbe il Web su un dispositivo specifico o regolare i livelli di zoom. Possiamo anche specificare manualmente le dimensioni dello schermo, in pixel, se nessuna delle opzioni fornite di default si adatta a ciò che stiamo cercando.

Google Chrome - Web come in el móvil 4

Un pulsante molto interessante che possiamo anche trovare è quello che ci permette di ruotare lo schermo del computer. Quindi possiamo vedere come apparirebbe il Web quando gli utenti lo giocano in modalità orizzontale.

Google Chrome - Web come in el móvil 5

Quando abbiamo eseguito i test desiderati, possiamo semplicemente uscire da questa modalità chiudendo la console degli sviluppatori. Anche in questo caso, potrebbe essere necessario aggiornare la pagina affinché venga nuovamente visualizzata correttamente.

Chrome estensioni

Oltre a utilizzare la console per sviluppatori, potremo farlo anche utilizzando alcune estensioni che possiamo trovare completamente gratuite nel Chrome Store. Alcuni dei migliori sono i seguenti:

Commutatore di visualizzazione mobile

Questa estensione ci consente di passare dalla visualizzazione normale alla visualizzazione mobile con un clic. Quando lo si installa, crea un'icona nella barra degli strumenti, che funge da interruttore a seconda che si voglia attivarlo o disattivarlo. Di default simula un iOS 14, ma possiamo modificarlo e adattare l'estensione a nostro piacimento.


Visualizzatore reattivo

Un altro strumento molto utile per gli sviluppatori per verificare il funzionamento dei loro siti Web responsive. Questo ci permette di vedere più schermi, di diverse dimensioni, contemporaneamente. In questo modo possiamo avere in vista diverse configurazioni e controllare che tutto appaia correttamente e non dia problemi in nessun tipo di dispositivo.


Simulatore mobile per Chrome

Questo strumento ci permette di simulare un gran numero di dispositivi reali (5 Android modelli, 15 Apple, 4 tablet e 4 dispositivi speciali) per poter vedere come appaiono le pagine a seconda del CSS che viene richiesto in base alle dimensioni dello schermo ciascuna.


Tester di web design reattivo

Infine, questa estensione, anche se meno conosciuta, ci consente di testare a fondo come funzionano le visualizzazioni responsive di un sito web in base a diversi parametri. Ci consente di testare con vari cellulari, incluse per impostazione predefinita le risoluzioni e le proporzioni più comuni. Inoltre, questa estensione invia l'agente utente appropriato al server in modo che i risultati siano più accurati. Funziona anche offline, cosa che non tutte le estensioni fanno.