Lo strumento network conditions Chrome è molto utile nel contesto del web development.
In questo articolo vedrai cosa sia questo strumento e come utilizzarlo durante la tua quotidianità.
Indice
Network conditions Chrome: cosa è?
Network conditions è una sezione degli Strumenti per sviluppatori di Chrome, anche noto come Chrome web inspector.
Uno dei modi per accedere a questo strumento è
aprire web inspector -> ctrl + shift + p -> network conditions
Network conditions Chrome: a cosa serve?
Questo strumento attualmente permette di:
- Abilitare e disabilitare la cache del browser
- Impostare l’emulazione delle prestazioni di rete (Network throttling)
- Impostare lo user agent
- Impostare la codifica dei contenuti supportata dal browser
Nel seguito approfondiremo ciascun argomento.
Cache del browser
Il browser in maniera predefinita effettua attività di caching delle richieste di rete effettuate.
In sostanza, ogni volta che una richiesta di rete viene effettuata, il browser memorizza la risposta.
Se la stessa richiesta deve essere eseguita nuovamente, il browser non la inoltrerà al server, ritornando la risposta ottenuta in precedenza.
Grazie al checkbox presente in questa sezione del browser, potrai attivare o disattivare questo meccanismo.
Per ulteriori informazioni in merito al caching, puoi visitare la pagina di Wikipedia dedicata all’argomento.
Network throttling
In questa sezione è possibile emulare il fatto di avere una connessione internet “peggiore” di quella che si ha realmente.
In questo modo, è possibile testare una applicazione web quando deve comunicare con il server in condizioni di cattiva qualità di rete.
Un esempio pratico potrebbe essere quello di una schermata di caricamento dati verso il server tramite chiamata AJAX.
Quando questo caricamento impiega molto tempo, sarebbe utile informare l’utente che il caricamento sta impiegando più tempo del previsto.
In questo scenario, il network throttling è lo strumento perfetto.
Emulare connessione internet “lenta”
Per emulare quindi una connessione poco performante, Chrome mette a disposizione dei profili di Network throttling.
Quelli predefiniti sono:
- Fast 4G
- Slow 4G
- 3G
- Offline
È anche possibile definire dei profili di throttling personalizzati.
Ogni profilo è caratterizzato da:
- Velocità download
- Velocità upload
- Latenza
- Perdita di pacchetti
- Coda pacchetti
- Riordino pacchetti
Per definire un profilo personalizzato è necessario operare i seguenti passi:
aprire web inspector -> ctrl + shift + p -> show throttling
Impostazione user-agent
Lo user-agent è un header HTTP che il browser invia al server per fornire informazioni in merito al browser ed al sistema operativo del Client.
Questo header può quindi essere utilizzato dal server per fornire contenuti personalizzati.
Grazie a questa sezione dello strumento potrai personalizzare il contenuto dell’header HTTP user-agent.
Codifica dei contenuti
Grazie a questa sezione, potrai abilitare e disabilitare alcune tipologie di codifica del contenuto generalmente supportate dai server.
Le principali tipologie gestibili qui sono:
- deflate
- gzip
- brotli (indicato spesso come br)
- zstd
Network conditions Google Chrome: video dimostrativo
In questo video mostro un esempio di utilizzo delle Network conditions in Google Chrome.
Se questo video fosse stato utile, potresti valutare di iscriverti al canale.
Network conditions chrome: approfondimenti
Se sei arrivato fino probabilmente sei interessato a contenuti relativi al web development e JavaScript.
Eccone alcuni:
- window load JavaScript: come funziona?
- Cosa è Angular? Caratteristiche e vantaggi
- Promise JavaScript: definizione ed esempio pratico
- End to end testing: cosa è?
- Come fare una chiamata AJAX ( GET / POST )
- Come clonare oggetto JavaScript: guida ed esempi
Conclusioni
In questo articolo hai avuto modo di scoprire la sezione Network conditions del Chrome web inspector.
