Controlla l'attività di rete

Kayce Basques

Twitter GitHub Glitch

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

Consulta Riferimento della rete se desideri 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:

• Assicurarsi che le risorse vengano effettivamente caricate o scaricate.
• Controllare le proprietà di una singola risorsa, come intestazioni HTTP, contenuti, dimensioni e così via.

Se stai cercando dei modi per migliorare il rendimento del caricamento delle pagine, non iniziare con il riquadro Rete. Esistono molti tipi di problemi di prestazioni del caricamento che non sono correlati all'attività di rete. Inizia dal riquadro 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 per iniziare.

   

   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

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

   

   Figura 3. La console

   Potresti preferire agganciare DevTools 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.

   

   Figura 5. DevTools agganciato alla parte inferiore della finestra

Al momento il riquadro Rete è vuoto. Questo perché DevTools registra l'attività di rete solo quando è aperto e non si verifica 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 in basso è quella che è stata richiesta per ultima.

   Ogni colonna rappresenta le 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, vieni indirizzato al codice sorgente che ha generato la richiesta.
   • Ora. Durata della richiesta.

   • Cascata. Una rappresentazione grafica delle diverse fasi della richiesta. Passa il mouse sopra una struttura a cascata per visualizzarne la suddivisione.

     Nota: Nota il grafico sopra il log di rete è denominato Panoramica. Non lo utilizzerai in questo tutorial, quindi puoi nasconderlo se preferisci. Consulta [Nascondere il riquadro Panoramica][6].

2. Finché gli strumenti DevTools sono aperti, l'attività di rete verrà registrata nel log di rete. Per dimostrarlo, osserva innanzitutto la parte inferiore del Log di rete e annota mentalmente l'ultima attività.

3. Ora, fai clic sul pulsante Ottieni dati nella demo.

4. Osserva di nuovo la parte inferiore del Log di rete. È disponibile una nuova risorsa denominata getstarted.json. Se fai clic sul pulsante Recupera dati, la pagina ha richiesto questo file.

   

   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 anche 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. Viene mostrato il dominio di ogni risorsa.

   

   Figura 8. Attivazione della colonna Dominio

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

Simula una connessione di rete più lenta

La connessione di rete del computer che utilizzi per creare 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 Throttling, che è impostato su Online per impostazione predefinita.

   

   Figura 9. Attivazione della limitazione

2. Seleziona 3G lento.

   

   Figura 10. Selezione del 3G lento

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

   

   Figura 11. Svuota la cache e ricarica manualmente

   Durante le visite ripetute, il browser di solito elabora alcuni file dalla cache, velocizzando il caricamento della pagina. Vuota la cache e il ricaricamento forzato obbliga il browser a passare alla rete per tutte le risorse. Ciò è utile quando vuoi vedere come un nuovo visitatore riceve un caricamento di pagina.

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

Acquisisci screenshot

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

1. Fai clic su Acquisisci screenshot .

2. Ricarica nuovamente la pagina tramite il flusso di lavoro Svuota la cache e ricarica manualmente. Per informazioni su come fare, consulta Simulare una connessione più lenta. Il riquadro Screenshot fornisce miniature che mostrano l'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 l'attività di rete in corso in quel momento.

   

   Figura 13. L'attività di rete in corso 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 saperne di più. 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. La scheda Anteprima

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

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

   

   Figura 16. La scheda Risposta

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

4. Fai clic sulla scheda Tempistiche. È 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 per cercare una determinata stringa o un'espressione regolare nelle intestazioni e nelle risposte HTTP di tutte le risorse.

Ad esempio, supponi di voler verificare se le risorse utilizzano norme sulla cache ragionevoli.

1. Fai clic su Cerca . Il riquadro 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 trovate 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, viene visualizzata la scheda Intestazioni. Se la query è stata trovata nei contenuti, viene visualizzata la scheda Risposta.

   

   Figura 21. Un risultato di ricerca evidenziato nella scheda Intestazioni

4. Chiudi il riquadro Ricerca e la scheda Tempi.

   

   Figura 22. I pulsanti Chiudi

Filtro risorse

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

Figura 23. La barra degli strumenti Filtri

La barra degli strumenti Filtri dovrebbe essere attivata 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 mostrati 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 qualsiasi risorsa 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 filtra main.css. Se altri file corrispondono al pattern, vengono esclusi anch'essi.

   

   Figura 26. Un filtro negativo

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

   

   Figura 27. Un filtro proprietà

   Consulta Richieste di filtro per proprietà per l'elenco completo delle proprietà filtrabili.

5. Cancella il testo dalla 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 solo dei file CSS e JS

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

Consulta Richieste di filtro per altri flussi di lavoro di filtro.

Blocca richieste

Qual è l'aspetto e il comportamento di una pagina quando alcune risorse non sono disponibili? Non funziona del tutto o è ancora funzionante? Blocca le richieste per avere informazioni a riguardo:

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

   

   Figura 30. Il menu Comando

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 confuso perché il foglio di stile principale è stato bloccato. Annota la riga main.css nel log di rete. Il testo in 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 premio.

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