Controlla l'attività di rete

Kayce Basques

Questo è un tutorial pratico di alcune delle funzionalità DevTools più comuni relative all'ispezione dell'attività di rete di una pagina.

Consulta Riferimento di rete se vuoi sfogliare le funzioni.

Continua a leggere o guarda la versione video di questo tutorial:

Quando utilizzare il riquadro Rete

In generale, utilizza il riquadro Rete quando devi assicurarti che le risorse vengano scaricate o caricate come previsto. I casi d'uso più comuni per il riquadro Rete sono:

• Assicurarsi che le risorse vengano effettivamente caricate o scaricate.
• L'analisi delle proprietà di una singola risorsa, come le intestazioni HTTP, il contenuto, le dimensioni e così via.

Se stai cercando modi per migliorare il rendimento del caricamento pagina, non iniziare con il riquadro Rete. Esistono molti tipi di problemi di prestazioni del carico non correlati all'attività di rete. Inizia con il riquadro Lighthouse perché ti fornisce suggerimenti mirati su come migliorare la pagina. Consulta Ottimizzare la velocità del sito web.

Apri il riquadro Rete

Per ottenere il massimo da questo tutorial, apri la demo e prova le funzionalità nella pagina dedicata.

1. Apri la demo introduttiva.

   

   Figura 1. La demo

   Potresti voler spostare la demo in una finestra separata.

   

   Figura 2. La demo in una finestra e questo tutorial in un'altra finestra

2. Apri DevTools premendo Ctrl+Maiusc+J o Comando+Opzione+J (Mac). Si apre il riquadro Console.

   

   Figura 3. La console

   Potresti voler agganciare DevTools in fondo alla finestra.

   

   Figura 4. DevTools agganciato alla parte inferiore della finestra

3. Fai clic sulla scheda Rete. Si apre il riquadro Rete.

   

   Figura 5. DevTools agganciato alla parte inferiore della finestra

Al momento, il riquadro Rete è vuoto. Il motivo è che DevTools registra l'attività di rete solo quando è aperto e non si è verificata alcuna attività di rete da quando hai aperto DevTools.

Log attività di rete

Per visualizzare l'attività di rete causata da una pagina:

1. Ricarica la pagina. Il riquadro Rete registra tutte le attività di rete nel Log di rete.

   

   Figura 6. Il log di rete

   Ogni riga del Log di rete rappresenta una risorsa. Per impostazione predefinita, le risorse sono elencate in ordine cronologico. La risorsa principale è in genere il documento HTML principale. La risorsa inferiore è l'elemento che è stato richiesto per ultimo.

   Ogni colonna rappresenta informazioni su una risorsa. La figura 6 mostra le colonne predefinite:

   • Stato. Il codice di risposta HTTP.
   • Tipo. Il tipo di risorsa.
   • Iniziatore. Che cosa ha causato la richiesta di una risorsa. Facendo clic su un link nella colonna Iniziatore verrà visualizzato il codice sorgente che ha generato la richiesta.
   • Ora. La durata della richiesta.
   • Struttura a cascata. Una rappresentazione grafica delle diverse fasi della richiesta. Passa il mouse sopra una cascata per visualizzarne la suddivisione.

2. Se DevTools è aperto, l'attività di rete verrà registrata nel log di rete. Per dimostrarlo, prima guarda la parte inferiore del Log di rete e prendi mentalmente nota dell'ultima attività.

3. A questo punto, fai clic sul pulsante Ottieni dati nella demo.

4. Cerca di nuovo nella parte inferiore del Log di rete. C'è una nuova risorsa chiamata getstarted.json. Il clic sul pulsante Ottieni dati ha provocato la richiesta di questo file da parte della pagina.

   

   Figura 7. Una nuova risorsa nel log di rete

Mostra altre informazioni

Le colonne del Log di rete sono configurabili. Puoi nascondere le colonne che non utilizzi. Esistono inoltre molte colonne nascoste per impostazione predefinita che potrebbero esserti utili.

1. Fai clic con il pulsante destro del mouse sull'intestazione della tabella Log di rete e seleziona Dominio. Ora è mostrato il dominio di ogni risorsa.

   

   Figura 8. Abilitazione della colonna Dominio

Simula una connessione di rete più lenta

La connessione di rete del computer che utilizzi per creare i siti è probabilmente più veloce delle connessioni di rete dei dispositivi mobili dei tuoi utenti. Limitando la pagina, puoi farti un'idea migliore di quanto tempo impiega una pagina per caricarsi su un dispositivo mobile.

1. Fai clic sul menu a discesa Limitazione, che per impostazione predefinita è impostato su Online.

   

   Figura 9. Attivazione della limitazione

2. Seleziona 3G lento.

   

   Figura 10. Selezione di 3G lento

3. Premi a lungo Ricarica , quindi seleziona Svuota la Cache e Ricarica manualmente.

   

   Figura 11. Svuota la cache ed esegui il ricaricamento forzato

   Nelle visite ripetute, in genere il browser pubblica alcuni file dalla cache, velocizzando il caricamento della pagina. Svuota la cache e ricarica manualmente forza il browser ad accedere alla rete per tutte le risorse. Ciò è utile per vedere l'esperienza di caricamento di una pagina da parte di un nuovo visitatore.

Acquisisci screenshot

Gli screenshot ti consentono di visualizzare l'aspetto di una pagina nel tempo durante il caricamento.

1. Fai clic su Acquisisci screenshot .

2. Ricarica di nuovo la pagina tramite il flusso di lavoro Svuota la cache e ricarica manualmente. Consulta Simulare una connessione più lenta se hai bisogno di un promemoria su come eseguire questa operazione. Il riquadro Screenshot fornisce miniature dell'aspetto della pagina in vari punti durante il processo di caricamento.

   

   Figura 12. Screenshot del caricamento pagina

3. Fai clic sulla prima miniatura. DevTools mostra quale attività di rete si verificava in quel momento.

   

   Figura 13. L'attività di rete che si è verificata durante il primo screenshot

4. Fai di nuovo clic su Acquisisci screenshot per chiudere il riquadro Screenshot.

5. Ricarica la pagina.

Esaminare i dettagli di una risorsa

Fai clic su una risorsa per scoprire di più al riguardo. Prova subito:

1. Fai clic su getstarted.html. Viene visualizzata la scheda Intestazioni. Utilizza questa scheda per esaminare le intestazioni HTTP.

   

   Figura 14. La scheda Intestazioni

2. Fai clic sulla scheda Anteprima. Viene mostrato un rendering di base del codice HTML.

   

   Figura 15. Scheda Anteprima

   Questa scheda è utile quando un'API restituisce un codice di errore in HTML ed è più facile leggere l'HTML sottoposto a rendering rispetto al codice sorgente HTML oppure durante l'ispezione delle immagini.

3. Fai clic sulla scheda Risposta. Viene visualizzato il codice sorgente HTML.

   

   Figura 16. La scheda Risposta

4. Fai clic sulla scheda Tempi. Viene mostrata un'analisi dell'attività di rete per questa risorsa.

   

   Figura 17. La scheda Tempi

5. Fai clic su Chiudi per visualizzare di nuovo il log di rete.

   

   Figura 18. Pulsante Chiudi

Cerca intestazioni e risposte della rete

Utilizza il riquadro Cerca quando devi cercare nelle intestazioni e nelle risposte HTTP di tutte le risorse per una determinata stringa o un'espressione regolare.

Ad esempio, supponi di voler verificare se le risorse utilizzano criteri di memorizzazione nella cache ragionevoli.

1. Fai clic su Cerca . Il riquadro di ricerca si apre a sinistra del log di rete.

   

   Figura 19. Riquadro di ricerca

2. Digita Cache-Control e premi Invio. Il riquadro di ricerca elenca tutte le istanze di Cache-Control che trova nelle intestazioni o nei contenuti delle risorse.

   

   Figura 20. Risultati di ricerca per Cache-Control

3. Fai clic su un risultato per visualizzarlo. Se la query è stata trovata in un'intestazione, si apre la scheda Intestazioni. Se la query è stata trovata nei contenuti, si apre la scheda Risposta.

   

   Figura 21. Un risultato di ricerca evidenziato nella scheda Intestazioni

4. Chiudi il riquadro di ricerca e la scheda Tempi.

   

   Figura 22. Pulsanti Chiudi

Filtro risorse

DevTools offre numerosi flussi di lavoro per filtrare le risorse che non sono pertinenti all'attività in questione.

Figura 23. Barra degli strumenti Filtri

La barra degli strumenti Filtri dovrebbe essere attiva per impostazione predefinita. In caso contrario:

1. Fai clic su Filtra per visualizzarlo.

Filtra per stringa, espressione regolare o proprietà

La casella di testo Filtro supporta molti tipi diversi di filtri.

1. Digita png nella casella di testo Filtro. Vengono visualizzati solo i file che contengono il testo png. In questo caso, gli unici file che corrispondono al filtro sono le immagini PNG.

   

   Figura 24. Un filtro stringa

2. Digita /.*\.[cj]s+$/. DevTools filtra tutte le risorse con un nome file che non termina con j o c seguito da 1 o più caratteri s.

   

   Figura 25. Un filtro basato su espressioni regolari

3. Digita -main.css. DevTools esclude main.css. Eventuali altri file corrispondenti al pattern verranno esclusi anch'essi.

   

   Figura 26. Un filtro per esclusione

4. Digita domain:raw.githubusercontent.com nella casella di testo Filtro. DevTools esclude qualsiasi risorsa con un URL che non corrisponde a questo dominio.

   

   Figura 27. Un filtro proprietà

   Per l'elenco completo delle proprietà filtrabili, consulta Filtrare le richieste per proprietà.

5. Deseleziona qualsiasi testo nella casella di testo Filtro.

Filtra per tipo di risorsa

Per concentrarti su un determinato tipo di file, ad esempio i fogli di stile:

1. Fai clic su CSS. Tutti gli altri tipi di file vengono esclusi.

   

   Figura 28. Visualizzazione dei soli file CSS

2. Per visualizzare anche gli script, tieni premuto Ctrl o Comando (Mac) e fai clic su JS.

   

   Figura 29. Visualizzazione dei soli file CSS e JS

3. Fai clic su Tutti per rimuovere i filtri e visualizzare di nuovo tutte le risorse.

Per altri flussi di lavoro di filtro, consulta Richieste di filtro.

Blocca richieste

Qual è l'aspetto e il comportamento di una pagina quando alcune risorse non sono disponibili? Non funziona completamente o è ancora parzialmente funzionante? Blocca le richieste per scoprirlo:

1. Premi Ctrl+Maiusc+P o Comando+Maiusc+P (Mac) per aprire il menu dei comandi.

   

   Figura 30. Menu dei comandi

2. Digita block, seleziona Mostra blocco richieste e premi Invio.

   

   Figura 31. Mostra blocco richieste

3. Fai clic su Aggiungi pattern .

4. Digita main.css.

   

   Figura 32. Blocco di main.css in corso...

5. Fai clic su Aggiungi.

6. Ricarica la pagina. Come previsto, lo stile della pagina è leggermente inadeguato perché il foglio di stile principale è stato bloccato. Prendi nota della riga main.css nel log di rete. Il testo rosso indica che la risorsa è stata bloccata.

   

   Figura 33. L'utente main.css è stato bloccato

7. Deseleziona la casella di controllo Abilita blocco delle richieste.

Passaggi successivi

Congratulazioni, hai completato il tutorial. Fai clic su Dispense Award per ricevere il tuo premio.

Consulta il riferimento di rete per scoprire altre funzionalità DevTools relative all'ispezione dell'attività di rete.