Questo codelab ti guida nel processo di interpretazione dell'intera rete per un'applicazione di esempio piuttosto complessa. Alla fine dell'esercizio, avrai le competenze necessarie per capire qual è la tua applicazione web viene caricato e quando effettua ogni richiesta.
Vai al riquadro Rete
Vai al riquadro Rete per visualizzare il traffico di rete per la demo un'applicazione.
Per visualizzare l'anteprima del sito, premi Visualizza app. Quindi premi Schermo intero
.Premi "Ctrl+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 tutti gli asset caricati a causa dei tuoi navigazione:
Come interpretare le voci
Ogni riga di traffico di rete registrato rappresenta una singola richiesta e risposta .
La prima riga, di tipo document, è la richiesta di navigazione iniziale per
HTML dell'app web. Questa è la sorgente della struttura a cascata; ognuna delle successive
flusso di richieste di asset aggiuntivi (noti come risorse secondarie del documento principale)
dalla fonte originale.
La seconda e la terza riga, che mostrano un elemento CSS stylesheet e una risorsa secondaria script
in fase di caricamento, sono richieste dipendenti avviate dal documento principale.
Osservando quando vengono effettuate queste richieste, il diagramma a cascata mostra che hanno iniziato solo molto tardi nel processo di risposta ai richiesta di navigazione.
Nel complesso, le richieste per il documento HTML, CSS e JavaScript sono necessari per visualizzare la pagina intera durante navigazione iniziale.
Crea alcune richieste di runtime aggiuntive
Con il riquadro Network ancora aperto e in fase di registrazione, è il momento di simulare qualcosa comune per molte app web: richieste API aggiuntive utilizzate per aggiungere ulteriori dati sulla pagina al termine della navigazione iniziale.
Attiva queste richieste aggiuntive facendo clic su Trovami nell'app e poi Consenti nella finestra popup visualizzata. Il sito potrà accedere alla tua posizione attuale:
Una volta che l'app web dispone di una posizione, fai clic su Trova nelle vicinanze Le voci di Wikipedia comportano diverse richieste di rete aggiuntive. Tu dovresti vedere qualcosa del genere:
Interpreta le nuove voci
Come in precedenza, ogni riga di traffico di rete registrato rappresenta una singola richiesta. e la coppia di risposta.
La prima riga delle nuove voci rappresenta una richiesta di tipo fetch,
che corrisponde
modo in cui l'app web richiede i dati
dell'API di Wikipedia.
Le seguenti righe sono tutte immagini (png o jpeg) associate all'attributo
Voci di Wikipedia. Anche se è un po' difficile da vedere dallo screenshot, la loro
Le voci nella colonna Struttura a cascata scorrono direttamente dalla risposta dell'API.
Per tutte queste richieste aggiuntive, il quando varierà in base a come la pagina rimane aperta prima di fare clic su Trova Wikipedia su Wikipedia Voci. In questo caso, l'elemento più importante è che quando viene disconnesso richiesta di navigazione iniziale. Lo si può capire dal grande divario esistente in la visualizzazione a cascata, che rappresenta un periodo di tempo trascorso tra caricamento iniziale e quando viene effettuata la richiesta API di Wikipedia.
Le richieste effettuate dopo un determinato intervallo di tempo dopo una navigazione rientrano nella categoria di "richieste di runtime", a differenza dell'insieme iniziale di richieste utilizzato 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 le strumenti che puoi utilizzare per analizzare il caricamento di qualsiasi applicazione web.
Il riquadro Rete consente di rispondere alla domanda su cosa viene caricato, tramite gli URL nella colonna Nome e i dati nella colonna Tipo, insieme a quando viene caricato tramite il display a cascata.
Hai anche visto che le richieste effettuate da una pagina web possono (solitamente) essere raggruppate una di due categorie:
- Le richieste iniziali, effettuate subito dopo 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. Questo possono iniziare con una richiesta a un'API, per poi passare Richieste di follow-up basate sui dati API recuperati.