Questo codelab ti guida nel processo di interpretazione di tutto il traffico di rete per un'applicazione di esempio un po' complessa. Al termine dell'esercizio, avrai le competenze necessarie per capire cosa sta caricando la tua applicazione web e quando sta effettuando ogni richiesta.
Vai al riquadro Rete
Vai al riquadro Rete per visualizzare il traffico di rete per l'applicazione demo.
- Premi "Ctrl+Maiusc+J" (o "Cmd+Opzione+J" su Mac) per aprire DevTools.
- Fai clic sulla scheda Rete.
- Ricarica la pagina per visualizzare il traffico di rete.
Il riquadro Rete mostra tutti gli asset caricati a causa della navigazione iniziale:
Come interpretare le voci
Ogni riga del traffico di rete registrato rappresenta una singola coppia di richiesta e risposta.
La prima riga, con tipo document, è la richiesta di navigazione iniziale per l'HTML dell'app web. Questa è l'origine della struttura a cascata; ciascuna delle richieste successive di asset aggiuntivi (note come risorse secondarie del documento principale) proviene da questa origine originale.
La seconda e la terza riga, che mostrano il caricamento di una risorsa secondaria CSS stylesheet e script, sono richieste dipendenti avviate dal documento principale.
Osservando quando vengono effettuate queste richieste, il diagramma a cascata mostra che non vengono avviate fino a una fase molto avanzata del processo di risposta alla richiesta di navigazione.
Insieme, le richieste per il documento HTML, CSS e JavaScript sono necessarie per visualizzare la pagina completa durante la navigazione iniziale.
Crea alcune richieste di runtime aggiuntive
Con il riquadro Rete ancora aperto e in fase di registrazione, è il momento di simulare un'operazione comune per molte app web: richieste API aggiuntive utilizzate per aggiungere altri dati alla pagina dopo il completamento della navigazione iniziale.
Attiva queste richieste aggiuntive facendo clic su Trova la mia posizione nell'app e poi su Consenti nel popup visualizzato. In questo modo, il sito potrà accedere alla tua posizione attuale:
Una volta che l'app web ha una posizione con cui lavorare, facendo clic su Trova voci di Wikipedia nelle vicinanze vengono generate diverse richieste di rete aggiuntive. Dovresti vedere qualcosa di simile:
Interpreta le nuove voci
Come in precedenza, ogni riga del traffico di rete registrato rappresenta una singola coppia di richiesta e risposta.
La prima riga delle nuove voci rappresenta una richiesta con un tipo di fetch, che corrisponde al modo in cui l'app web richiede i dati dall'API Wikipedia.
Le righe seguenti sono tutte immagini (png o jpeg) associate alle voci di Wikipedia. Anche se è un po' difficile da vedere dallo screenshot, le voci nella colonna Waterfall derivano direttamente dalla risposta dell'API.
Per tutte queste richieste aggiuntive, il momento in cui vengono inviate varia in base al tempo trascorso dall'apertura della pagina prima di fare clic su Find Nearby Wikipedia Entries. L'aspetto più importante è che il momento è scollegato dalla richiesta di navigazione iniziale. Puoi capirlo dall'ampio intervallo presente nella visualizzazione a cascata, che rappresenta un periodo di tempo trascorso tra il caricamento iniziale e il momento in cui viene effettuata la richiesta API di Wikipedia.
Le richieste effettuate dopo un intervallo di tempo successivo a una navigazione rientrano nella categoria di "richieste di runtime", a differenza dell'insieme iniziale di richieste utilizzate per visualizzare la pagina quando l'hai visitata per la prima volta.
Riepilogo
Dopo aver seguito i passaggi di questo codelab, ora hai familiarità con gli strumenti che puoi utilizzare per analizzare ciò che viene caricato da qualsiasi applicazione web.
Il riquadro Rete ti aiuta a rispondere alla domanda su cosa viene caricato, tramite gli URL nella colonna Nome e i dati nella colonna Tipo, nonché su quando viene caricato, tramite la visualizzazione a cascata.
Hai anche visto che le richieste effettuate da una pagina web possono (di solito) essere raggruppate in una di queste due categorie:
- Richieste iniziali, effettuate subito dopo la navigazione verso una nuova pagina, per HTML, JavaScript, CSS (e potenzialmente altri asset).
- Richieste di runtime effettuate in seguito all'interazione dell'utente con la pagina. Spesso, questo può iniziare con una richiesta a un'API e poi con diverse richieste successive in base ai dati dell'API recuperati.