Controlla l'attività di rete

Kayce Basques

Questo è un tutorial pratico su alcune delle funzionalità di DevTools più utilizzate per esaminare l'attività di rete di una pagina.

Consulta la documentazione di riferimento della rete se vuoi sfogliare le funzionalità.

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:

• Assicurati 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 delle pagine, non iniziare con il riquadro Rete. Esistono molti tipi di problemi di prestazioni di caricamento 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 della demo.

1. Apri la demo Inizia.

   

   Ti consigliamo di spostare la demo in una finestra separata.

   

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

   

   Potresti preferire agganciare DevTools alla parte inferiore della finestra.

   

3. Fai clic sulla scheda Rete. Viene visualizzato il riquadro Rete.

   

Al momento il riquadro Rete è vuoto. Questo accade perché DevTools registra l'attività di rete solo quando è aperto e non è avvenuta 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.

   

   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 è quella richiesta per ultima.

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

   • Status: il codice di risposta HTTP.
   • Tipo: il tipo di risorsa.
   • Iniziatore: che cosa ha causato la 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 tramite la rete.
   • Tempo: il tempo necessario per la richiesta.
   Nota: il grafico sopra il log di rete si chiama Panoramica. Non lo utilizzerai in questo tutorial, quindi puoi nasconderlo se preferisci. Consulta l'articolo Nascondere il canale Panoramica.

2. Finché DevTools è aperto, registra l'attività di rete nel Log di rete. Per dimostrare questo, guarda prima la parte inferiore del Log di rete e prendi nota dell'ultima attività.

3. Ora fai clic sul pulsante Get Data (Recupero dati) nella demo.

4. Guarda di nuovo la parte inferiore del Log di rete. Esiste una nuova risorsa chiamata getstarted.json. Il clic sul pulsante Ricevi dati ha causato la richiesta di questo file da parte della pagina.

   

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 tasto destro del mouse sull'intestazione della tabella Log di rete e seleziona Dominio. Viene visualizzato il dominio di ogni risorsa.

   

Suggerimento: puoi visualizzare l'URL completo di una risorsa passando il mouse sopra la relativa cella nella colonna Nome.

Simulare 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 del tempo necessario per il caricamento di una pagina su un dispositivo mobile.

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

   

2. Seleziona 3G.

   

3. Tieni premuto Ricarica Aggiorna, quindi 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 della pagina. Svuota la cache e ricarica manualmente forza il browser ad accedere alla rete per tutte le risorse. Ciò è utile per vedere in che modo un visitatore alla prima visita viene caricato una pagina.

   Nota: il flusso di lavoro Svuota cache e ricarica forzata è disponibile solo quando DevTools è aperto.

Acquisisci screenshot

Gli screenshot catturano l'aspetto della tua pagina in momenti diversi durante il caricamento e indicano quali risorse vengono caricate a ciascun 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 per un promemoria su come eseguire questa operazione. La scheda Screenshot fornisce miniature dell'aspetto della pagina in vari punti durante il processo di caricamento.

   

4. Fai clic sulla prima miniatura. DevTools mostra l'attività di rete in corso in quel momento.

   

5. Attiva/disattiva la casella di controllo Screenshot per chiudere la scheda Screenshot.

6. Ricarica di nuovo la pagina.

Controllare 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 controllare 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 il codice HTML visualizzato rispetto al codice sorgente HTML o quando ispezioni le immagini.

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

   

   Suggerimento: quando un file viene minimizzato, facendo clic sul pulsante Formato data_object nella parte inferiore della scheda Risposta, i contenuti del file vengono riformattati per consentirne la leggibilità.

4. Fai clic sulla scheda Autore per visualizzare una struttura ad albero che mappa la catena di iniziatori della richiesta.

   

5. Fai clic sulla scheda Tempi per visualizzare un'analisi dettagliata 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 una determinata stringa o espressione regolare nelle intestazioni e nelle risposte HTTP di tutte le risorse.

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

1. Fai clic su Cerca . La scheda Ricerca si apre a sinistra del log di rete.

   

2. Digita Cache-Control e premi Invio. La scheda Ricerca 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 fornisce numerosi flussi di lavoro per filtrare le risorse non pertinenti all'attività in questione.

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 Filtra 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 corrispondenti 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 esclude main.css. Se qualsiasi altro file corrispondesse al pattern, anche questo verrebbe escluso.

   

4. Digita domain:raw.githubusercontent.com nella casella di testo Filtro. DevTools esclude 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 esclusi.

   

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

   

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

Per altri flussi di lavoro di filtro, consulta Filtra le richieste.

Blocca richieste

Aspetto e comportamento di una pagina quando alcune delle sue risorse non sono disponibili Non funziona completamente o è ancora parzialmente funzionale? 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 motivo.

4. Digita main.css.

   

5. Fai clic su Aggiungi.

6. Ricarica la pagina. Come previsto, lo stile della pagina è leggermente disordinato 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 Attiva il blocco delle richieste.

Per scoprire altre funzionalità di DevTools correlate all'ispezione dell'attività di rete, consulta la pagina Riferimento di rete.