Questo codelab illustra la procedura 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 carica la tua applicazione web e quando effettua ogni richiesta.
Vai al riquadro Rete
Vai al riquadro Rete per visualizzare il traffico di rete per l'applicazione demo.
Per visualizzare l'anteprima del sito, premi Visualizza app. Quindi premi A schermo intero
.Premi "Control+Maiusc+J" (o "Comando+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 tutte le risorse caricate 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, di tipo document, è la richiesta di navigazione iniziale per il codice HTML dell'app web. Si tratta dell'origine della struttura a cascata; ciascuna delle richieste successive di asset aggiuntivi (noti 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.
Se si esamina quando vengono effettuate queste richieste, il diagramma a cascata mostra che non vengono avviate fino a un momento molto avanzato del processo di risposta alla richiesta di navigazione.
Nel loro insieme, le richieste per il documento HTML, CSS e JavaScript sono necessarie per visualizzare la pagina intera durante la navigazione iniziale.
Creare alcune richieste di runtime aggiuntive
Con il riquadro Network ancora aperto e in registrazione, è il momento di simulare qualcosa di comune per molte app web: richieste API aggiuntive utilizzate per aggiungere altri dati alla pagina al termine della navigazione iniziale.
Attiva queste richieste aggiuntive facendo clic su Trovaci nell'app e poi su Consenti nella finestra popup visualizzata. In questo modo il sito potrà accedere alla tua posizione attuale:
Una volta che l'app web ha una posizione con cui lavorare, fare clic su Trova voci di Wikipedia nelle vicinanze genera diverse richieste di rete aggiuntive. Dovresti vedere qualcosa del genere:
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 fetch,
che corrisponde al
modo in cui l'app web richiede i dati
dall'API Wikipedia.
Le seguenti righe sono tutte immagini (png o jpeg) associate alle voci di Wikipedia. Anche se è un po' difficile da vedere dallo screenshot, le voci nella colonna Cascata provengono direttamente dalla risposta dell'API.
Per tutte queste richieste aggiuntive, il valore when varierà in base al tempo in cui la pagina è stata aperta prima di fare clic su Trova voci di Wikipedia nelle vicinanze. L'aspetto più importante è che when sia scollegato dalla richiesta di navigazione iniziale. Puoi capirlo dal grande intervallo presente nella visualizzazione a cascata, che rappresenta un periodo di tempo trascorso tra il caricamento iniziale e l'invio della richiesta all'API Wikipedia.
Le richieste effettuate dopo un intervallo di tempo successivo a una navigazione rientrano nella categoria "richieste di runtime", rispetto all'insieme iniziale di richieste utilizzato per visualizzare la pagina quando ci hai acceso per la prima volta.
Riepilogo
Dopo aver seguito i passaggi di questo codelab, ora conosci gli strumenti che puoi utilizzare per analizzare i contenuti caricati da qualsiasi applicazione web.
Il riquadro Rete ti aiuta a rispondere alla domanda cosa viene caricato tramite gli URL nella colonna Nome e i dati nella colonna Tipo, nonché 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 due categorie:
- Richieste iniziali, effettuate subito dopo aver eseguito la navigazione in una nuova pagina, per HTML, JavaScript, CSS (e potenzialmente altri asset).
- Richieste di runtime effettuate a seguito dell'interazione dell'utente con la pagina. Spesso questo può iniziare con una richiesta a un'API e poi passare a diverse richieste di follow-up in base ai dati dell'API recuperati.