Controlla l'attività di rete

Kayce Basques

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

Consulta Riferimento alla rete se preferisci sfogliare le funzionalità.

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

Quando utilizzare il riquadro Rete

In generale, utilizza il riquadro Network 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.
• Ispezione delle proprietà di una singola risorsa, ad esempio intestazioni HTTP, contenuti, dimensioni e così via.

Se stai cercando modi per migliorare le prestazioni di caricamento pagina, non iniziare dal riquadro Rete. Esistono molti tipi di problemi di prestazioni di caricamento che non sono correlati all'attività di rete. Inizia con il pannello Lighthouse, perché ti offre suggerimenti mirati su come migliorare la tua 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 demo.

1. Apri la demo Inizia.

   

   Potresti preferire spostare la demo in una finestra separata.

   

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

   

   Potresti preferire ancorare DevTools alla parte inferiore della finestra.

   

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

   

Al momento il riquadro Rete è vuoto. Questo perché 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 tutta l'attività di rete nel 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 in basso è l'ultima richiesta.

   Ogni colonna rappresenta informazioni su una risorsa. Le colonne predefinite sono:

   • Stato: il codice di risposta HTTP.
   • Tipo: il tipo di risorsa.
   • Attivatore: la causa della richiesta di una risorsa. Se fai clic su un link nella colonna Iniziatore, viene visualizzato il codice sorgente che ha causato la richiesta.
   • Dimensioni: quantità di risorse trasferite sulla rete.
   • Tempo: la durata della richiesta.

2. Finché DevTools è aperto, registra l'attività di rete nel log di rete. Per dimostrarlo, guarda prima in fondo al Log di rete e prendi nota dell' ultima attività.

3. Ora fai clic sul pulsante Recupera dati nella demo.

4. Guarda di nuovo in fondo al Log di rete. È disponibile una nuova risorsa chiamata getstarted.json. Quando hai fatto clic sul pulsante Scarica dati, la pagina ha richiesto questo file.

   

Mostra altre informazioni

Le colonne del Log di rete sono configurabili. Puoi nascondere le colonne che non utilizzi. Sono presenti anche molte colonne nascoste per impostazione predefinita che potresti trovare utili.

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

   

Simulare una connessione di rete più lenta

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

1. Fai clic sul menu a discesa Limitazione, impostato su Nessuna limitazione per impostazione predefinita.

   

2. Seleziona 3G.

   

3. Tieni premuto Ricarica Aggiorna e poi seleziona Svuota la cache e ricarica manualmente.

   

   Durante le visite ripetute, il browser in genere pubblica alcuni file dalla cache, il che velocizza il caricamento pagina. Svuota la cache e ricarica manualmente costringe il browser a connettersi alla rete per tutte le risorse. Questo è utile quando vuoi vedere come un visitatore che visita una pagina per la prima volta la carica.

Acquisire screenshot

Gli screenshot mostrano l'aspetto della pagina in momenti diversi durante il caricamento e indicano le risorse caricate a ogni intervallo.

Per acquisire screenshot:

1. Fai clic su Impostazioni di rete Impostazioni.

2. Attiva la casella di controllo Screenshot check_box.

3. Ricarica di nuovo la pagina utilizzando il flusso di lavoro Svuota la cache e ricarica manualmente. Consulta l'articolo Simulare una connessione più lenta se hai bisogno di un promemoria su come eseguire questa operazione. La scheda Screenshot fornisce le miniature dell'aspetto della pagina in vari momenti della procedura di caricamento.

   

4. Fai clic sulla prima miniatura. DevTools mostra l'attività di rete che si è verificata in quel momento.

   

5. Seleziona la casella di controllo Screenshot per chiudere la scheda Screenshot.

6. Ricarica di nuovo la pagina.

Esaminare i dettagli di una risorsa

Fai clic su una risorsa per saperne di più. Prova subito:

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

   

2. Fai clic sulla scheda Anteprima per visualizzare un rendering HTML di base.

   

   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 o quando si ispezionano le immagini.

3. Fai clic sulla scheda Risposta per visualizzare il codice sorgente HTML.

   

4. Fai clic sulla scheda Iniziatore per visualizzare un albero che mappa la catena di iniziatori della richiesta.

   

5. Fai clic sulla scheda Tempistica per visualizzare una suddivisione dell'attività di rete per questa risorsa.

   

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

   

Intestazioni e risposte della rete di ricerca

Utilizza la scheda Cerca quando devi cercare negli header e nelle risposte HTTP di tutte le risorse una determinata stringa o espressione regolare.

Ad esempio, supponiamo che tu voglia verificare se le tue risorse utilizzano policy di cache ragionevoli.

1. Fai clic su Cerca Cerca nella barra delle azioni del riquadro o premi Comando + F (macOS) o Controllo + F (Windows / Linux).

   Si apre la scheda Ricerca a sinistra del Log di rete.

   

2. Digita Cache-Control e premi Invio. La scheda Cerca elenca tutte le istanze di Cache-Control che trova nelle intestazioni o nei contenuti delle risorse.

   

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.

   

4. Chiudi la scheda Ricerca e la scheda Intestazioni.

   

Filtro risorse

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

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

1. Fai clic su Filtra filter_alt per visualizzarlo.

Filtra per stringa, espressione regolare o proprietà

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

1. Digita png nella casella di immissione 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.

   

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

   

3. Digita -main.css DevTools filtra main.css. Se un altro file corrisponde al pattern, verrà filtrato.

   

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

   

   Consulta Filtrare le richieste per proprietà per l'elenco completo delle proprietà filtrabili.

5. Cancella il testo dalla casella di immissione 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 filtrati.

   

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

   

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

Consulta Filtrare le richieste per altri flussi di lavoro di filtraggio.

Blocca richieste

Qual è l'aspetto e il comportamento di una pagina quando alcune delle sue risorse non sono disponibili? Il dispositivo non funziona completamente o è ancora in parte funzionante? Blocca le richieste per scoprire:

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

   

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

   

3. Fai clic sul pulsante Aggiungi pattern.

4. Digita main.css

   

5. Fai clic su Aggiungi.

6. Ricarica la pagina. Come previsto, lo stile della pagina è leggermente rovinato 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 è bloccata.

   

7. Deseleziona la casella di controllo Abilita blocco richieste.

Per scoprire altre funzionalità di DevTools relative all'ispezione dell'attività di rete, consulta la documentazione di riferimento sulla rete.