Inspecter l'activité réseau

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.

    La version de démonstration

    Figure 1 : La version de démonstration

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

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

    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.

    La console

    Image 3. La console

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

    Outils de développement ancrés 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.

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

    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.

    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.

    Une nouvelle ressource dans le journal réseau

    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é.

    Activer la colonne "Domaine"

    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.

    Activer la limitation

    Figure 9. Activer la limitation

  2. Sélectionnez 3G lente.

    Sélection d'une connexion 3G lente

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

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

    Vider le cache et effectuer un 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) 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.

    Captures d'écran du chargement de la page

    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.

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

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

  4. Cliquez à nouveau sur Capture Screenshots (Captures d'écran) 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.

    Onglet "En-têtes"

    Figure 14 : Onglet "En-têtes"

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

    Onglet "Aperçu"

    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.

    Onglet "Réponses"

    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.

    Onglet "Durée"

    Figure 17 : Onglet "Durée"

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

    Bouton "Fermer"

    Figure 18 : Bouton "Fermer"

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 Rechercher. Le volet de recherche s'ouvre à gauche du journal réseau.

    Volet de recherche

    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.

    Résultats de recherche pour Cache-Control

    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.

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

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

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

    Boutons de fermeture

    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.

Barre d'outils "Filtres"

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 Filtre 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.

    Un filtre de chaîne

    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.

    Un filtre d'expression régulière

    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é.

    Un filtre négatif

    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.

    Un filtre de propriété

    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.

    Affichage des fichiers CSS uniquement

    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.

    Affichage des fichiers CSS et JS uniquement

    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.

    Menu de commandes

    Figure 30 : Menu de commandes

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

    Afficher le blocage des requêtes

    Figure 31 : Afficher le blocage des requêtes

  3. Cliquez sur Ajouter un format Ajouter un schéma.

  4. Tapez main.css.

    Blocage de 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.

    main.css a été bloqué

    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.