Riferimento per le funzionalità di rete

Scopri nuovi modi per analizzare il caricamento della pagina in questo riferimento completo di Chrome DevTools di analisi della rete.

Registra richieste di rete

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

Interrompi la registrazione delle richieste di rete

Per interrompere la registrazione delle richieste:

• Fai clic su Interrompi la registrazione del 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 tra caricamenti pagina, seleziona la casella di controllo Conserva log nel riquadro Rete. DevTools salva tutte le richieste finché non disabiliti Conserva log.

Acquisire screenshot durante il caricamento pagina

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

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

Ricarica la pagina mentre è attivo il riquadro Rete 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 nel riquadro Panoramica.
• Fai clic sulla miniatura di uno screenshot per filtrare le richieste che si sono verificate dopo che lo screenshot è stato acquisite.
• Fai doppio clic su una miniatura per ingrandirla.

Riproduci di nuovo richiesta XHR

Per ripetere una richiesta XHR, esegui una delle seguenti operazioni nella tabella Requests (Richieste):

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

Modifica il comportamento di caricamento

Emula un nuovo visitatore disattivando la cache del browser

Per emulare l'esperienza del tuo sito a un nuovo utente, seleziona la casella di controllo Disattiva cache. DevTools disattiva la cache del browser. Questo emula in modo più accurato l'esperienza di un nuovo utente, perché le richieste vengono gestite dalla cache del browser in occasione di visite ripetute.

Disattiva la cache del browser dal riquadro a scomparsa Condizioni di rete

Se vuoi disabilitare la cache mentre lavori in altri pannelli DevTools, utilizza le Condizioni di rete riquadro a scomparsa.

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

Svuotare manualmente la cache del browser

Per svuotare 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 Svuota cache del browser.

Emula offline

È disponibile una nuova classe di app web, chiamate app web progressive, che possono funzionare offline con 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 è attivata.

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 di avviso accanto al riquadro Rete per ricordarti che la limitazione è attiva.

Creare profili di limitazione personalizzati

Oltre alle preimpostazioni, come 4G lenta o veloce, puoi anche aggiungere le tue profili di limitazione personalizzati:

1. Apri il menu Limitazione e seleziona Personalizzato > Aggiungi...
2. Configura un nuovo profilo di limitazione come descritto nelle impostazioni Impostazioni > Limitazione:

3. Torna al riquadro Rete, seleziona il tuo 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 tua connessione, apri la scheda Messaggi e controlla la differenza di tempo tra i messaggi inviati e sottoposti a eco con e senza limitazioni. Ad esempio:

Emula connessioni di rete lente dal riquadro a scomparsa Condizioni di rete

Se vuoi limitare la connessione di rete mentre lavori in altri pannelli DevTools, utilizza la classe Riquadro a scomparsa 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 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 i cookie del browser.

Esegui l'override delle intestazioni delle risposte HTTP

Consulta l'articolo Eseguire l'override locale di file e intestazioni delle risposte HTTP.

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

Richieste di ricerca

Per cercare intestazioni delle richieste, payload e risposte:

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

   • Su macOS, Comando + F.
   • Su Windows o Linux, premi 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 Network evidenzia in giallo la richiesta e la stringa corrispondente nelle schede Intestazioni, Paload o Risposta.

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

Per ulteriori informazioni su tutti i modi in cui è possibile eseguire ricerche in DevTools, consulta l'articolo Ricerca: trova testo in tutte le risorse caricate.

Richieste di filtro

Filtra le richieste per proprietà

Utilizza la casella Filtro per filtrare le richieste in base alle proprietà, come il dominio o la dimensione richiesta.

Se non riesci a vedere la casella, è probabile che il riquadro Filtri sia nascosto. Consulta Nascondere il riquadro Filtri.

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

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

Il prossimo è un elenco completo delle proprietà supportate.

• cookie-domain. Mostra le risorse che impostano un dominio dei 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 dei cookie specifico.
• domain. Visualizza 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 nel mese di .com. DevTools mostra i nomi dei domini nel menu a discesa del completamento automatico è stato rilevato.
• has-overrides. Mostra le richieste che hanno eseguito l'override di content, headers, eventuali override (yes) o nessun override (no). Puoi aggiungere la colonna Con 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 delle risposte. riscontrati.
• is. Utilizza is:running per trovare WebSocket risorse.
• larger-than. Mostra le risorse che superano la dimensione specificata, in byte. Impostazione di un valore di 1000 equivale all'impostazione del valore 1k.
• method. Mostra le risorse recuperate tramite un tipo di metodo HTTP specificato. Compilazione di DevTools dell'elenco a discesa del completamento automatico con tutti i metodi HTTP riscontrati.
• mime-type. Mostra le risorse di un tipo MIME specificato. DevTools compila il menu a discesa del completamento automatico con tutti i tipi MIME riscontrati.
• mixed-content. Mostra tutte le risorse di 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 i campi elenco a discesa del completamento automatico con tutti i tipi di risorse riscontrati.
• response-header-set-cookie. Mostra intestazioni Set-Cookie non elaborate nella scheda Problemi. Formato dei cookie non valido con intestazioni Set-Cookie errate verranno segnalate nel riquadro Rete.
• scheme. Mostra le risorse recuperate tramite HTTP (scheme:http) non protetto 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 cookie domini che ha incontrato.
• set-cookie-name. Mostra le risorse che hanno un'intestazione Set-Cookie con un nome che corrisponde alla specificato. DevTools compila il completamento automatico con tutti i nomi dei cookie che ha riscontrati.
• set-cookie-value. Mostra le risorse che hanno un'intestazione Set-Cookie con un valore corrispondente il valore specificato. DevTools compila il completamento automatico con tutti i valori dei cookie che ha riscontrati.
• status-code. Mostra solo le risorse il cui codice di stato HTTP corrisponde al codice specificato. DevTools compila il menu a discesa del completamento automatico con tutti i codici di stato rilevati.
• url. Mostra le risorse con un valore url corrispondente al valore specificato.

Filtra richieste per tipo

Per filtrare le richieste per tipo, fai clic su All, Fetch/XHR, JS, CSS, Img, Media, Carattere, Doc, WS (WebSocket), Wasm (WebAssembly), Manifest o Other (qualsiasi altro tipo non elencato qui) nel riquadro Rete.

Se non vedi questi pulsanti, è probabile che il riquadro Filtri sia nascosto. Consulta la sezione Nascondere i filtri. riquadro.

Per attivare più filtri di tipo contemporaneamente, tieni premuto Comando (Mac) o Ctrl (Windows, Linux) e quindi fai clic.

Filtra richieste in base all'ora

Trascina verso sinistra o destra sul riquadro Panoramica per visualizzare solo le richieste attive durante in quel periodo di tempo. Il filtro è inclusivo. Tutte le richieste attive durante il periodo evidenziato sono come mostrato nell'immagine.

Nascondi URL di dati

Gli URL di dati sono piccoli file incorporati in altri documenti. Qualsiasi richiesta che vedi nel La tabella delle richieste che inizia con data: è un URL di dati.

Per nascondere queste richieste, seleziona Nascondi URL di dati.

La barra di stato in basso mostra il numero di richieste mostrate rispetto al totale.

Nascondi URL delle estensioni

Per concentrarti sul codice che hai creato, 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 estensioni, seleziona Nascondi URL delle estensioni.

La barra di stato in basso mostra il numero di richieste mostrate 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, seleziona Cookie di risposta bloccati. Prova questa funzionalità su questa pagina dimostrativa.

La barra di stato in basso mostra il numero di richieste mostrate rispetto al totale.

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

Inoltre, il riquadro Rete mostra un'icona di avviso di avviso accanto a una richiesta interessata dalla disattivazione graduale dei cookie di terze parti o esente. Passa il mouse sopra l'icona per visualizzare una descrizione comando con un indizio e fai clic per accedere al riquadro Problemi per ulteriori informazioni.

Mostra solo richieste bloccate

Per filtrare tutto tranne le richieste bloccate, seleziona Richieste bloccate. Per verificarlo, puoi utilizzare la scheda a scomparsa Blocco richieste di rete.

La tabella Requests (Richieste) evidenzia le richieste bloccate in rosso. La barra di stato in basso mostra il numero di richieste mostrate rispetto al totale.

Mostra solo richieste di terze parti

Per filtrare tutto tranne le richieste con un'origine diversa da quella della pagina, controlla le richieste di terze parti . Prova questa funzionalità su questa pagina dimostrativa.

La barra di stato in basso mostra il numero di richieste mostrate rispetto al totale.

Ordina richieste

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

Ordina per colonna

Fai clic sull'intestazione di qualsiasi colonna della 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, quindi seleziona una delle seguenti opzioni:

• Ora di inizio. La prima richiesta avviata è visualizzata in alto.
• Tempo di risposta. La prima richiesta di cui è stato avviato il download si trova in alto.
• Ora di fine. La prima richiesta completata si trova in alto.
• Durata totale. La richiesta con la configurazione di connessione più breve e richiesta / risposta è all'indirizzo in alto.
• Latenza. La richiesta che ha atteso il tempo più breve per una risposta si trova nella parte superiore.

Queste descrizioni presuppongono che ciascuna opzione sia classificata dalla più breve alla più lunga. Clic nell'intestazione della colonna Struttura a cascata, l'ordine viene invertito.

In questo esempio, la cascata viene ordinata in base alla durata totale. La parte più leggera di ogni barra è tempo trascorso ad aspettare. La parte più scura è il tempo dedicato al download dei byte.

Analizza 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 Requests (Richieste) per visualizzare un log di tutte le richieste effettuate mentre DevTools era aperto. Facendo clic o passando 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 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 dello stato per visualizzare una descrizione comando con un suggerimento per risolvere il problema.
  • (failed) seguito dal messaggio di errore.

• Tipo. Il tipo MIME della risorsa richiesta.

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

  • Analizzatore. Parser HTML di Chrome.
  • Reindirizzamento. Un reindirizzamento HTTP.
  • Script. Una funzione JavaScript.
  • Altro. Un altro processo o un'altra azione, come l'accesso a una pagina tramite 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 fornito dal o server web.

• Ora. La durata totale, dall'inizio della richiesta alla ricezione del byte finale in la risposta.

• Struttura a cascata. Un'analisi visiva dell'attività di ogni richiesta.

Aggiunta o rimozione di colonne

Fai clic con il pulsante destro del mouse sull'intestazione della tabella Requests (Richieste) e seleziona un'opzione per nasconderla o mostrarla. Accanto alle opzioni visualizzate sono presenti segni di spunta.

Puoi aggiungere o rimuovere le seguenti colonne aggiuntive: Percorso, URL, Metodo, Protocollo, Schema, Dominio, Indirizzo remoto, Spazio indirizzi remoto, Spazio indirizzi initiator, Cookie, Imposta cookie, Priorità, ID connessione, Con override e Struttura a cascata.

Aggiungi colonne personalizzate

Per aggiungere una colonna personalizzata alla tabella Richieste:

1. Fai clic con il pulsante destro del mouse sull'intestazione della tabella Requests (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 in linea

Se i frame in linea su 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 Raggruppa per frame.

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

Visualizzare le tempistiche delle richieste in relazione tra loro

Utilizza la struttura a cascata per visualizzare le tempistiche delle richieste in relazione tra loro. Per impostazione predefinita, La struttura a cascata è organizzata in base all'ora di inizio delle richieste. Quindi, le richieste più a sinistra sono iniziati prima di quelli più a destra.

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

Analizza i messaggi di una connessione WebSocket

Per visualizzare i messaggi di una connessione WebSocket:

1. Nella colonna Nome della tabella Requests (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 nuovamente clic sul nome della connessione WebSocket nella colonna Nome della Tabella Requests.

La tabella contiene tre colonne:

• Dati. Il payload del messaggio. Se il messaggio è in testo normale, verrà visualizzato qui. Per i file binari opcode, questa colonna visualizza il nome e il codice dell'operazione. Sono supportati i seguenti codici operativi: 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 di testo in uscita sono di colore verde chiaro.
• Gli SMS in arrivo sono bianchi.
• I codici operativi di WebSocket sono di colore giallo chiaro.
• Gli errori sono di colore rosso chiaro.

Analizzare gli eventi in un flusso

Per visualizzare gli eventi trasmessi 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. Ad esempio, apri questa pagina dimostrativa e fai clic su uno dei tre pulsanti.
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.

Visualizza 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 la visualizzazione delle immagini.

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

Visualizza intestazioni HTTP

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

1. Fai clic su una richiesta nella tabella Richieste.
2. Apri la scheda Intestazioni e scorri verso il basso fino a Generali, Intestazioni della risposta, Intestazioni della richiesta e, facoltativamente, le sezioni Intestazioni dei suggerimenti iniziali.

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

Nella sezione Intestazioni della risposta, puoi passare il mouse sopra il valore di un'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 nel ordine in cui sono stati ricevuti:

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

Avviso sulle 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 la rete, ma è stata fornita da una cache locale, in cui non sono archiviate le intestazioni delle richieste originali. In questo caso, puoi disabilitare la memorizzazione nella cache per visualizzare le intestazioni complete della richiesta.

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

DevTools può anche visualizzare solo intestazioni provvisorie per motivi di sicurezza.

Visualizza payload richieste

Per visualizzare il payload della richiesta, ovvero i parametri della stringa di query e i dati del modulo, seleziona una richiesta dalla tabella Requests (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, nella scheda Payload fai clic su Visualizza origine accanto alle sezioni Parametri stringa di query o Dati modulo.

Visualizzare gli argomenti decodificati dall'URL dei parametri della stringa di query

Per attivare/disattivare la codifica degli URL per gli argomenti, nella scheda Payload fai clic su Visualizza decodificati 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 ciascuna colonna, consulta Campi.

Per modificare i cookie, consulta Visualizzazione, modifica ed eliminazione dei cookie.

Visualizzare la suddivisione temporale di una richiesta

Per visualizzare la suddivisione temporale di una richiesta:

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

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

Consulta la Spiegazione delle fasi di analisi delle tempistiche per ulteriori informazioni su ciascuna delle fasi in cui che potresti vedere nella scheda Tempi.

Visualizzare l'anteprima di una suddivisione delle tempistiche

Per visualizzare un'anteprima della suddivisione temporale di una richiesta, passa il mouse sopra la voce della richiesta nella Colonna Struttura a cascata della tabella Richieste.

Consulta Visualizzare l'analisi dettagliata delle tempistiche di una richiesta per conoscere un modo per accedere a questi dati senza richiedere passaggio del mouse.

Spiegazione delle fasi di analisi delle tempistiche

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

• Accodamento. Il browser mette in coda le richieste prima dell'inizio della connessione e quando:
  • Esistono richieste con priorità più elevata.
  • Ci sono già sei connessioni TCP aperte per questa origine, che rappresenta il limite. Si applica a HTTP/1.0 e HTTP/1.1.
  • Il browser sta allocando per breve spazio nella cache su disco.
• Bloccato. La richiesta potrebbe essere bloccata dopo l'avvio della connessione per uno dei motivi descritti in Codifiche.
• Ricerca DNS. Il browser sta risolvendo l'indirizzo IP della richiesta.
• Connessione iniziale. Il browser sta stabilendo una connessione, inclusi handshake TCP o nuovi tentativi e negoziare un SSL.
• Negoziazione proxy. Il browser sta negoziando la richiesta con un server proxy.
• Richiesta inviata. La richiesta è in fase di invio.
• Preparazione dei service worker. Il browser sta avviando il service worker.
• Richiesta a ServiceWorker. È in corso l'invio della richiesta al service worker.
• In attesa (TTFB). Il browser è in attesa del primo byte di una risposta. TTFB sta per Time Al primo byte. Queste tempistiche includono un round trip di latenza e il tempo impiegato dal server preparare la risposta.
• Download di contenuti. Il browser sta ricevendo 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 maggiori del previsto potrebbero indicare una rete lenta o che il browser è impegnato a eseguire altre operazioni, il che ritarda 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 mostra i colori verdi degli attivatori e le dipendenze di rosso.

Quando la tabella Requests è in ordine cronologico, la prima richiesta in verde sopra la richiesta su cui stai passando il mouse è l'iniziatore della dipendenza. Se c'è un'altra richiesta verde sopra che la richiesta più alta è l'iniziatore di chi ha iniziato. e così via.

Visualizza gli eventi di caricamento

DevTools visualizza la tempistica degli eventi DOMContentLoaded e load in più posizioni sul Riquadro Rete: L'evento DOMContentLoaded è di colore blu, mentre l'evento load è rosso.

Visualizzare il numero totale di richieste

Il numero totale di richieste è indicato nel riquadro Riepilogo, 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) nel riquadro Riepilogo, in fondo al riquadro Rete.

Consulta Visualizzare 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 generato una richiesta

Quando un'istruzione JavaScript comporta la richiesta di una risorsa, passa il mouse sopra la colonna Iniziatore per visualizzare l'analisi dello stack che ha portato alla richiesta.

Visualizza le dimensioni non compresse di una risorsa

Controlla le Impostazioni > Righe di richiesta big e controlla il valore inferiore della colonna Dimensioni.

In questo esempio, le dimensioni compresse del documento www.google.com inviato tramite la rete sono state 43.8 KB, mentre le dimensioni non compresse erano 136 KB.

Esporta dati richieste

Salva tutte le richieste di rete in un file HAR

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

Puoi salvare tutte le richieste di rete in un file HAR in due modi:

• Fai clic con il tasto destro del mouse su qualsiasi richiesta nella tabella Requests (Richieste) e seleziona Save all as HAR with content (Salva tutto come HAR con contenuti).
• Fai clic su Esporta HAR nella barra delle azioni nella parte superiore del riquadro Rete.

di Gemini Advanced.

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 Importa HAR nella barra delle azioni nella parte superiore del riquadro Rete.

di Gemini Advanced.

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

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

• Copia URL. Copia l'URL della richiesta negli appunti.
• Copia come cURL. Copia la richiesta come comando cURL.
• Copy as PowerShell (Copia come PowerShell). Copia la richiesta come comando PowerShell.
• Copia come recupero. 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 il tracciamento 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.
• Copy all as PowerShell. Copia tutte le richieste come una catena di comandi PowerShell.
• Copia tutto come recupero. Copia tutte le richieste come 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. Copia tutte le richieste come dati HAR.

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 tutto indicato come cURL. Copia tutte le richieste filtrate come una catena di comandi cURL.
• Copia tutto indicato come PowerShell. Copia tutte le richieste filtrate come una catena di comandi PowerShell.
• Copia tutto elencato come recupero. Copia tutte le richieste filtrate come una catena di chiamate di recupero.
• Copia tutto elencato come recupero (Node.js). Copia tutte le richieste filtrate come una catena di chiamate di recupero Node.js.
• Copia tutto indicato come HAR. Copia tutte le richieste filtrate come dati HAR.

Modificare il layout del riquadro Rete

Espandi o comprimi le sezioni dell'interfaccia utente del riquadro Rete per concentrarti sulle cose più importanti per te.

Nascondi il riquadro Filtri

Per impostazione predefinita, DevTools mostra il riquadro Filtri. Fai clic su Filtra per nasconderlo.

Utilizza righe di richiesta grande

Utilizza le righe grandi per avere più spazio vuoto nella tabella delle richieste di rete. Alcune colonne forniscono qualche informazione in più quando si utilizzano righe di grandi dimensioni. Ad esempio, il valore inferiore del La colonna Dimensione indica le dimensioni non compresse di una richiesta e la colonna Priorità mostra la priorità di recupero iniziale (valore inferiore) e finale (valore in alto).

Apri Settings (Impostazioni) e fai clic su Big request rows (Righe di richiesta grande) per visualizzare le righe di grandi dimensioni.

Nascondi il canale Panoramica

Per impostazione predefinita, DevTools mostra il canale Panoramica. Apri Impostazioni e deseleziona la casella di controllo Mostra panoramica per nasconderla.