Come visualizzare in anteprima il tuo sito Web su diversi dispositivi utilizzando Google Chrome

Quando crei un sito web, vuoi che sia reattivo e si adatti alle diverse dimensioni dello schermo. Un modo per verificarlo è utilizzare gli strumenti di sviluppo integrati di Google Chrome.

DevTools di Chrome ti consente di eseguire il debug di diversi aspetti del tuo sito web. Ciò include la modifica e l'anteprima del codice sorgente HTML e CSS. Consente inoltre di eseguire il debug del codice JavaScript lato client e di visualizzare il traffico di rete.

DevTools ha anche un'opzione per visualizzare in anteprima il tuo sito Web su diversi dispositivi. Ciò include diversi tipi di dispositivi mobili, iPad, tablet e altro ancora.

Per aprire la barra degli strumenti del dispositivo su Google Chrome, devi aprire il file Finestra Strumenti per sviluppatori di Chrome:

1. Apri un sito web.
2. Fare clic con il tasto destro sulla pagina e fare clic su Ispezionare.
3. Si aprirà la finestra di Chrome DevTools. Potrebbe aprirsi sul lato o nella parte inferiore del browser o come una nuova finestra.
4. In alto a sinistra della finestra sono presenti due icone. Fare clic sull'icona che mostra più dispositivi di dimensioni diverse.
   instagram viewer
5. Lo schermo cambierà per mostrarti come sarebbe il sito web su un dispositivo mobile.

Come passare da un dispositivo all'altro

Utilizza il menu a discesa nella parte superiore della barra degli strumenti del dispositivo per passare da un dispositivo all'altro.

1. La parte superiore della barra degli strumenti mostrerà il tipo di dispositivo su cui stai attualmente visualizzando il tuo sito web. Fare clic sul menu a discesa per scegliere un altro dispositivo dall'elenco.
2. Invece di scegliere un dispositivo esistente, puoi scegliere di visualizzare il sito Web in modalità reattiva. Fare clic sul menu a discesa e selezionare il reattivo opzione.
3. Accanto al menu a discesa, puoi anche scegliere di inserire una larghezza e un'altezza personalizzate per un dispositivo.
4. Invece di digitare una larghezza e un'altezza, puoi anche fare clic e trascinare gli angoli della finestra per regolare le dimensioni.

Come aggiungere un dispositivo personalizzato

Se desideri salvare una larghezza e un'altezza personalizzate, puoi aggiungere un dispositivo personalizzato. La barra degli strumenti del dispositivo mostrerà quindi il tuo nuovo dispositivo nell'elenco a discesa dei dispositivi.

1. Fare clic sul menu a discesa che elenca tutti i dispositivi.
2. Clicca su Modificare.
3. Sotto la barra laterale Impostazioni, assicurati di avere il Dispositivi scheda selezionata. Qui puoi anche visualizzare un elenco di più dispositivi tra cui scegliere.
4. Clicca su Aggiungi dispositivo personalizzato.
5. Immettere un nome, una larghezza e un'altezza per il dispositivo. Assicurati di selezionare anche il tipo di dispositivo, ad esempio se si tratta di un dispositivo mobile o desktop. Se espandi il Suggerimenti per il client dell'agente utente opzione, puoi aggiungere altri dettagli come il modello, la marca o la versione del dispositivo.
6. Clicca su Aggiungere.
7. Torna al menu a discesa che elenca tutti i dispositivi. Vedrai il tuo nuovo dispositivo personalizzato nell'elenco.
8. Puoi modificare nuovamente questi dettagli in un secondo momento tornando alla pagina del dispositivo personalizzato. Clicca sul modificare accanto al nome del dispositivo per avviare la modifica.

È molto utile poter visualizzare in anteprima il tuo sito Web su diversi dispositivi e dimensioni dello schermo, per diversi motivi.

Innanzitutto, puoi testare le prestazioni del tuo sito Web su diversi dispositivi. Alcuni cellulari potrebbero avere velocità di rete più elevate o limitazione della CPU rispetto ad altri.

La barra degli strumenti del dispositivo consente di alternare tra le diverse opzioni di velocità di rete. Ciò ti consente di testare la velocità di qualsiasi chiamata a un server o di testare il caricamento e il rendering dei dati sul tuo sito web.

Inoltre, puoi anche visualizzare l'aspetto del design su un particolare dispositivo, dal punto di vista dell'interfaccia utente. Se stai usando Query sui media CSS, puoi utilizzare questo strumento per verificare che funzionino come previsto.

Puoi utilizzare la finestra DevTools di Google Chrome per testare come il tuo sito web si adatta alle diverse dimensioni dello schermo e per assicurarti che il tuo sito web sia reattivo. Puoi anche usarlo per testare le prestazioni del tuo sito Web e se le tue query multimediali funzionano come previsto.

Puoi anche utilizzare DevTools di Google Chrome per altri scopi. Puoi usarlo per eseguire il debug di eventuali problemi CSS modificando il CSS nella scheda Stili della finestra Elemento. Ciò ti consente di visualizzare immediatamente eventuali modifiche CSS, il che può accelerare il flusso di lavoro di codifica.

Come utilizzare Google Chrome per eseguire il debug di CSS

Leggi Avanti