Questo codelab ti guida nel processo di interpretazione di tutto il traffico di rete per un'applicazione di esempio piuttosto complessa. Alla fine dell'esercizio, avrai le competenze necessarie per capire cosa viene caricata 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 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 tutti gli asset caricati a causa della navigazione iniziale:
Come interpretare le voci
Ogni riga di 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. Questa è l'origine della struttura a cascata. Ciascuna delle successive richieste di asset aggiuntivi (note come sottorisorse del documento principale) parte da questa origine originale.
La seconda e la terza riga, che mostrano il caricamento di una risorsa CSS stylesheet e di una sottorisorsa script, sono richieste dipendenti avviate dal documento principale.
Se guardi quando vengono effettuate queste richieste, il diagramma a cascata mostra che queste ultime non sono state avviate molto tardi nel processo di risposta alla richiesta di navigazione.
Prese insieme, le richieste del documento HTML, del CSS e del codice JavaScript sono necessarie per visualizzare la pagina intera 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 qualcosa di comune per molte app web: richieste API aggiuntive utilizzate per aggiungere altri dati alla pagina dopo il completamento della navigazione iniziale.
Per attivare queste richieste aggiuntive, fai clic su Find Me (Trovami) nell'app, quindi su Allow (Consenti) nel popup visualizzato. In questo modo, il sito potrà accedere alla tua posizione attuale:
Una volta che l'app web ha una posizione in cui lavorare, se fai clic su Trova voci Wikipedia nelle vicinanze vengono inviate diverse richieste di rete aggiuntive. Il risultato dovrebbe essere simile al seguente:
Interpreta le nuove voci
Come in precedenza, ogni riga di traffico di rete registrato rappresenta una singola coppia di richiesta e risposta.
La prima riga delle nuove voci rappresenta una richiesta di tipo fetch,
che corrisponde al
modo in cui l'app web richiede i dati
all'API Wikipedia.
Le seguenti righe sono tutte immagini (png o jpeg) associate alle voci di Wikipedia. Sebbene sia un po' difficile da vedere dallo screenshot, le voci nella colonna con struttura a cascata provengono direttamente dalla risposta dell'API.
Per tutte queste richieste aggiuntive, quando varia in base al tempo di apertura della pagina prima di fare clic su Trova voci di Wikipedia nelle vicinanze. L'aspetto più importante è che il campo quando viene disconnesso dalla richiesta di navigazione iniziale. Ciò è evidente dal grande spazio 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 dell'API Wikipedia.
Le richieste effettuate dopo un intervallo di tempo a seguito di una navigazione rientrano nella categoria delle "richieste di runtime", anziché nell'insieme iniziale di richieste utilizzato per visualizzare la pagina la prima volta che l'hai aperta.
Riepilogo
Dopo aver seguito i passaggi descritti in questo codelab, conosci gli strumenti che puoi utilizzare per analizzare le applicazioni web che vengono caricate qualsiasi.
Il riquadro Rete ti consente di rispondere alla domanda su cosa viene caricato, tramite gli URL nella colonna Nome e i dati nella colonna Tipo, oltre a quando viene caricato, tramite la visualizzazione a cascata.
Hai anche notato che le richieste effettuate da una pagina web possono (di solito) essere raggruppate in due categorie:
- Richieste iniziali, effettuate subito dopo l'accesso a 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, per poi confluire in diverse richieste di follow-up basate sui dati dell'API recuperati.