Cet atelier de programmation vous explique comment interpréter l'ensemble du 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 effectue chaque requête.
Accédez au panneau "Réseau".
Accédez au panneau "Réseau" pour voir le trafic réseau de l'application de démonstration.
- 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 voir le trafic réseau.
Le panneau "Réseau" affiche tous les éléments chargés en raison de votre navigation initiale :
Interpréter les entrées
Chaque ligne de trafic réseau enregistré représente une seule paire de requête et de réponse.
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 d'assets supplémentaires (appelés sous-ressources du document principal) découle de cette source d'origine.
Les deuxième et troisième lignes, qui montrent le chargement d'une sous-ressource CSS stylesheet et d'une sous-ressource script, sont des requêtes dépendantes initié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 Réseau étant toujours ouvert et enregistrant, il est temps de simuler une situation courante pour de nombreuses applications Web : des requêtes API supplémentaires utilisées pour ajouter des données à la page une fois la navigation initiale terminée.
Déclenchez ces demandes supplémentaires en cliquant 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 Find Nearby Wikipedia Entries (Rechercher des entrées Wikipédia à proximité) entraîne plusieurs requêtes réseau supplémentaires. Vous devriez obtenir un résultat semblable au suivant :
Interpréter les nouvelles entrées
Comme précédemment, chaque ligne de trafic réseau enregistré représente une seule paire de requête et de réponse.
La première ligne des nouvelles entrées représente une requête de type fetch, qui correspond à la façon dont l'application Web demande des données à l'API Wikipédia.
Les lignes suivantes sont toutes des images (png ou jpeg) associées aux entrées Wikipédia. Même si cela est un peu difficile à voir sur la capture d'écran, leurs entrées dans la colonne "Waterfall" (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 restée ouverte avant que vous ne cliquiez sur Find Nearby Wikipedia Entries (Rechercher des entrées Wikipédia à proximité). Le plus important ici est que le quand est déconnecté de la requête de navigation initiale. Vous pouvez le constater grâce au grand écart qui existe dans l'affichage en cascade, représentant une période de temps qui s'est écoulée entre le chargement initial et le moment où la requête API Wikipédia est effectuée.
Les requêtes effectuées après un certain délai après une navigation entrent dans la catégorie des "requêtes d'exécution", par opposition à l'ensemble initial de requêtes utilisées pour afficher la page lorsque vous y avez accédé pour la première fois.
En résumé
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 charge n'importe quelle application Web.
Le panneau "Réseau" vous aide à répondre à la question de savoir ce qui 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 éléments).
- Requêtes d'exécution effectuées à la suite d'une interaction de l'utilisateur avec la page. Cela peut souvent commencer par une requête adressée à une API, puis se poursuivre par plusieurs requêtes de suivi basées sur les données d'API récupérées.