Controlla l'attività di rete

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.

    La demo

    Figura 1. La demo

    Potresti voler spostare la demo in una finestra separata.

    La demo in una finestra e questo tutorial in un'altra finestra

    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.

    La console

    Figura 3. La console

    Potresti voler agganciare DevTools in fondo alla finestra.

    DevTools agganciato alla parte inferiore della finestra

    Figura 4. DevTools agganciato alla parte inferiore della finestra

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

    DevTools agganciato alla parte inferiore della finestra

    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.

    Il 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.

    Una nuova risorsa nel log di rete

    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.

    Abilitazione della colonna Dominio

    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.

    Attivazione della limitazione

    Figura 9. Attivazione della limitazione

  2. Seleziona 3G lento.

    Selezione di 3G lento

    Figura 10. Selezione di 3G lento

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

    Svuota la cache ed esegui il ricaricamento forzato

    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 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.

    Screenshot del caricamento pagina

    Figura 12. Screenshot del caricamento pagina

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

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

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

  4. Fai di nuovo clic su Acquisisci screenshot 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.

    La scheda Intestazioni

    Figura 14. La scheda Intestazioni

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

    Scheda Anteprima

    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.

    La scheda Risposta

    Figura 16. La scheda Risposta

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

    La scheda Tempi

    Figura 17. La scheda Tempi

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

    Pulsante Chiudi

    Figura 18. Pulsante Chiudi

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 Cerca. Il riquadro di ricerca si apre a sinistra del log di rete.

    Riquadro di ricerca

    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.

    Risultati di ricerca per Cache-Control

    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.

    Un risultato di ricerca evidenziato nella scheda Intestazioni

    Figura 21. Un risultato di ricerca evidenziato nella scheda Intestazioni

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

    Pulsanti Chiudi

    Figura 22. Pulsanti Chiudi

Filtro risorse

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

Barra degli strumenti Filtri

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 Filtro 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.

    Un filtro stringa

    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.

    Un filtro basato su espressioni regolari

    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.

    Un filtro per esclusione

    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.

    Un filtro proprietà

    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.

    Visualizzazione dei soli file CSS

    Figura 28. Visualizzazione dei soli file CSS

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

    Visualizzazione dei soli file CSS e 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.

    Menu dei comandi

    Figura 30. Menu dei comandi

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

    Mostra blocco richieste

    Figura 31. Mostra blocco richieste

  3. Fai clic su Aggiungi pattern Aggiungi sequenza.

  4. Digita main.css.

    Blocco di 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.

    main.css è stato bloccato

    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.