Inspecter l'activité réseau

Kayce Basques

Ce tutoriel pratique présente certaines des fonctionnalités les plus couramment utilisées des outils de développement liées à l'inspection de l'activité réseau d'une page.

Si vous préférez parcourir les fonctionnalités, consultez la documentation de référence sur le réseau.

Lisez la suite ou visionnez la version vidéo de ce tutoriel:

Quand utiliser le panneau "Network" ?

En général, utilisez le panneau "Network" (Réseau) lorsque vous devez vous assurer que les ressources sont téléchargées ou importées comme prévu. Voici les cas d'utilisation les plus courants du panneau "Network" :

• S'assurer que les ressources sont effectivement importées ou téléchargées.
• Inspecter les propriétés d'une ressource individuelle, telles que ses en-têtes HTTP, son contenu, sa taille, etc.

Si vous cherchez à améliorer les performances de chargement des pages, ne commencez pas par le panneau "Network". Il existe de nombreux types de problèmes de performances de chargement qui ne sont pas liés à l'activité réseau. Commencez par le panneau Lighthouse, car il vous propose des suggestions ciblées pour améliorer votre page. Consultez Optimiser la vitesse du site Web.

Ouvrir le panneau "Network" (Réseau)

Pour tirer le meilleur parti de ce tutoriel, ouvrez la démo et testez les fonctionnalités de la page de démonstration.

1. Ouvrez la démonstration de démarrage.

   

   Figure 1 : La version de démonstration

   Vous pouvez déplacer la démo dans une autre fenêtre.

   

   Figure 2 : La démonstration dans une fenêtre et ce tutoriel dans une autre

2. Ouvrez les outils de développement en appuyant sur Ctrl+Maj+J ou Commande+Option+J (Mac). Le panneau Console s'ouvre.

   

   Image 3. La console

   Vous préférerez peut-être ancrer les outils de développement au bas de la fenêtre.

   

   Figure 4. Outils de développement ancrés au bas de la fenêtre

3. Cliquez sur l'onglet Réseau. Le panneau "Network" (Réseau) s'ouvre.

   

   Figure 5. Outils de développement ancrés au bas de la fenêtre

Pour le moment, le panneau "Network" est vide. En effet, les outils de développement ne consignent l'activité réseau que lorsqu'ils sont ouverts et qu'aucune activité réseau ne s'est produite depuis votre ouverture.

Enregistrer les activités réseau

Pour afficher l'activité réseau générée par une page, procédez comme suit:

1. Actualisez la page. Le panneau "Réseau" enregistre toute l'activité réseau dans le journal réseau.

   

   Figure 6. Journal réseau

   Chaque ligne du journal réseau représente une ressource. Par défaut, les ressources sont listées chronologiquement. La ressource supérieure est généralement le document HTML principal. La ressource inférieure correspond à la dernière requête demandée.

   Chaque colonne représente des informations sur une ressource. La Figure 6 présente les colonnes par défaut:

   • État : Code de réponse HTTP.
   • Type. Type de la ressource
   • Initiateur : Raison pour laquelle une ressource a été demandée. Cliquez sur un lien de la colonne Initiateur pour accéder au code source à l'origine de la requête.
   • Time. Durée de la requête.
   • Waterfall : Représentation graphique des différentes étapes de la requête. Passez la souris sur un Waterfall pour voir une répartition.

2. Tant que les outils de développement sont ouverts, ils enregistrent l'activité réseau dans le journal réseau. Pour illustrer cela, commencez par regarder le bas du journal réseau et notez la dernière activité.

3. À présent, cliquez sur le bouton Get Data (Obtenir les données) dans la démonstration.

4. Examinez à nouveau le bas du journal réseau. Il existe une nouvelle ressource appelée getstarted.json. En cliquant sur le bouton Get Data (Obtenir les données), la page a demandé ce fichier.

   

   Figure 7 : Une nouvelle ressource dans le journal réseau

Afficher plus d'informations

Vous pouvez configurer les colonnes du journal réseau. Vous pouvez masquer les colonnes que vous n'utilisez pas. De plus, de nombreuses colonnes sont masquées par défaut, ce qui peut vous être utile.

1. Effectuez un clic droit sur l'en-tête de la table "Journal réseau", puis sélectionnez Domaine. Le domaine de chaque ressource est maintenant affiché.

   

   Figure 8 : Activer la colonne "Domaine"

Simuler une connexion réseau plus lente

La connexion réseau de l'ordinateur que vous utilisez pour créer des sites est probablement plus rapide que celle des appareils mobiles de vos utilisateurs. En limitant la page, vous pouvez vous faire une meilleure idée de son temps de chargement sur un appareil mobile.

1. Cliquez sur le menu déroulant Limitation, qui est défini sur En ligne par défaut.

   

   Figure 9. Activer la limitation

2. Sélectionnez 3G lente.

   

   Figure 10 : Sélection d'une connexion 3G lente

3. Appuyez de manière prolongée sur Reload (Recharger) , puis sélectionnez Empty Cache And Hard Reload (Vider le cache et actualisation forcée).

   

   Figure 11 : Vider le cache et effectuer un actualisation forcée

   Lors de leurs visites répétées, le navigateur affiche généralement certains fichiers de son cache, ce qui accélère le chargement de la page. Cache vide et actualisation forcée oblige le navigateur à accéder au réseau pour toutes les ressources. Cette fonctionnalité est utile lorsque vous souhaitez savoir comment un nouveau visiteur perçoit le chargement d'une page.

Effectuer des captures d'écran

Les captures d'écran vous permettent de voir à quoi ressemblait une page au fil du temps pendant son chargement.

1. Cliquez sur Capture Screenshots (Captures d'écran) .

2. Actualisez de nouveau la page en suivant la procédure Vider le cache et effectuer un actualisation forcée. Consultez la section Simuler une connexion plus lente si vous avez besoin d'un rappel sur la façon de procéder. Le volet "Captures d'écran" fournit des vignettes illustrant l'apparence de la page à différents moments du processus de chargement.

   

   Figure 12. Captures d'écran du chargement de la page

3. Cliquez sur la première miniature. Les outils de développement indiquent l'activité réseau en cours à ce moment précis.

   

   Figure 13. Activité réseau survenue lors de la première capture d'écran

4. Cliquez à nouveau sur Capture Screenshots (Captures d'écran) pour fermer le volet Screenshots.

5. Actualisez à nouveau la page.

Inspecter les détails d'une ressource

Cliquez sur une ressource pour en savoir plus à son sujet. Essayez maintenant :

1. Cliquez sur getstarted.html. L'onglet Headers (En-têtes) s'affiche. Utilisez cet onglet pour inspecter les en-têtes HTTP.

   

   Figure 14 : Onglet "En-têtes"

2. Cliquez sur l'onglet Aperçu. Un rendu de base du code HTML s'affiche.

   

   Figure 15 : Onglet "Aperçu"

   Cet onglet est utile lorsqu'une API renvoie un code d'erreur en HTML et qu'il est plus facile de lire le code HTML affiché que le code source HTML, ou lors de l'inspection d'images.

3. Cliquez sur l'onglet Response (Réponse). Le code source HTML s'affiche.

   

   Figure 16 : Onglet "Réponses"

4. Cliquez sur l'onglet Durée. Une analyse de l'activité réseau pour cette ressource est présentée.

   

   Figure 17 : Onglet "Durée"

5. Cliquez sur Fermer pour afficher à nouveau le journal réseau.

   

   Figure 18 : Bouton "Fermer"

En-têtes et réponses pour le réseau de recherche

Utilisez le volet Recherche lorsque vous devez rechercher une chaîne ou une expression régulière dans les en-têtes HTTP et les réponses de toutes les ressources.

Par exemple, supposons que vous souhaitiez vérifier si vos ressources utilisent des stratégies de cache raisonnables.

1. Cliquez sur Rechercher . Le volet de recherche s'ouvre à gauche du journal réseau.

   

   Figure 19 : Volet de recherche

2. Saisissez Cache-Control, puis appuyez sur Entrée. Le volet de recherche répertorie toutes les instances de Cache-Control qu'il trouve dans les en-têtes de ressources ou le contenu.

   

   Figure 20 : Résultats de recherche pour "Cache-Control"

3. Cliquez sur un résultat pour l'afficher. Si la requête a été trouvée dans un en-tête, l'onglet En-têtes s'ouvre. Si la requête a été trouvée dans le contenu, l'onglet "Response" (Réponse) s'ouvre.

   

   Figure 21 : Résultat de recherche encadré dans l'onglet "En-têtes"

4. Fermez le volet de recherche et l'onglet "Durée".

   

   Figure 22 : Boutons de fermeture

Filtrer les ressources

Les outils de développement fournissent de nombreux workflows pour exclure les ressources qui ne sont pas pertinentes pour la tâche concernée.

Figure 23 : Barre d'outils "Filtres"

La barre d'outils Filtres doit être activée par défaut. Si ce n'est pas le cas:

1. Cliquez sur Filtrer pour l'afficher.

Filtrer par chaîne, expression régulière ou propriété

La zone de texte Filtre accepte de nombreux types de filtrage.

1. Saisissez png dans la zone de texte Filter (Filtre). Seuls les fichiers contenant le texte png sont affichés. Dans ce cas, les seuls fichiers correspondant au filtre sont les images PNG.

   

   Figure 24 : Un filtre de chaîne

2. Tapez /.*\.[cj]s+$/. Les outils de développement filtrent toutes les ressources dont le nom de fichier ne se termine pas par j ou c suivi d'un ou plusieurs caractères s.

   

   Figure 25 : Un filtre d'expression régulière

3. Tapez -main.css. Les outils de développement filtrent main.css. Si un autre fichier correspondait au modèle, il serait également filtré.

   

   Figure 26 : Un filtre négatif

4. Saisissez domain:raw.githubusercontent.com dans la zone de texte Filter (Filtre). Les outils de développement filtrent toutes les ressources dont l'URL ne correspond pas à ce domaine.

   

   Figure 27 : Un filtre de propriété

   Consultez Filtrer les requêtes par propriété pour obtenir la liste complète des propriétés filtrables.

5. Effacez le texte de la zone de texte Filtre.

Filtrer par type de ressource

Pour vous concentrer sur un certain type de fichier, comme une feuille de style, procédez comme suit:

1. Cliquez sur CSS. Tous les autres types de fichiers sont filtrés.

   

   Figure 28 : Affichage des fichiers CSS uniquement

2. Pour afficher également les scripts, maintenez la touche Ctrl ou Commande (Mac) enfoncée, puis cliquez sur JS.

   

   Figure 29 : Affichage des fichiers CSS et JS uniquement

3. Cliquez sur Toutes pour supprimer les filtres et afficher à nouveau toutes les ressources.

Consultez Filtrer les requêtes pour découvrir d'autres processus de filtrage.

Bloquer des requêtes

Comment se présente une page et se comporte-t-elle lorsque certaines de ses ressources ne sont pas disponibles ? Est-ce qu'elle échoue complètement ou est-elle encore quelque peu fonctionnelle ? Pour le savoir, bloquez les requêtes:

1. Appuyez sur les touches Ctrl+Maj+P ou Commande+Maj+P (Mac) pour ouvrir le menu Commande.

   

   Figure 30 : Menu de commandes

2. Saisissez block, sélectionnez Show Request Blocking (Afficher le blocage des requêtes), puis appuyez sur Entrée.

   

   Figure 31 : Afficher le blocage des requêtes

3. Cliquez sur Ajouter un format .

4. Tapez main.css.

   

   Figure 32 : Blocage de main.css...

5. Cliquez sur Ajouter.

6. Actualisez la page. Comme prévu, le style de la page est légèrement perturbé, car sa feuille de style principale a été bloquée. Notez la ligne main.css dans le journal réseau. Le texte en rouge signifie que la ressource a été bloquée.

   

   Figure 33 : main.css a été bloqué(e)

7. Décochez la case Activer le blocage des requêtes.

Étapes suivantes

Félicitations, vous avez terminé le tutoriel. Cliquez sur Dispense Award (Dispense Award) pour recevoir votre trophée.

Consultez la documentation de référence sur le réseau pour découvrir d'autres fonctionnalités des outils de développement liées à l'inspection de l'activité réseau.