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 pour inspecter l'activité réseau d'une page.

Si vous préférez parcourir les fonctionnalités, consultez la section Référence réseau.

Poursuivez votre lecture ou regardez la version vidéo de ce tutoriel :

Quand utiliser le panneau Réseau

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 (Réseau) :

• S'assurer que les ressources sont réellement 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 des moyens d'améliorer les performances de chargement des pages, ne commencez pas par le panneau Network. De nombreux types de problèmes de performances de chargement ne sont pas liés à l'activité réseau. Commencez par le panneau Lighthouse, car il vous fournit des suggestions ciblées sur la façon d'améliorer votre page. Consultez Optimiser la vitesse du site Web.

Ouvrir le panneau Réseau

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

1. Ouvrez la démonstration Premiers pas.

   

   Vous pouvez déplacer la démonstration dans une fenêtre distincte.

   

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

   

   Vous pouvez ancrer les outils de développement en bas de votre fenêtre.

   

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

   

Pour le moment, le panneau Network (Réseau) est vide. En effet, les outils de développement n'enregistrent l'activité réseau que lorsqu'ils sont ouverts, et aucune activité réseau n'a eu lieu depuis que vous les avez ouverts.

Enregistrer les activités réseau

Pour afficher l'activité réseau générée par une page :

1. Actualisez la page. Le panneau Network (Réseau) enregistre toutes les activités réseau dans le Network Log (Journal réseau).

   

   Chaque ligne du Network Log (Journal réseau) représente une ressource. Par défaut, les ressources sont listées par ordre chronologique. La ressource en haut est généralement le document HTML principal. La ressource en bas est la dernière ressource demandée.

   Chaque colonne représente des informations sur une ressource. Les colonnes par défaut sont les suivantes :

   • Status (État) : code de réponse HTTP.
   • Type : type de la ressource.
   • Initiator (Initiateur) : ce qui a entraîné la demande d'une ressource. En cliquant sur un lien dans la colonne "Initiator" (Initiateur), vous accédez au code source qui a entraîné la requête.
   • Size (Taille) : quantité de ressources transférée sur le réseau.
   • Time (Durée) : durée de la requête.

2. Tant que les outils de développement sont ouverts, ils enregistrent l'activité réseau dans le Network Log (Journal réseau). Pour le démontrer, examinez d'abord le bas du Network Log (Journal réseau) et notez la dernière activité.

3. Cliquez ensuite sur le bouton Get Data (Obtenir des données) dans la démonstration.

4. Regardez à nouveau en bas du Network Log (Journal réseau). Une nouvelle ressource appelée getstarted.json s'affiche. En cliquant sur le bouton Get Data (Obtenir des données), la page a demandé ce fichier.

   

Afficher plus d'informations

Les colonnes du Network Log (Journal réseau) sont configurables. Vous pouvez masquer les colonnes que vous n'utilisez pas. De nombreuses colonnes sont également masquées par défaut, mais peuvent vous être utiles.

1. Effectuez un clic droit sur l'en-tête du tableau Network Log (Journal réseau), puis sélectionnez Domain (Domaine). Le domaine de chaque ressource s'affiche désormais.

   

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 mieux vous rendre compte du temps nécessaire au chargement d'une page sur un appareil mobile.

1. Cliquez sur la liste déroulante Throttling (Limitation), qui est définie sur No throttling (Aucune limitation) par défaut.

   

2. Sélectionnez 3G.

   

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

   

   Lors des visites répétées, le navigateur diffuse généralement certains fichiers à partir de son cache, ce qui accélère le chargement de page. Empty Cache And Hard Reload (Vider le cache et effectuer une actualisation forcée) oblige le navigateur à accéder au réseau pour toutes les ressources. Cela est utile lorsque vous souhaitez voir comment un visiteur découvre le chargement d'une page.

Faire des captures d'écran

Les captures d'écran montrent l'apparence de votre page à différents moments pendant son chargement et indiquent les ressources chargées à chaque intervalle.

Pour faire des captures d'écran, procédez comme suit :

1. Cliquez sur Network Settings settings.

2. Cochez la case Screenshots (Captures d'écran) check_box.

3. Actualisez de nouveau la page à l'aide du workflow Empty Cache And Hard Reload (Vider le cache et effectuer une actualisation forcée). Consultez Simuler une connexion plus lente si vous avez besoin d'un rappel sur la procédure à suivre. L'onglet Screenshots (Captures d'écran) fournit des miniatures de l'apparence de la page à différents moments du processus de chargement.

   

4. Cliquez sur la première miniature. Les outils de développement vous montrent l'activité réseau qui se produisait à ce moment-là.

   

5. Cochez la case Screenshots (Captures d'écran) pour fermer l'onglet "Screenshots" (Captures d'écran).

6. Actualisez de nouveau la page.

Inspecter les détails d'une ressource

Cliquez sur une ressource pour en savoir plus. 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.

   

2. Cliquez sur l'onglet Preview (Aperçu) pour afficher un rendu en version HTML simplifiée.

   

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

3. Cliquez sur l'onglet Response (Réponse) pour afficher le code source HTML.

   

4. Cliquez sur l'onglet Initiator (Initiateur) pour afficher une arborescence qui mappe la chaîne de l'initiateur de la requête.

   

5. Cliquez sur l'onglet Timing (Timing) pour afficher une répartition de l'activité réseau de cette ressource.

   

6. Cliquez sur Close close pour afficher à nouveau le journal réseau.

   

Rechercher des en-têtes et des réponses réseau

Utilisez l'onglet Search (Rechercher) lorsque vous devez rechercher une chaîne ou une expression régulière dans les en-têtes et les réponses HTTP de toutes les ressources.

Supposons, par exemple, que vous souhaitiez vérifier si vos ressources utilisent des règles de cache raisonnables.

1. Cliquez sur Search search dans la barre d'actions du panneau ou appuyez sur Commande + F (macOS) ou Ctrl + F (Windows / Linux).

   L'onglet Search (Rechercher) s'ouvre à gauche du Network log (Journal réseau).

   

2. Saisissez Cache-Control, puis appuyez sur Entrée. L'onglet Search (Rechercher) liste toutes les instances de Cache-Control qu'il trouve dans les en-têtes ou le contenu des ressources.

   

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

   

4. Fermez l'onglet Search (Rechercher) et l'onglet Headers (En-têtes).

   

Filtrer les ressources

Les outils de développement proposent de nombreux workflows pour filtrer les ressources qui ne sont pas pertinentes pour la tâche à accomplir.

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

1. Cliquez sur Filter filter_alt pour l'afficher.

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

La zone de saisie Filter (Filtrer) est compatible avec de nombreux types de filtrage.

1. Saisissez png dans la zone de saisie Filter (Filtrer). Seuls les fichiers contenant le texte png s'affichent. Dans ce cas, les seules images qui correspondent au filtre sont les images PNG.

   

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

   

3. Saisissez -main.css. Les outils de développement filtrent main.css. Si d'autres fichiers correspondaient au modèle, ils seraient également filtrés.

   

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

   

   Pour obtenir la liste complète des propriétés filtrables, consultez Filtrer les requêtes par propriétés.

5. Effacez tout texte de la zone de saisie Filter (Filtrer).

Filtrer par type de ressource

Pour vous concentrer sur un certain type de fichier, tel que les feuilles de style :

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

   

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

   

3. Cliquez sur All (Tout) pour supprimer les filtres et afficher à nouveau toutes les ressources.

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

Bloquer les requêtes

Comment une page s'affiche-t-elle et se comporte-t-elle lorsque certaines de ses ressources ne sont pas disponibles ? Est-elle complètement défaillante ou est-elle encore quelque peu fonctionnelle ? Bloquez les requêtes pour le découvrir :

1. Appuyez sur Ctrl+Maj+P ou Commande+Maj+P (Mac) pour ouvrir le Command Menu (Menu de commandes).

   

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

   

3. Cliquez sur le bouton Add Pattern (Ajouter un modèle).

4. Saisissez main.css.

   

5. Cliquez sur Add (Ajouter).

6. Actualisez la page. Comme prévu, la mise en forme de la page est légèrement dégradée, 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 est bloquée.

   

7. Décochez la case Enable request blocking (Activer le blocage des requêtes).

Pour découvrir d'autres fonctionnalités des outils de développement liées à l'inspection de l'activité réseau, consultez la section Référence réseau.