Cet atelier de programmation vous explique comment interpréter tout le trafic réseau d'un exemple d'application quelque peu complexe. À la fin de l'exercice, vous aurez les compétences nécessaires pour déterminer ce que votre propre application Web charge et quand elle envoie chaque requête.
Accédez au panneau "Network" (Réseau).
Accédez au panneau "Network" (Réseau) pour afficher le trafic réseau de l'application de démonstration.
Pour prévisualiser le site, appuyez sur Afficher l'application, puis sur Plein écran
.Appuyez sur Ctrl+Maj+J (ou Cmd+Option+J sur Mac) pour ouvrir DevTools.
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 initiale:
Interpréter les entrées
Chaque ligne du trafic réseau enregistré représente une seule paire de requêtes et de réponses.
La première ligne, de type document, correspond à la requête de navigation initiale pour le code HTML de l'application Web. Il s'agit de la source de la cascade. Chacune des requêtes ultérieures pour des composants supplémentaires (appelés sous-ressources du document principal) provient de cette source d'origine.
Les deuxième et troisième lignes, qui montrent un stylesheet CSS et une sous-ressource script en cours de chargement, sont des requêtes dépendantes lancées par le document principal.
En examinant quand ces requêtes sont effectuées, le diagramme en cascade montre qu'elles ne sont lancées que très tard dans le processus de réponse à la requête de navigation.
Ensemble, les requêtes pour le document HTML, le CSS et le JavaScript sont nécessaires pour afficher la page complète lors de la navigation initiale.
Créer des requêtes d'exécution supplémentaires
Le panneau Network étant toujours ouvert et en cours d'enregistrement, il est temps de simuler quelque chose de courant pour de nombreuses applications Web: des requêtes API supplémentaires utilisées pour ajouter plus de données à la page une fois la navigation initiale terminée.
Pour déclencher ces requêtes supplémentaires, cliquez sur Me trouver dans l'application, puis sur Autoriser dans le pop-up qui s'affiche. Le site pourra ainsi accéder à votre position actuelle:
Une fois que l'application Web dispose d'un emplacement, cliquer sur Trouver des entrées Wikipédia à proximité génère plusieurs requêtes réseau supplémentaires. Le résultat devrait se présenter comme suit:
Interpréter les nouvelles entrées
Comme précédemment, chaque ligne du trafic réseau enregistré représente une seule paire de requêtes et de réponses.
La première ligne des nouvelles entrées représente une requête de type fetch, qui correspond à la manière dont l'application Web demande des données à l'API Wikipedia.
Les lignes suivantes sont toutes des images (png ou jpeg) associées aux entrées Wikipedia. Bien qu'il soit un peu difficile de le voir sur la capture d'écran, leurs entrées dans la colonne "Cascade" découlent directement de la réponse de l'API.
Pour toutes ces requêtes supplémentaires, le moment varie en fonction de la durée pendant laquelle la page est ouverte avant de cliquer sur Trouver des entrées Wikipédia à proximité. L'élément le plus important ici est que when est déconnecté de la requête de navigation initiale. Vous pouvez le constater à partir de l'écart important qui existe dans l'affichage en cascade, qui représente la période écoulée entre le chargement initial et le moment où la requête de l'API Wikipedia est effectuée.
Les requêtes effectuées après un certain temps après une navigation appartiennent à la catégorie "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.
Récapitulatif
Après avoir suivi les étapes de cet atelier de programmation, vous connaissez désormais les outils que vous pouvez utiliser pour analyser ce que toute application Web charge.
Le panneau "Réseau" vous aide à savoir quoi est chargé, via les URL de la colonne "Nom" et les données de la colonne "Type", ainsi que quand il est chargé, 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 dans l'une des deux catégories suivantes:
- Requêtes initiales effectuées juste après l'accès à une nouvelle page pour le code HTML, JavaScript, CSS (et potentiellement d'autres composants).
- Requêtes d'exécution effectuées en raison de l'interaction de l'utilisateur avec la page. Cela peut souvent commencer par une requête envoyée à une API, puis se transformer en plusieurs requêtes de suivi en fonction des données de l'API récupérées.