Inspecter l'activité réseau

Kayce Basques

Il s'agit d'un tutoriel pratique sur certaines des fonctionnalités DevTools les plus couramment utilisées pour inspecter l'activité réseau d'une page.

Consultez la documentation de référence sur le réseau si vous souhaitez plutôt parcourir les fonctionnalités.

Lisez la suite ou regardez 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:

• Vérifiez que les ressources sont bien 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 Réseau. 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 propose des suggestions ciblées pour améliorer votre page. Consultez la section Optimiser la vitesse du site Web.

Ouvrir le panneau "Network" (Réseau)

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

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

   

   Vous pouvez préférer déplacer la démonstration dans une autre fenêtre.

   

2. Ouvrez DevTools en appuyant sur Ctrl+Maj+J ou Cmd+Option+J (Mac). Le panneau Console s'affiche.

   

   Vous pouvez ancrer DevTools en bas de la fenêtre.

   

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

   

Pour le moment, le panneau Network (Réseau) est vide. En effet, DevTools ne consigne l'activité réseau que lorsqu'il est ouvert, et aucune activité réseau n'a eu lieu depuis que vous l'avez ouvert.

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) consigne toutes les activités réseau dans le Network Log (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. Les colonnes par défaut sont les suivantes:

   • État: code de réponse HTTP.
   • Type: type de la ressource.
   • Initiateur: élément qui a provoqué la demande d'une ressource. Cliquez sur un lien dans la colonne "Initiateur" pour accéder au code source à l'origine de la requête.
   • Taille: quantité de ressources transférées sur le réseau.
   • Temps: durée de la requête.
   Remarque :Le graphique situé au-dessus du journal réseau s'appelle "Vue d'ensemble". Vous ne l'utiliserez pas dans ce tutoriel. Vous pouvez donc le masquer si vous préférez. Consultez Masquer le canal "Aperçu".

2. Tant que vous avez ouvert les outils pour les développeurs, ils enregistrent l'activité réseau dans le journal réseau. Pour le démontrer, commencez par regarder le bas du journal réseau et notez la dernière activité.

3. Cliquez maintenant sur le bouton Obtenir des données dans la démonstration.

4. Consultez à nouveau le bas du journal réseau. Il existe une nouvelle ressource appelée getstarted.json. Lorsque vous avez cliqué sur le bouton Obtenir des données, la page a demandé ce fichier.

   

Afficher plus d'informations

Vous pouvez configurer les colonnes du journal réseau. Vous pouvez masquer les colonnes que vous n'utilisez pas. De nombreuses colonnes sont également masquées par défaut, mais elles peuvent vous être utiles.

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

   

Conseil :Pour afficher l'URL complète d'une ressource, pointez sur sa cellule dans la colonne Nom.

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 estimer le temps de chargement d'une page sur un appareil mobile.

1. Cliquez sur le menu déroulant Limitation, défini par défaut sur Aucune limitation.

   

2. Sélectionnez 3G.

   

3. Appuyez de manière prolongée sur Actualiser Actualiser, puis sélectionnez Vider le cache et effectuer une actualisation forcée.

   

   Lors de 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 la page. 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 pour la première fois vit le chargement d'une page.

   Remarque :Le workflow Vider le cache et recharger n'est disponible que lorsque les outils de développement sont ouverts.

Faire des captures d'écran

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

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

1. Cliquez sur Paramètres réseau settings.

2. Activez la case à cocher check_box Captures d'écran.

3. Actualisez à nouveau la page à l'aide du workflow Vider le cache et effectuer une 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. L'onglet Screenshots (Captures d'écran) fournit des vignettes illustrant l'apparence de la page à différents moments du processus de chargement.

   

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

   

5. Cochez ou décochez la case Captures d'écran pour fermer l'onglet "Captures d'écran".

6. 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 En-têtes s'affiche. Utilisez cet onglet pour inspecter les en-têtes HTTP.

   

2. Cliquez sur l'onglet Aperçu pour afficher un rendu HTML de base.

   

   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) pour afficher le code source HTML.

   

   Conseil :Lorsqu'un fichier est minifié, cliquez sur le bouton Formater data_object en bas de l'onglet Réponse pour reformater le contenu du fichier afin de le rendre plus lisible.

4. Cliquez sur l'onglet Initiateur pour afficher un arbre qui met en correspondance la chaîne de l'initiateur de la requête.

   

5. Cliquez sur l'onglet Timing (Calendrier) pour afficher le détail de l'activité réseau de cette ressource.

   

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

   

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

Utilisez l'onglet 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.

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

1. Cliquez sur Recherche search. L'onglet Rechercher s'ouvre à gauche du journal réseau.

   

2. Saisissez Cache-Control et appuyez sur Entrée. L'onglet Rechercher répertorie 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 "En-têtes" s'ouvre. Si la requête a été trouvée dans le contenu, l'onglet Réponse s'ouvre.

   

4. Fermez les onglets Recherche et En-têtes.

   

Filtrer les ressources

DevTools fournit de nombreux workflows pour filtrer les ressources qui ne sont pas pertinentes pour la tâche à accomplir.

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

1. Cliquez sur Filtrer filter_alt pour l'afficher.

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

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

1. Saisissez png dans la zone de saisie Filtrer. Seuls les fichiers contenant le texte png sont affichés. Dans ce cas, seuls les fichiers PNG correspondent au filtre.

   

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

   

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

   

4. Saisissez domain:raw.githubusercontent.com dans la zone de texte Filtre. DevTools filtre 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 le texte de la zone de saisie Filtrer.

Filtrer par type de ressource

Pour vous concentrer sur un type de fichier spécifique, comme 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 Cmd (Mac) enfoncée, puis cliquez sur JS.

   

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

Pour découvrir d'autres workflows de filtrage, consultez Filtrer les requêtes.

Bloquer des requêtes

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

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

   

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

   

3. Cliquez sur le bouton Ajouter un format.

4. Tapez 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 est bloquée.

   

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

Pour découvrir d'autres fonctionnalités DevTools liées à l'inspection de l'activité réseau, consultez la documentation de référence sur le réseau.