DevTools

Network Base

Stampa WhatsApp Email

Network: catturare e leggere le richieste: Record, Preserve log, Disable cache, colonne Name/Status/Type/Initiator/Size/Time/Waterfall; Headers, Payload, Preview, Response, Timing.

Network | Network Base
Competenze: riconoscere gli strumenti trattati, interpretarli correttamente e applicarli durante un’analisi del browser.

Network: catturare e leggere le richieste

Durata: 50 minuti · Chrome o browser Chromium compatibile

Record, Preserve log, Disable cache, colonne Name/Status/Type/Initiator/Size/Time/Waterfall; Headers, Payload, Preview, Response, Timing. Gli strumenti di sviluppo permettono di osservare ciò che accade nel browser. Le opzioni possono variare tra versioni: se una scheda non compare, cercala nel menu » oppure More tools.

Che cosa osservare e perché

Usa gli strumenti solo su pagine che sei autorizzato a esaminare. La modifica di HTML, CSS o JavaScript in DevTools è in genere locale e temporanea: non equivale a modificare i file del sito. Una richiesta o un dato non presente non è necessariamente un errore.

Le schede del dettaglio di una richiesta

SchedaCosa mostra
HeadersURL, metodo, stato, header della richiesta e della risposta.
PayloadParametri URL, dati di form o corpo della richiesta, quando presenti.
PreviewAnteprima interpretata del contenuto, quando disponibile.
ResponseCorpo della risposta ricevuta, quando accessibile.
InitiatorCatena o causa che ha avviato la richiesta.
TimingFasi temporali di connessione, attesa e download.
CookiesCookie inviati e ricevuti, quando presenti.
MessagesMessaggi WebSocket o EventStream, per richieste compatibili.
SecurityDettagli di sicurezza disponibili per la richiesta.

Le schede variano in base al tipo di richiesta e alla versione del browser; un corpo 304, ad esempio, non contiene la rappresentazione completa.

LABORATORIO

Analizzare network: catturare e leggere le richieste con Chrome DevTools

Procedura guidata, circa 20 minuti

Obiettivo: applicare le funzioni studiate su una pagina già disponibile nel browser. Occorrente: Chrome, DevTools e una pagina dimostrativa o del corso.

  1. Apri Network prima di ricaricare la pagina.
  2. Verifica che la registrazione sia attiva (indicatore rosso).
  3. Ricarica la pagina e seleziona la richiesta del documento HTML.
  4. Leggi Name, Status, Type, Size, Time e Waterfall.
  5. Apri Headers e confronta General, Request Headers e Response Headers.
  6. Apri Preview, Response e Timing; confronta il contenuto disponibile.
  7. Attiva Preserve log e naviga a un’altra pagina, poi disattivalo.
Output atteso: La tabella mostra le richieste effettuate dal browser; ogni richiesta ha dettagli e tempi propri.
Se non trovi il comando: verifica il nome della scheda e usa », More tools o il Command Menu. Se un risultato non compare, annota ciò che osservi e confrontalo con il docente; non modificare impostazioni del server.

Esercizio autonomo: ripeti l’analisi su una seconda pagina e produci una tabella con azione, scheda usata, dato osservato e interpretazione.

Verifica dei concetti

Che cosa consente di osservare questa lezione?
Record, Preserve log, Disable cache, colonne Name/Status/Type/Initiator/Size/Time/Waterfall; Headers, Payload, Preview, Response, Timing.
Le modifiche effettuate in DevTools vengono pubblicate sul sito?
No: salvo strumenti e procedure specifiche di sviluppo locale, le modifiche al DOM o agli stili sono temporanee e riguardano il browser.
Perché un pannello può apparire vuoto?
Perché la pagina non utilizza la funzione, non ci sono eventi o risorse pertinenti oppure la registrazione non era attiva.
Come si recupera una scheda non visibile?
Dal menu » della barra delle schede, More tools o Command Menu; le etichette dipendono dalla versione.
Che cosa va annotato nel rapporto finale?
Azione effettuata, strumento utilizzato, evidenza osservata e interpretazione, distinguendo fatti e ipotesi.
COLLEGAMENTO CON PROTOCOLLO HTTP

Studia la struttura di una richiesta HTTP prima di leggerla in Network.

Apri la lezione del corso PROTOCOLLO HTTP →