Utilizza il riquadro Network per analizzare il caricamento pagina e ispezionare le risorse di rete.
Panoramica
Il riquadro Network ti consente di:
- Registrare l'attività di rete
- Ispezionare le richieste di rete
- Filtrare e ordinare le richieste di rete
- Cercare intestazioni e risposte di rete
- Modificare il comportamento di caricamento
- Bloccare le richieste di rete
- Modificare le condizioni di rete
- Eseguire il debug delle regole di speculazione
prefetch - Eseguire l'override delle intestazioni delle risposte HTTP
- Eseguire l'override delle intestazioni per più URL con caratteri jolly.
- Salvare ed esportare i dati delle richieste di rete
Consulta Ispezionare l'attività di rete per un tutorial guidato che esplora alcune delle funzionalità del riquadro Network più utilizzate.
Aprire il riquadro Network
Per aprire il riquadro Network, apri DevTools e poi fai clic su Network nella barra delle azioni in alto.
In alternativa, per aprire il riquadro Network tramite il menu Comando , segui questi passaggi:
- Apri DevTools.
- Apri il menu Comando premendo:
- macOS: Command+Shift+P
- Windows, Linux, ChromeOS: Control+Shift+P
- Inizia a digitare
Network, seleziona Mostra riquadro Network e premi Invio.
Registrare l'attività di rete
Quando apri DevTools, le richieste di rete vengono registrate automaticamente nel riquadro Network, a condizione che DevTools sia aperto.
Oltre alla registrazione, puoi eseguire le seguenti operazioni:
- Interrompere la registrazione delle richieste di rete.
- Cancellare tutte le richieste dalla tabella Richieste.
- Salvare le richieste durante i caricamenti delle pagine.
- Emulare un'esperienza offline.
- Simulare connessioni di rete più lente.
Ispezionare le richieste di rete
Tutte le richieste di rete vengono registrate nella tabella Richieste al centro del riquadro.
Per scoprire di più sulle colonne visualizzate per impostazione predefinita e su quelle aggiuntive che puoi aggiungere, consulta Visualizzare un log delle richieste.
Fai clic sul nome di una richiesta per visualizzare le schede con informazioni aggiuntive sulla richiesta, tra cui:
- Intestazioni: le intestazioni HTTP della risorsa selezionata.
- Payload: i parametri della stringa di query e i dati del modulo di una richiesta.
- Anteprima: un rendering di base dell'HTML.
- Risposta: il codice sorgente HTML della risorsa selezionata.
- Attivatore: la causa della richiesta di una risorsa.
- Tempistica: una suddivisione dell'attività di rete per la risorsa selezionata.
- Cookie: i cookie di una richiesta e della relativa risposta.
Filtrare e ordinare le richieste di rete
Il riquadro Network offre due modi per ordinare le richieste nella tabella Richieste:
Di seguito sono riportati alcuni modi per filtrare le richieste nella tabella Richieste:
- Filtrare le richieste per proprietà
- Filtrare le richieste per tipo
- Filtrare le richieste per ora
- Nascondere gli URL dei dati
- Nascondere gli URL delle estensioni
- Mostrare solo le richieste con cookie di risposta bloccati
- Mostrare solo le richieste bloccate
- Mostrare solo le richieste di terze parti
Cercare intestazioni e risposte di rete
Per scoprire come cercare le intestazioni e le risposte HTTP di tutte le risorse per una determinata stringa o espressione regolare, consulta Cercare intestazioni e risposte di rete.
Modificare il comportamento di caricamento
Verifica l'esperienza utente della tua pagina modificando il comportamento di caricamento nel riquadro Network.
Utilizzando il riquadro Network puoi:
- Emulare un visitatore alla prima visita disattivando la cache del browser
- Svuotare manualmente la cache del browser
- Cancellare manualmente i cookie del browser
- Emulare la modalità offline
- Simulare una connessione di rete lenta
- Eseguire l'override delle intestazioni delle risposte HTTP
- Eseguire l'override dello user agent
Salvare ed esportare i dati delle richieste di rete
Per salvare ed esportare i dati delle richieste di rete, consulta le seguenti risorse: