Cet atelier de programmation vous explique comment interpréter l'ensemble des données pour un exemple d'application assez complexe. À la fin de l'exercice, vous aurez les compétences nécessaires pour déterminer quelle est votre propre application Web. chargement et quand la requête est envoyée.
Accéder au panneau "Network"
Accéder au panneau "Network" (Réseau) pour afficher le trafic réseau pour la démonstration application.
Pour prévisualiser le site, appuyez sur Afficher l'application. Appuyez ensuite sur Plein écran
Appuyez sur Ctrl+Maj+J (ou Cmd+Option+J sur Mac) pour ouvrir les outils de développement.
Cliquez sur l'onglet Réseau.
Actualisez la page pour afficher le trafic réseau.
Le panneau "Network" (Réseau) affiche tous les éléments chargés en raison de votre Navigation:
Interpréter les entrées
Chaque ligne de trafic réseau enregistré représente une requête et une réponse uniques .
La première ligne, de type document, correspond à la requête de navigation initiale pour le
le code HTML
de l'application Web. Il s'agit de la source de la cascade d'annonces. chacune des
flux de requêtes d'éléments supplémentaires (appelés sous-ressources du document principal)
de cette source originale.
Deuxième et troisième lignes, affichant un stylesheet CSS et une sous-ressource script
sont des requêtes dépendantes initiées par le document principal.
En examinant le moment de ces requêtes, le diagramme en cascade montre que elles ne sont lancées que très tard dans le processus de réponse aux requête de navigation.
Ensemble, les demandes pour les documents HTML, CSS et du code JavaScript sont nécessaires pour afficher la page complète lors de la la navigation initiale.
Créer des requêtes d'exécution supplémentaires
Le panneau Network (Réseau) étant toujours ouvert et l'enregistrement est en cours, vous pouvez simuler quelque chose. fréquent pour de nombreuses applications Web: des requêtes API supplémentaires pour ajouter plus de données la page une fois la navigation initiale terminée.
Déclenchez ces requêtes supplémentaires en cliquant sur Find Me (Trouver) dans l'application, puis Autoriser dans la fenêtre pop-up qui s'affiche. Le site pourra ainsi accéder à votre position actuelle:
Une fois que l'application Web dispose d'un lieu de travail, cliquez sur Rechercher à proximité. Les entrées Wikipedia génèrent plusieurs requêtes réseau supplémentaires. Toi un résultat semblable au suivant doit s'afficher:
Interpréter les nouvelles entrées
Comme précédemment, chaque ligne de trafic réseau enregistré représente une seule requête et la paire de réponses.
La première ligne des nouvelles entrées représente une requête de type fetch,
qui correspond au
la façon dont l'application Web demande des données
de l'API Wikipédia.
Les lignes suivantes sont toutes des images (png ou jpeg) associées à l'élément
Entrées Wikipédia. Bien qu'elle soit un peu difficile à voir sur la capture d'écran,
les entrées de la colonne Waterfall proviennent directement de la réponse de l'API.
Pour toutes ces requêtes supplémentaires, le when va varier en fonction de la manière dont que la page est ouverte avant de cliquer sur Trouver des articles Wikipédia à proximité Entrées. Le plus important ici est que la valeur when est déconnectée du requête de navigation initiale. Vous pouvez le dire à partir du grand écart qui existe dans l'affichage Waterfall, qui représente une période de temps entre les lors du chargement initial et du moment où la requête API Wikipédia est effectuée.
Les requêtes effectuées après un intervalle de temps après une navigation entrent dans la catégorie suivante : de « requêtes d'exécution », par opposition à l'ensemble initial de requêtes utilisé pour afficher la page lorsque vous y avez accédé pour la première fois.
En résumé
Maintenant que vous avez suivi les étapes de cet atelier de programmation, vous connaissez vous permettant d'analyser ce que n'importe quelle application Web charge.
Le panneau "Network" vous aide à déterminer quels éléments sont chargés, via les URL dans la colonne "Nom" et les données dans la colonne "Type", ainsi que quand pendant son chargement, via l'affichage en cascade.
Vous avez également vu que les requêtes effectuées par une page Web peuvent (généralement) être regroupées en l'une des deux catégories suivantes:
- Demandes initiales, effectuées juste après avoir accédé à une nouvelle page, pour HTML, JavaScript, CSS (et éventuellement d'autres éléments).
- Requêtes d'exécution effectuées suite à une interaction de l'utilisateur avec la page. Ce peut souvent commencer par une requête adressée à une API, puis se retrouver avec plusieurs en fonction des données de l'API récupérées.