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 di Chrome DevTools.

Registra 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 la registrazione delle richieste:

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

Cancella richieste

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

Salvare le richieste durante i caricamenti di pagina

Per salvare le richieste tra i caricamenti 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 pagina

Acquisisci screenshot per analizzare ciò che gli utenti vedono 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 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 che si sono verificate dopo l'acquisizione dello screenshot.
• Fai doppio clic su una miniatura per ingrandirla.

Modificare e inviare di nuovo una richiesta

Puoi modificare e inviare nuovamente qualsiasi richiesta di rete recuperabile dalla tabella Richieste:

1. Fai clic con il tasto destro del mouse sulla richiesta e seleziona Modifica e invia di nuovo come recupero. DevTools apre il riquadro Console con la richiesta compilata come chiamata fetch(), mantenendo i parametri della richiesta originale e il contesto di esecuzione.
2. Facoltativamente, modifica la chiamata fetch() nella Console, quindi premi Invio per inviare nuovamente la richiesta.

Modifica il comportamento di caricamento

Emulare un visitatore alla prima visita disattivando la memorizzazione nella cache del browser

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

Disattiva la memorizzazione nella 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 a scomparsa Condizioni di rete.
2. Seleziona o deseleziona la casella di controllo Disattiva cache.

Svuotare manualmente la memorizzazione nella cache del browser

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

Emula 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 larghezza di banda 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 la preimpostazione corrispondente dal menu a discesa Limitazione nella barra delle azioni in alto.

Se hai attivato le metriche sul campo nel riquadro Rendimento, una delle opzioni di limitazione nel menu potrebbe essere contrassegnata come consigliata in base ai dati del Chrome User Experience Report.

DevTools mostra un'icona di avviso warning 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.

Limita le connessioni WebSocket

Oltre alle richieste HTTP, DevTools limita le connessioni WebSocket 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 così 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 con echo con e senza limitazione. Ad esempio:

Emula connessioni di rete lente dal riquadro 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 a scomparsa Condizioni di rete.
2. Seleziona una velocità di connessione dal menu Limitazione della larghezza di banda della rete.

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

Sostituisci le intestazioni delle risposte HTTP

Consulta Esegui l'override dei file e delle intestazioni delle risposte HTTP localmente.

Esegui l'override dello user agent

Per eseguire l'override manuale dello user agent:

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

Cerca richieste

Per eseguire ricerche nelle intestazioni delle richieste, 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, Ctrl + 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 sensibilità alle maiuscole 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

Filtra le richieste in base alle proprietà

Utilizza la casella Filtro per filtrare le richieste in base a proprietà quali il dominio o le dimensioni della richiesta oppure inserisci una stringa di testo per trovare corrispondenze con l'URL, il dominio, il nome host o la porta della richiesta (ad esempio localhost o example.com), incluse le richieste stesso sito.

Se non riesci a visualizzare 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 di dimensioni superiori a 1 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 dei cookie specifico.
• cookie-value. Mostra le risorse che impostano un valore del 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 compila il menu a discesa di completamento automatico con tutti i domini che ha rilevato.
• has-overrides. Mostra le richieste che hanno eseguito l'override di content, headers, di qualsiasi override (yes) o di nessun override (no). Puoi aggiungere la colonna Contiene override 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 le risorse WebSocket.
• larger-than. Mostra le risorse più grandi delle dimensioni specificate, in byte. L'impostazione di un valore pari a 1000 equivale all'impostazione di un valore pari a 1k.
• method. Mostra le risorse recuperate tramite un tipo di metodo HTTP specificato. DevTools compila il menu a discesa di 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 di 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 con formato non valido e intestazioni Set-Cookie errate verranno contrassegnati 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 rilevato.
• 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 che hanno un url corrispondente al valore specificato.

Filtra le richieste per tipo

Per filtrare le richieste in base al tipo di risorsa, fai clic sui pulsanti Tutti, Recupera/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. Consulta Nascondere la barra dei filtri.

Per visualizzare contemporaneamente risorse di più tipi, tieni premuto Comando (Mac) o Ctrl (Windows, Linux) e poi fai clic su diversi filtri dei tipi.

Filtra le richieste per ora

Trascina verso sinistra o destra sulla sequenza temporale della scheda Panoramica per visualizzare solo le richieste attive durante quel periodo di tempo. Il filtro è inclusivo. Vengono visualizzate tutte le richieste attive durante il periodo di tempo evidenziato.

Nascondere gli URL dei 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 rispetto al 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 rispetto al 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 rispetto al 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 informazioni info.

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

Mostra solo 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 a scomparsa.

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 ordinarle utilizzando altri criteri.

Ordina per colonna

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

Ordina per fase dell'attività

Per modificare il modo in cui la Struttura a cascata ordina le richieste, fai clic con il tasto destro del mouse sull'intestazione della tabella Richieste, passa il mouse sopra Struttura a 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 il tempo più breve 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 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.

Visualizza 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 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 andate a buon fine a causa della condivisione di risorse multiorigine (CORS).
  • (blocked:origin) per le richieste con intestazioni configurate in modo errato. Passa il mouse sopra questo valore di stato per visualizzare un tooltip 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. In questo caso, il riquadro Rete fornisce un link alla riga corrispondente nel file di origine.
  • Early Hints. Una risposta HTTP 103 Early Hints.
  • Altro. Un altro processo o un'altra azione, ad esempio la navigazione a 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, come 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 segni di spunta.

Puoi aggiungere o rimuovere le seguenti colonne aggiuntive:

• Richiesta n.. L'ordine assoluto di avvio della richiesta, bloccato per impostazione predefinita nella prima posizione della tabella Richieste.
• Percorso. La parte del percorso dell'URL.
• URL. L'URL completo della richiesta.
• Metodo. Il metodo HTTP della richiesta (ad esempio, GET, POST, PUT, DELETE).
• Protocollo. Il protocollo della richiesta (ad esempio, h2 per HTTP/2, h3 per HTTP/3 e così via).
• Schema. La parte dello schema dell'URL.
• Dominio. La parte del dominio dell'URL.
• Indirizzo remoto. L'indirizzo IP remoto e la porta della richiesta.
• Spazio indirizzo remoto. Lo spazio indirizzo remoto della richiesta. Public per gli IP pubblici, Private per gli IP privati.
• Spazio indirizzo iniziatore. Lo spazio indirizzo iniziatore della richiesta. Uguale al telecomando.
• Cookie. Il numero di cookie nella richiesta.
• Imposta i cookie. Il numero di cookie nella risposta.
• Priorità. La priorità della richiesta.
• ID connessione. L'ID connessione della richiesta in una sessione client, se presente.
• Con override. Se la richiesta ha sostituzioni (sì, no, contenuti o intestazioni).
• È correlata agli annunci. Vero o falso?
• Precaricato. Indica se la richiesta è stata avviata utilizzando il precaricamento speculativo.
• Blocco del rendering. Se la richiesta blocca il rendering, lo blocca potenzialmente o non lo blocca.
• A cascata. Una suddivisione visiva dell'attività di ogni richiesta.

Aggiungi 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 della risposta > Gestisci colonne 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.

Visualizza la tempistica delle richieste l'una rispetto all'altra

Utilizza la struttura a cascata per visualizzare la tempistica delle richieste l'una rispetto all'altra. Per impostazione predefinita, la struttura a 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 la sezione Ordina per fase di attività per scoprire i diversi modi in cui puoi ordinare la struttura a cascata.

Analizza 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. Apri la 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 gli opcode binari, questa colonna mostra il nome e il codice dell'opcode. Sono supportati i seguenti opcode: Frame di continuazione, Frame binario, Frame di chiusura della connessione, Frame di ping e Frame di pong.
• Lunghezza. La lunghezza del payload del messaggio, in byte.
• Ora. L'ora in cui il messaggio è stato ricevuto o inviato.

I messaggi sono classificati 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 su una pagina che trasmette eventi in streaming.
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 block Cancella.

Visualizzare un'anteprima del corpo di una risposta

Per visualizzare l'anteprima del corpo di una risposta:

1. Seleziona una richiesta nella colonna Nome della tabella Richieste.
2. Apri la scheda Anteprima.

Questa scheda è utile soprattutto per visualizzare le immagini.

Visualizza il corpo di una risposta

Per visualizzare il corpo della risposta a una richiesta:

1. Seleziona una richiesta nella colonna Nome della tabella Richieste.
2. Apri la scheda Risposta.

Per le risposte binarie o compresse, seleziona un metodo di decodifica (Base64, Esadecimale o UTF-8) dal menu a discesa nella parte inferiore della scheda Risposta.

Visualizza le intestazioni HTTP

Per visualizzare i dati dell'intestazione HTTP di una richiesta:

1. Seleziona una richiesta nella colonna Nome della tabella Richieste.
2. Apri la scheda Intestazioni e scorri verso il basso fino alle sezioni Generali, Intestazioni della risposta, Intestazioni della 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 della risposta, puoi passare il mouse sopra un valore dell'intestazione e fare clic sul pulsante Modifica Modifica per eseguire l'override dell'intestazione della risposta localmente.

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 Headers (Intestazioni) per la richiesta che ti interessa. Consulta Visualizzare le intestazioni HTTP.
2. Fai clic su Visualizza origine accanto alla sezione Intestazione della richiesta o Intestazione della 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ò anche mostrare solo intestazioni provvisorie.

Visualizza il 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 l'origine del 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, nella scheda Payload, fai clic su Visualizza sorgente accanto alle sezioni Parametri stringa di query o Dati modulo.

Visualizzare i parametri di query e del modulo codificati tramite URL

Per impostazione predefinita, DevTools mostra i parametri della stringa di query e i dati del modulo in un formato decodificato dall'URL. Per attivare/disattivare la codifica URL per gli argomenti nella scheda Payload, fai clic su Visualizza con codifica URL o Visualizza decodificato.

Visualizza i payload binari e compressi

Per i payload di richiesta binari o compressi, seleziona un metodo di decodifica (Base64, Hex o UTF-8) dal menu a discesa nella parte inferiore della scheda Payload.

Visualizzare i cookie

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

1. Seleziona una richiesta nella colonna Nome della tabella Richieste.
2. Apri la scheda Cookie.

Per una descrizione di ciascuna colonna, consulta Campi.

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

Visualizzare le sessioni associate al dispositivo

La scheda Sessioni associate al dispositivo mostra le informazioni di rinvio (aggiornamento) associate alla richiesta selezionata per tutte le sessioni associate al dispositivo attive su un sito.

Per visualizzare le informazioni sul rinvio (aggiornamento):

1. Seleziona una richiesta nella colonna Nome della tabella Richieste.
2. Apri la scheda Sessioni associate al dispositivo.

La scheda Sessioni vincolate al dispositivo viene visualizzata solo per le richieste pertinenti con cookie. La scheda elenca tutte le sessioni attive associate al dispositivo e se le sessioni hanno posticipato la richiesta (e, in caso contrario, il motivo). Le opzioni di rinvio possibili sono:

• Deferred (Refresh)
• Not deferred (Proactive refresh attempted)
• Not deferred (Request is in scope of session but proactive refresh is not possible)
• Not deferred (Request is in scope of session but initiator is not allowed to trigger refresh)
• Not deferred (Request is in scope of session but cookies are still present)
• Not deferred (Request is not in scope of session)

Visualizza la suddivisione delle tempistiche di una richiesta

Per visualizzare la suddivisione delle tempistiche di una richiesta:

1. Seleziona una richiesta nella colonna Nome della tabella Richieste.
2. Apri la scheda Tempistica.

Consulta Visualizzare l'anteprima di una suddivisione dei tempi per un modo più rapido di accedere a questi dati.

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

Visualizza l'anteprima di una suddivisione delle tempistiche

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

Consulta Visualizza la suddivisione delle tempistiche di una richiesta per un modo di accedere a questi dati che non richiede il passaggio del mouse.

Spiegazione delle fasi di analisi dei tempi

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

• Inserimento in coda. Il browser mette in coda le richieste prima dell'avvio della connessione e quando:
  • Sono presenti 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 Priorità delle risorse della guida fetchpriority.
  • Sono già aperte sei connessioni TCP per questa origine, che è il limite. (Si applica solo a HTTP/1.0 e HTTP/1.1).
  • Il browser sta allocando brevemente spazio nella cache del disco.
• Stalled. La richiesta potrebbe essere bloccata dopo l'avvio della connessione per uno dei motivi descritti in Accodamento.
• DNS Lookup (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.
• 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 rappresenta il tempo totale impiegato per 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.

Visualizza iniziatori e 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 gli elementi di attivazione in verde e le dipendenze in rosso.

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

Visualizza gli eventi di caricamento

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

Visualizzare il numero totale di richieste

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

Visualizza la dimensione totale delle risorse trasferite e caricate

DevTools elenca le dimensioni totali delle risorse trasferite e caricate (non compresse) nella barra di stato nella parte inferiore del riquadro Rete.

Consulta Visualizza le dimensioni non compresse di una risorsa per vedere le dimensioni delle risorse dopo che il browser le ha decompresse.

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 l'analisi dello stack che porta alla richiesta.

Visualizza le dimensioni non compresse di una risorsa

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

Esporta i dati delle richieste

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

Salva 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 possibilità di fughe accidentali di informazioni sensibili, per impostazione predefinita puoi esportare il log di rete "sanificato" 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 seguenti:

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

  

• Fai clic su download Esporta HAR (sanificato)… nella barra delle azioni nella parte superiore del riquadro Rete.

  Per esportare con dati sensibili, attiva prima 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 nuovamente in DevTools per l'analisi in due modi:

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

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 l'analisi dello stack:

• 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 fetch. Copia la richiesta come chiamata di recupero.
• Copia come fetch (Node.js). Copia la richiesta come chiamata di recupero Node.js.
• Copia come elemento di precaricamento. Copia la richiesta come tag HTML <link rel="preload">.
• 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 in formato 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 negli appunti gli URL di tutte le richieste filtrate.
• Copia tutti i comandi elencati come cURL. Copia tutte le richieste filtrate come 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 fetch. Copia tutte le richieste filtrate come una catena di chiamate di recupero.
• Copia tutti i comandi elencati come fetch (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.

Modifica 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 Filtro per nasconderlo.

Utilizzare righe di richiesta grande

Utilizza le righe grandi se vuoi più spazio vuoto nella tabella delle richieste di rete. Alcune colonne forniscono anche maggiori informazioni quando si utilizzano righe grandi. Ad esempio, il valore inferiore della colonna Dimensioni è la dimensione non compressa di una richiesta e la colonna Priorità mostra sia la priorità di recupero iniziale (valore inferiore) sia quella finale (valore superiore).

Apri Impostazioni e fai clic su Righe di richiesta 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 panoramica per nasconderla.