Riferimento per le funzionalità di rete

Scopri nuovi modi per analizzare il caricamento della pagina in questo riferimento completo delle funzionalità di analisi di rete degli strumenti di sviluppo di Chrome.

Registrare le richieste di rete

Per impostazione predefinita, DevTools registra tutte le richieste di rete nel riquadro Rete, purché DevTools sia aperto.

Interrompi la registrazione delle richieste di rete

Per interrompere le richieste di registrazione:

• Fai clic su Interrompi la registrazione dei log di rete nel riquadro Rete. Diventa grigio per indicare che DevTools non registra più le richieste.
• Premi Comando + E (Mac) o Ctrl + E (Windows, Linux) mentre il riquadro Rete è attivo.

Cancella richieste

Fai clic su Cancella nel riquadro Rete per cancellare tutte le richieste dalla tabella Richieste.

Salva le richieste tra i caricamenti pagina

Per salvare le richieste durante i caricamenti di pagina, seleziona la casella di controllo Conserva log nel riquadro Rete. DevTools salva tutte le richieste finché non disattivi Conserva log.

Acquisire screenshot durante il caricamento della pagina

Acquisisci screenshot per analizzare ciò che vedono gli utenti mentre attendono il caricamento della pagina.

Per attivare gli screenshot, apri Impostazioni nel riquadro Rete e seleziona Acquisisci screenshot.

Ricarica la pagina mentre il riquadro Rete è attivo per acquisire gli screenshot.

Una volta acquisiti, puoi interagire con gli screenshot nei seguenti modi:

• Passa il mouse sopra uno screenshot per visualizzare il punto in cui è stato acquisito. Una linea gialla viene visualizzata nella sequenza temporale della panoramica.
• Fai clic sulla miniatura di uno screenshot per filtrare le richieste successive all'acquisizione dello screenshot.
• Fai doppio clic su una miniatura per ingrandirla.

Ripeti richiesta XHR

Per riprodurre una richiesta XHR, esegui una delle seguenti operazioni nella tabella Richieste:

• Seleziona la richiesta e premi R.
• Fai clic con il tasto destro del mouse sulla richiesta e seleziona Riproduci XHR.

Modificare il comportamento di caricamento

Emula un visitatore alla prima visita disattivando la cache del browser

Per emulare l'esperienza di un utente che visita il tuo sito per la prima volta, seleziona la casella di controllo Disattiva cache. DevTools disattiva la cache del browser. In questo modo viene emulata in modo più preciso l'esperienza di un nuovo utente, perché le richieste vengono gestite dalla cache del browser nelle visite ripetute.

Disattiva la cache del browser dal riquadro Condizioni di rete

Se vuoi disattivare la cache mentre lavori in altri riquadri di DevTools, utilizza il riquadro Condizioni di rete.

1. Fai clic sull'icona per aprire il riquadro Condizioni di rete.
2. Seleziona o deseleziona la casella di controllo Disattiva cache.

Svuotare manualmente la cache del browser

Per cancellare manualmente la cache del browser in qualsiasi momento, fai clic con il tasto destro del mouse in un punto qualsiasi della tabella Richieste e seleziona Cancella cache del browser.

Emula la modalità offline

Esiste una nuova classe di app web, chiamate app web progressive, che possono funzionare offline con l'aiuto dei service worker. Quando crei questo tipo di app, è utile poter simulare rapidamente un dispositivo senza connessione dati.

Per simulare un'esperienza di rete completamente offline, seleziona Offline dal menu a discesa Limitazione della rete accanto alla casella di controllo Disattiva cache.

DevTools mostra un'icona di avviso accanto alla scheda Rete per ricordarti che la modalità offline è attiva.

Emula connessioni di rete lente

Per emulare 4G veloce, 4G lento o 3G, seleziona il preset corrispondente dal menu a discesa Limitazione nella barra delle azioni in alto.

DevTools mostra un'icona di avviso accanto al riquadro Rete per ricordarti che la limitazione è attiva.

Crea profili di limitazione personalizzati

Oltre ai preset, come 4G lento o veloce, puoi anche aggiungere profili di limitazione personalizzati:

1. Apri il menu Limitazione e seleziona Personalizzata > Aggiungi….
2. Configura un nuovo profilo di limitazione come descritto in Impostazioni Impostazioni > Limitazione.

3. Nel riquadro Rete, seleziona il nuovo profilo dal menu a discesa Limitazione.

   

DevTools mostra un'icona di avviso accanto al riquadro Rete per ricordarti che la limitazione è attiva.

Limitare le connessioni WebSocket

Oltre alle richieste HTTP, DevTools limita le connessioni WebSocket a partire dalla versione 99.

Per osservare la limitazione di WebSocket:

1. Avvia una nuova connessione, ad esempio utilizzando uno strumento di test.
2. Nel riquadro Rete, seleziona Nessuna limitazione e invia un messaggio tramite la connessione.
3. Crea un profilo di limitazione personalizzato molto lento, ad esempio 10 kbit/s. Un profilo lento ti aiuterà a notare la differenza.
4. Nel riquadro Rete, seleziona il profilo e invia un altro messaggio.
5. Attiva/disattiva il filtro WS, fai clic sul nome della connessione, apri la scheda Messaggi e controlla la differenza di tempo tra i messaggi inviati e quelli di risposta con e senza limitazione. Ad esempio:

Emula connessioni di rete lente dal riquadro delle condizioni di rete

Se vuoi limitare la connessione di rete mentre lavori in altri riquadri di DevTools, utilizza il riquadro Condizioni di rete.

1. Fai clic sull'icona per aprire il riquadro Condizioni di rete.
2. Seleziona una velocità di connessione dal menu Limitazione della rete.

Cancellare manualmente i cookie del browser

Per cancellare manualmente i cookie del browser in qualsiasi momento, fai clic con il tasto destro del mouse in un punto qualsiasi della tabella Richieste e seleziona Cancella cookie del browser.

Esegui l'override delle intestazioni della risposta HTTP

Consulta Eseguire l'override dei file e delle intestazioni delle risposte HTTP in locale.

Eseguire l'override dello user agent

Per eseguire l'override manuale dello user agent:

1. Fai clic sull'icona per aprire il riquadro Condizioni di rete.
2. Deseleziona Seleziona automaticamente.
3. Scegli un'opzione per lo user agent dal menu o inseriscine una personalizzata nella casella.

Cerca richieste

Per cercare nelle intestazioni di richiesta, nei payload e nelle risposte:

1. Premi la seguente scorciatoia per aprire la scheda Cerca a destra:

   • Su macOS, Comando + F.
   • Su Windows o Linux, Controllo + F.

2. Nella scheda Cerca, inserisci la query e premi Invio. Se vuoi, fai clic su match_case o regular_expression per attivare rispettivamente la distinzione tra maiuscole e minuscole o le espressioni regolari.

3. Fai clic su uno dei risultati di ricerca. Il riquadro Rete evidenzia in giallo la richiesta corrispondente. Inoltre, il riquadro apre anche la scheda Intestazioni o Risposta ed evidenzia la stringa corrispondente, se presente.

Per aggiornare i risultati di ricerca, fai clic su Aggiorna Aggiorna. Per cancellare i risultati, fai clic su Blocca Cancella.

Per saperne di più su tutti i modi in cui puoi eseguire ricerche in DevTools, consulta Ricerca: trova testo in tutte le risorse caricate.

Richieste di filtro

Filtrare le richieste per proprietà

Utilizza la casella Filtra per filtrare le richieste in base a proprietà come il dominio o le dimensioni della richiesta.

Se non riesci a vedere la casella, è probabile che la barra Filtri sia nascosta. Vedi Nascondere la barra dei filtri.

Per invertire il filtro, seleziona la casella di controllo Inverti accanto alla casella Filtro.

Puoi utilizzare più proprietà contemporaneamente separandole con uno spazio. Ad esempio, mime-type:image/gif larger-than:1K mostra tutte le GIF più grandi di un kilobyte. Questi filtri per più proprietà sono equivalenti alle operazioni AND. Le operazioni OR non sono supportate.

Di seguito è riportato un elenco completo delle proprietà supportate.

• cookie-domain. Mostra le risorse che impostano un dominio cookie specifico.
• cookie-name. Mostra le risorse che impostano un nome cookie specifico.
• cookie-path. Mostra le risorse che impostano un percorso cookie specifico.
• cookie-value. Mostra le risorse che impostano un valore di cookie specifico.
• domain. Mostra solo le risorse del dominio specificato. Puoi utilizzare un carattere jolly (*) per includere più domini. Ad esempio, *.com mostra le risorse di tutti i nomi di dominio che terminano con .com. DevTools mostra un menu a discesa di completamento automatico con tutti i domini che ha rilevato.
• has-overrides. Mostra le richieste che hanno sostituito content, headers, eventuali sostituzioni (yes) o nessuna sostituzione (no). Puoi aggiungere la colonna Ha sostituzioni corrispondente alla tabella delle richieste.
• has-response-header. Mostra le risorse che contengono l'intestazione della risposta HTTP specificata. DevTools compila il menu a discesa del completamento automatico con tutte le intestazioni di risposta che ha riscontrato.
• is. Utilizza is:running per trovare risorse WebSocket.
• larger-than. Mostra le risorse più grandi delle dimensioni specificate, in byte. L'impostazione di un valore di 1000 equivale all'impostazione di un valore di 1k.
• method. Mostra le risorse recuperate tramite un tipo di metodo HTTP specificato. DevTools compila il menu a discesa del completamento automatico con tutti i metodi HTTP che ha rilevato.
• mime-type. Mostra le risorse di un tipo MIME specificato. DevTools compila il menu a discesa del completamento automatico con tutti i tipi MIME che ha rilevato.
• mixed-content. Mostra tutte le risorse con contenuti misti (mixed-content:all) o solo quelle visualizzate (mixed-content:displayed).
• priority. Mostra le risorse il cui livello di priorità corrisponde al valore specificato.
• resource-type. Mostra le risorse di un tipo di risorsa, ad esempio un'immagine. DevTools compila il menu a discesa del completamento automatico con tutti i tipi di risorse che ha rilevato.
• response-header-set-cookie. Mostra le intestazioni Set-Cookie non elaborate nella scheda Problemi. I cookie non validi con intestazioni Set-Cookie errate verranno segnalati nel riquadro Rete.
• scheme. Mostra le risorse recuperate tramite HTTP non protetto (scheme:http) o HTTPS protetto (scheme:https).
• set-cookie-domain. Mostra le risorse che hanno un'intestazione Set-Cookie con un attributo Domain che corrisponde al valore specificato. DevTools compila il completamento automatico con tutti i domini dei cookie che ha rilevato.
• set-cookie-name. Mostra le risorse che hanno un'intestazione Set-Cookie con un nome che corrisponde al valore specificato. DevTools compila il completamento automatico con tutti i nomi dei cookie che ha riscontrato.
• set-cookie-value. Mostra le risorse che hanno un'intestazione Set-Cookie con un valore corrispondente al valore specificato. DevTools compila il completamento automatico con tutti i valori dei cookie che ha riscontrato.
• status-code. Mostra solo le risorse il cui codice di stato HTTP corrisponde al codice specificato. DevTools compila il menu a discesa di completamento automatico con tutti i codici di stato che ha rilevato.
• url. Mostra le risorse con un url corrispondente al valore specificato.

Filtra richieste per tipo

Per filtrare le richieste in base al tipo di risorsa, fai clic sui pulsanti Tutti, Recupero/XHR, JS, CSS, Img, Media, Font, Doc, WS (WebSocket), Wasm (WebAssembly), Manifest o Altro (qualsiasi altro tipo non elencato qui) nel riquadro Rete.

Se non vedi questi pulsanti, è probabile che la barra delle azioni Filtri sia nascosta. Vedi Nascondere la barra dei filtri.

Per mostrare contemporaneamente risorse di più tipi, tieni premuto Command (Mac) o Control (Windows, Linux) e poi fai clic su più filtri per tipo.

Filtra richieste per ora

Trascina verso sinistra o destra la cronologia di Panoramica per visualizzare solo le richieste attive durante questo periodo di tempo. Il filtro è inclusivo. Viene visualizzata qualsiasi richiesta attiva durante il periodo evidenziato.

Nascondi URL dati

Gli URL di dati sono piccoli file incorporati in altri documenti. Qualsiasi richiesta visualizzata nella tabella Richieste che inizia con data: è un URL di dati.

Per nascondere queste richieste, nella barra delle azioni Filtri, seleziona Altri filtri > check_box Nascondi URL dati.

La barra di stato in basso mostra il numero di richieste visualizzate sul totale.

Nascondi URL delle estensioni

Per concentrarti sul codice che crei, puoi filtrare le richieste non pertinenti inviate dalle estensioni che potresti aver installato in Chrome. Le richieste di estensione hanno URL che iniziano con chrome-extension://.

Per nascondere le richieste di estensione, nella barra delle azioni Filtri, seleziona Altri filtri > check_box Nascondi URL di estensione.

La barra di stato in basso mostra il numero di richieste visualizzate sul totale.

Mostra solo le richieste con cookie di risposta bloccati

Per filtrare tutto tranne le richieste con cookie di risposta bloccati per qualsiasi motivo, nella barra delle azioni Filtri, seleziona Altri filtri > check_box Cookie di risposta bloccati.

La barra di stato in basso mostra il numero di richieste visualizzate sul totale.

Per scoprire il motivo per cui un cookie di risposta è stato bloccato, seleziona la richiesta, apri la scheda Cookie e passa il mouse sopra l'icona informativa .

Inoltre, il riquadro Rete mostra un'icona di avviso accanto a una richiesta con cookie bloccati a causa di flag di Chrome o della configurazione. Passa il mouse sopra l'icona per visualizzare una descrizione comando con un indizio e fai clic per andare al riquadro Problemi per ulteriori informazioni.

Mostra solo le richieste bloccate

Per filtrare tutto tranne le richieste bloccate, nella barra delle azioni Filtri, seleziona Altri filtri > check_box Richieste bloccate. Per testare questa funzionalità, puoi utilizzare la scheda Blocco richieste di rete nel riquadro.

La tabella Richieste evidenzia in rosso le richieste bloccate. La barra di stato in basso mostra il numero di richieste visualizzate sul totale.

Mostra solo le richieste di terze parti

Per filtrare tutto tranne le richieste con origine diversa da quella della pagina, nella barra delle azioni Filtri, seleziona Altri filtri > check_box Richieste di terze parti.

La barra di stato in basso mostra il numero di richieste visualizzate sul totale.

Ordinare le richieste

Per impostazione predefinita, le richieste nella tabella Richieste sono ordinate in base all'ora di avvio, ma puoi ordinare la tabella utilizzando altri criteri.

Ordinare per colonna

Fai clic sull'intestazione di una colonna della tabella Richieste per ordinare le richieste in base a quella colonna.

Ordina per fase dell'attività

Per modificare l'ordinamento delle richieste nella cascata, fai clic con il tasto destro del mouse sull'intestazione della tabella Richieste, passa il mouse sopra Cascata e seleziona una delle seguenti opzioni:

• Ora di inizio. La prima richiesta avviata si trova in alto.
• Tempo di risposta. La prima richiesta che ha iniziato il download si trova in alto.
• Ora di fine. La prima richiesta completata si trova in alto.
• Durata totale. La richiesta con la configurazione della connessione e la richiesta / risposta più brevi si trova in alto.
• Latenza. La richiesta che ha atteso meno tempo per una risposta si trova in alto.

Queste descrizioni presuppongono che ogni opzione sia classificata dalla più breve alla più lunga. Se fai clic sull'intestazione della colonna A cascata, l'ordine viene invertito.

In questo esempio, il grafico a cascata è ordinato in base alla durata totale. La parte più chiara di ogni barra indica il tempo trascorso in attesa. La parte più scura indica il tempo impiegato per scaricare i byte.

Analizzare le richieste

Finché DevTools è aperto, registra tutte le richieste nel riquadro Rete. Utilizza il riquadro Rete per analizzare le richieste.

Visualizzare un log delle richieste

Utilizza la tabella Richieste per visualizzare un log di tutte le richieste effettuate mentre DevTools è aperto. Se fai clic o passi il mouse sopra le richieste, vengono visualizzate ulteriori informazioni.

Per impostazione predefinita, la tabella Richieste mostra le seguenti colonne:

• Nome. Il nome del file o un identificatore della risorsa.

• Stato. Questa colonna può mostrare i seguenti valori:

  

  • Codice di stato HTTP, ad esempio 200 o 404.
  • CORS error per le richieste non riuscite a causa della condivisione delle risorse tra origini (CORS).
  • (blocked:origin) per le richieste con intestazioni configurate in modo errato. Passa il mouse sopra questo valore di stato per visualizzare una descrizione comando con un suggerimento su cosa è andato storto.
  • (failed) seguito dal messaggio di errore.

• Tipo. Il tipo MIME della risorsa richiesta.

• Iniziatore. I seguenti oggetti o processi possono avviare richieste:

  • Parser. Il parser HTML di Chrome.
  • Reindirizzamento. Un reindirizzamento HTTP.
  • Script. Una funzione JavaScript.
  • Altro. Un altro processo o azione, ad esempio la navigazione in una pagina tramite un link o l'inserimento di un URL nella barra degli indirizzi.

• Dimensioni. La dimensione combinata delle intestazioni della risposta più il corpo della risposta, così come vengono inviati dal server.

• Ora. La durata totale, dall'inizio della richiesta alla ricezione dell'ultimo byte nella risposta.

• Cascata. Una suddivisione visiva dell'attività di ogni richiesta.

Aggiunta o rimozione di colonne

Fai clic con il tasto destro del mouse sull'intestazione della tabella Richieste e seleziona un'opzione per nasconderla o mostrarla. Le opzioni visualizzate sono contrassegnate da un segno di spunta.

Puoi aggiungere o rimuovere le seguenti colonne aggiuntive: Percorso, URL, Metodo, Protocollo, Schema, Dominio, Indirizzo remoto, Spazio di indirizzi remoti, Spazio di indirizzi iniziatore, Cookie, Imposta cookie, Priorità, ID connessione, Ha override e Cascata.

Aggiungere colonne personalizzate

Per aggiungere una colonna personalizzata alla tabella Richieste:

1. Fai clic con il tasto destro del mouse sull'intestazione della tabella Richieste e seleziona Intestazioni di risposta > Gestisci colonne di intestazione.
2. Nella finestra di dialogo, fai clic su Aggiungi intestazione personalizzata, inserisci il nome e fai clic su Aggiungi.

Raggruppa le richieste per frame incorporati

Se i frame in linea di una pagina avviano molte richieste, puoi rendere il log delle richieste più semplice raggruppandole.

Per raggruppare le richieste per iframe, apri Impostazioni nel riquadro Rete e seleziona check_box Raggruppa per frame.

Per visualizzare una richiesta avviata da un frame incorporato, espandila nel log delle richieste.

Visualizzare la tempistica delle richieste in relazione tra loro

Utilizza la cascata per visualizzare la tempistica delle richieste in relazione tra loro. Per impostazione predefinita, la cascata è organizzata in base all'ora di inizio delle richieste. Pertanto, le richieste più a sinistra sono iniziate prima di quelle più a destra.

Consulta Ordina per fase dell'attività per scoprire i diversi modi in cui puoi ordinare la cascata.

Analizzare i messaggi di una connessione WebSocket

Per visualizzare i messaggi di una connessione WebSocket:

1. Nella colonna Nome della tabella Richieste, fai clic sull'URL della connessione WebSocket.
2. Fai clic sulla scheda Messaggi. La tabella mostra gli ultimi 100 messaggi.

Per aggiornare la tabella, fai di nuovo clic sul nome della connessione WebSocket nella colonna Nome della tabella Richieste.

La tabella contiene tre colonne:

• Dati. Il payload del messaggio. Se il messaggio è in formato testo normale, viene visualizzato qui. Per i codici operativi binari, questa colonna mostra il nome e il codice del codice operativo. Sono supportati i seguenti opcode: Continuation Frame, Binary Frame, Connection Close Frame, Ping Frame e Pong Frame.
• Lunghezza. La lunghezza del payload del messaggio, in byte.
• Ora. L'ora in cui il messaggio è stato ricevuto o inviato.

I messaggi sono codificati per colore in base al tipo:

• I messaggi in uscita sono di colore verde chiaro.
• I messaggi in arrivo sono bianchi.
• I codici operativi WebSocket sono giallo chiaro.
• Gli errori sono di colore rosso chiaro.

Analizzare gli eventi in un flusso

Per visualizzare gli eventi trasmessi in streaming dai server tramite l'API Fetch, l'API EventSource e XHR:

1. Registra le richieste di rete in una pagina che trasmette in streaming gli eventi.
2. In Rete, seleziona una richiesta e apri la scheda EventStream.

Per filtrare gli eventi, specifica un'espressione regolare nella barra dei filtri nella parte superiore della scheda EventStream.

Per cancellare l'elenco degli eventi acquisiti, fai clic su Blocca Cancella.

Visualizzare l'anteprima del corpo di una risposta

Per visualizzare l'anteprima del corpo di una risposta:

1. Fai clic sull'URL della richiesta nella colonna Nome della tabella Richieste.
2. Fai clic sulla scheda Anteprima.

Questa scheda è utile soprattutto per visualizzare le immagini.

Visualizzare il corpo di una risposta

Per visualizzare il corpo della risposta a una richiesta:

1. Fai clic sull'URL della richiesta nella colonna Nome della tabella Richieste.
2. Fai clic sulla scheda Risposta.

Visualizzare le intestazioni HTTP

Per visualizzare i dati delle intestazioni HTTP di una richiesta:

1. Fai clic su una richiesta nella tabella Richieste.
2. Apri la scheda Intestazioni e scorri verso il basso fino alle sezioni Generali, Intestazioni di risposta, Intestazioni di richiesta e, facoltativamente, Intestazioni Early Hints.

Nella sezione Generale, DevTools mostra un messaggio di stato leggibile accanto al codice di stato HTTP ricevuto.

Nella sezione Intestazioni di risposta, puoi passare il mouse sopra un valore di intestazione e fare clic sul pulsante Modifica Modifica per ignorare l'intestazione di risposta a livello locale.

Visualizza l'origine dell'intestazione HTTP

Per impostazione predefinita, la scheda Intestazioni mostra i nomi delle intestazioni in ordine alfabetico. Per visualizzare i nomi delle intestazioni HTTP nell'ordine in cui sono stati ricevuti:

1. Apri la scheda Intestazioni della richiesta che ti interessa. Consulta Visualizzare le intestazioni HTTP.
2. Fai clic su Visualizza origine accanto alla sezione Intestazione richiesta o Intestazione risposta.

Avviso relativo alle intestazioni provvisorie

A volte la scheda Intestazioni mostra il messaggio di avviso Provisional headers are shown.... Le cause potrebbero essere:

• La richiesta non è stata inviata tramite rete, ma è stata fornita da una cache locale, in cui non sono archiviate le intestazioni della richiesta originali. In questo caso, puoi disattivare la memorizzazione nella cache per visualizzare tutte le intestazioni della richiesta.

• La risorsa di rete non è valida. Ad esempio, esegui fetch("https://jec.fish.com/unknown-url/") nella console.

Per motivi di sicurezza, DevTools può visualizzare solo le intestazioni provvisorie.

Visualizza payload della richiesta

Per visualizzare il payload della richiesta, ovvero i parametri della stringa di query e i dati del modulo, seleziona una richiesta dalla tabella Richieste e apri la scheda Payload.

Visualizza origine payload

Per impostazione predefinita, DevTools mostra il payload in un formato leggibile.

Per visualizzare le origini dei parametri della stringa di query e dei dati del modulo, fai clic su Visualizza origine accanto alle sezioni Parametri della stringa di query o Dati del modulo nella scheda Payload.

Visualizza gli argomenti con URL decodificato dei parametri stringa di query

Per attivare/disattivare la codifica URL per gli argomenti, nella scheda Payload, fai clic su Visualizza decodificato o Visualizza con codifica URL.

Visualizza cookie

Per visualizzare i cookie inviati nell'intestazione HTTP di una richiesta:

1. Fai clic sull'URL della richiesta nella colonna Nome della tabella Richieste.
2. Fai clic sulla scheda Cookie.

Per una descrizione di ogni colonna, vedi Campi.

Per modificare i cookie, consulta Visualizzare, modificare ed eliminare i cookie.

Visualizzare la suddivisione dei tempi di una richiesta

Per visualizzare la suddivisione dei tempi di una richiesta:

1. Fai clic sull'URL della richiesta nella colonna Nome della tabella Richieste.
2. Fai clic sulla scheda Tempistica.

Per un modo più rapido di accedere a questi dati, consulta Visualizzare l'anteprima di una suddivisione dei tempi.

Per ulteriori informazioni su ciascuna delle fasi che potresti visualizzare nella scheda Tempistica, consulta la sezione Fasi della suddivisione della tempistica spiegate.

Visualizzare l'anteprima di una suddivisione dei tempi

Per visualizzare un'anteprima della suddivisione dei tempi di una richiesta, passa il mouse sopra la voce della richiesta nella colonna Cascata della tabella Richieste.

Consulta Visualizzare la suddivisione dei tempi di una richiesta per un modo di accedere a questi dati che non richiede il passaggio del mouse.

Spiegazione delle fasi di suddivisione del tempo

Di seguito sono riportate ulteriori informazioni su ciascuna delle fasi che potresti visualizzare nella scheda Tempistica:

• Inserimento in coda. Il browser mette in coda le richieste prima dell'inizio della connessione e quando:
  • Esistono richieste con priorità più elevata. La priorità della richiesta è determinata da fattori quali il tipo di risorsa e la sua posizione all'interno del documento. Per saperne di più, leggi la sezione sulla priorità delle risorse della guida fetchpriority.
  • Per questa origine sono già aperte sei connessioni TCP, che è il limite. (Si applica solo a HTTP/1.0 e HTTP/1.1.)
  • Il browser sta allocando brevemente spazio nella cache del disco.
• Stallo. La richiesta potrebbe essere bloccata dopo l'avvio della connessione per uno dei motivi descritti in Accodamento.
• Ricerca DNS. Il browser sta risolvendo l'indirizzo IP della richiesta.
• Connessione iniziale. Il browser sta stabilendo una connessione, inclusi handshake o tentativi TCP e la negoziazione di un SSL.
• Negoziazione del proxy. Il browser sta negoziando la richiesta con un server proxy.
• Richiesta inviata. La richiesta è in fase di invio.
• Preparazione di ServiceWorker. Il browser sta avviando il service worker.
• Richiesta a ServiceWorker. La richiesta viene inviata al service worker.
• In attesa (TTFB). Il browser è in attesa del primo byte di una risposta. TTFB sta per Time To First Byte. Questo tempo include un round trip di latenza e il tempo impiegato dal server per preparare la risposta.
• Download di contenuti. Il browser riceve la risposta direttamente dalla rete o da un service worker. Questo valore è la quantità totale di tempo trascorso a leggere il corpo della risposta. Valori superiori al previsto potrebbero indicare una rete lenta o che il browser è occupato a svolgere altre attività che ritardano la lettura della risposta.

Visualizzare gli iniziatori e le dipendenze

Per visualizzare gli iniziatori e le dipendenze di una richiesta, tieni premuto Maiusc e passa il mouse sopra la richiesta nella tabella Richieste. DevTools colora di verde gli iniziatori e di rosso le dipendenze.

Quando la tabella Richieste è ordinata cronologicamente, la prima richiesta verde sopra la richiesta su cui stai passando il mouse è l'iniziatore della dipendenza. Se sopra è presente un'altra richiesta verde, questa è l'iniziatore dell'iniziatore. e così via.

Visualizza eventi di caricamento

DevTools mostra la tempistica degli eventi DOMContentLoaded e load in più punti del riquadro Rete. L'evento DOMContentLoaded è colorato di blu e l'evento load è rosso.

Visualizzare il numero totale di richieste

Il numero totale di richieste è indicato nella barra di stato nella parte inferiore del riquadro Rete.

Visualizzare la dimensione totale delle risorse trasferite e caricate

DevTools elenca la dimensione totale delle risorse trasferite e caricate (non compresse) nella barra di stato nella parte inferiore del riquadro Network.

Consulta Visualizzare le dimensioni non compresse di una risorsa per scoprire le dimensioni delle risorse dopo la decompressione da parte del browser.

Visualizza l'analisi dello stack che ha causato una richiesta

Quando un'istruzione JavaScript causa la richiesta di una risorsa, passa il mouse sopra la colonna Iniziatore per visualizzare la traccia dello stack che porta alla richiesta.

Visualizzare le dimensioni non compresse di una risorsa

Controlla Impostazioni > Righe di richieste di grandi dimensioni e poi guarda il valore inferiore della colonna Dimensioni.

In questo esempio, la dimensione compressa del documento www.google.com inviato sulla rete era 43.8 KB, mentre la dimensione non compressa era 136 KB.

Esportare i dati delle richieste

Puoi esportare o copiare l'elenco delle richieste, con i filtri applicati, in diversi modi descritti di seguito.

Salvare tutte le richieste di rete in un file HAR

HAR (HTTP Archive) è un formato file utilizzato da vari strumenti di sessioni HTTP per esportare i dati acquisiti. Il formato è un oggetto JSON con un determinato insieme di campi.

Per ridurre le probabilità di divulgazione accidentale di informazioni sensibili, per impostazione predefinita puoi esportare il log di rete "convalidato come corretto" in formato HAR che esclude informazioni sensibili come le intestazioni Cookie, Set-Cookie e Authorization. Se necessario, puoi anche esportare il log con i dati sensibili.

Per salvare tutte le richieste di rete in un file HAR, scegli uno dei due modi:

• Fai clic con il tasto destro del mouse su una qualsiasi richiesta nella tabella Richieste e seleziona Copia > Salva tutto [elencato] come HAR (sanitizzato) o Salva tutto [elencato] come HAR (con dati sensibili).

  

• Fai clic su Scarica Esporta HAR (convalidato come corretto)… nella barra delle azioni nella parte superiore del riquadro Network.

  Per esportare con dati sensibili, attiva prima le impostazioni Impostazioni > Preferenze > Rete > casella di controllo Consenti la generazione di HAR con dati sensibili, poi fai clic sul pulsante download Esporta e seleziona Esporta HAR (con dati sensibili) dal menu a discesa.

  

Una volta ottenuto un file HAR, puoi importarlo di nuovo in DevTools per l'analisi in due modi:

• Trascina il file HAR nella tabella Richieste.
• Fai clic su Carica Importa HAR nella barra delle azioni nella parte superiore del riquadro Network.

Copiare una richiesta, un insieme filtrato di richieste o tutte le richieste negli appunti

Nella colonna Nome della tabella Richieste, fai clic con il tasto destro del mouse su una richiesta, passa il mouse sopra Copia e seleziona una delle seguenti opzioni.

Per copiare una singola richiesta, la relativa risposta o lo stack trace:

• Copia URL. Copia l'URL della richiesta negli appunti.
• Copia come cURL. Copia la richiesta come comando cURL.
• Copia come PowerShell. Copia la richiesta come comando PowerShell.
• Copia come elemento recuperato. Copia la richiesta come chiamata di recupero.
• Copia come recupero (Node.js). Copia la richiesta come chiamata di recupero Node.js.
• Copia risposta. Copia il corpo della risposta negli appunti.
• Copia analisi dello stack. Copia l'analisi dello stack della richiesta negli appunti.

Per copiare tutte le richieste:

• Copia tutti gli URL. Copia gli URL di tutte le richieste negli appunti.
• Copia tutto come cURL. Copia tutte le richieste come una catena di comandi cURL.
• Copia tutto come PowerShell. Copia tutte le richieste come una catena di comandi PowerShell.
• Copia tutto come recupero. Copia tutte le richieste come una catena di chiamate di recupero.
• Copia tutto come recupero (Node.js). Copia tutte le richieste come una catena di chiamate di recupero Node.js.
• Copia tutto come HAR (convalidato come corretto). Copia tutte le richieste come dati HAR senza dati sensibili come le intestazioni Cookie, Set-Cookie e Authorization.
• Copia tutto come HAR (con dati sensibili). Copia tutte le richieste come dati HAR con dati sensibili.

Per copiare un insieme filtrato di richieste, applica un filtro al log di rete, fai clic con il tasto destro del mouse su una richiesta e seleziona:

• Copia tutti gli URL elencati. Copia gli URL di tutte le richieste filtrate negli appunti.
• Copia tutti i comandi elencati come cURL. Copia tutte le richieste filtrate come una catena di comandi cURL.
• Copia tutti i comandi elencati come PowerShell. Copia tutte le richieste filtrate come una catena di comandi PowerShell.
• Copia tutti i dati elencati come recupero. Copia tutte le richieste filtrate come una catena di chiamate di recupero.
• Copia tutti i comandi elencati come recupero (Node.js). Copia tutte le richieste filtrate come una catena di chiamate di recupero Node.js.
• Copia tutti i dati elencati come HAR (convalidati come corretti). Copia tutte le richieste filtrate come dati HAR senza dati sensibili come le intestazioni Cookie, Set-Cookie e Authorization.
• Copia tutti i dati elencati come HAR (con dati sensibili). Copia tutte le richieste filtrate come dati HAR con dati sensibili.

Modificare il layout del riquadro Rete

Espandi o comprimi le sezioni della UI del riquadro Rete per concentrarti su ciò che è importante per te.

Nascondere la barra delle azioni Filtri

Per impostazione predefinita, DevTools mostra la barra dei filtri nella parte superiore del riquadro Rete. Fai clic su filter_alt Filtra per nasconderlo.

Usa righe di richiesta grandi

Utilizza righe grandi quando vuoi più spazio bianco nella tabella delle richieste di rete. Alcune colonne forniscono anche qualche informazione in più quando si utilizzano righe di grandi dimensioni. Ad esempio, il valore inferiore della colonna Dimensioni è la dimensione non compressa di una richiesta, mentre la colonna Priorità mostra la priorità di recupero iniziale (valore inferiore) e finale (valore superiore).

Apri Impostazioni e fai clic su Righe di richieste di grandi dimensioni per visualizzare le righe di grandi dimensioni.

Nascondere la traccia Panoramica

Per impostazione predefinita, DevTools mostra la traccia Panoramica. Apri Impostazioni e deseleziona la casella di controllo Mostra riepilogo per nasconderlo.