Inspecter l’activité réseau

Utilisez l’outil Réseau pour vous assurer que les ressources que votre page web doit exécuter sont téléchargées comme prévu et que les demandes adressées aux API côté serveur sont correctement envoyées. Inspectez les propriétés des requêtes et réponses HTTP individuelles, telles que les en-têtes HTTP, le contenu ou la taille.

Il s’agit d’une procédure pas à pas de l’outil Réseau , pour inspecter l’activité réseau d’une page.

Pour obtenir une vue d’ensemble des fonctionnalités DevTools liées au réseau, consultez Informations de référence sur les fonctionnalités réseau.

Pour une version vidéo de ce tutoriel, regardez la vidéo suivante :

Quand utiliser l’outil Réseau

En général, utilisez l’outil Réseau lorsque vous devez vous assurer que les ressources sont téléchargées correctement et que les demandes aux API côté serveur sont envoyées comme prévu. Les cas d’usage les plus courants de l’outil Réseau sont les suivants :

• Assurez-vous que les ressources sont réellement téléchargées.

• Vérification des paramètres de requête et des réponses des appels d’API côté serveur.

Si vous recherchez des moyens d’améliorer les performances de chargement de page, l’outil Réseau peut vous aider à comprendre la quantité de données téléchargées et le temps nécessaire pour les télécharger, mais il existe de nombreux autres types de problèmes de performances de charge qui ne sont pas liés à l’activité réseau. Pour examiner plus en détail les problèmes de performances de chargement de page, vous pouvez utiliser l’outil Performances, l’outil Problèmes et l’outil Lighthouse , car il vous donne des suggestions ciblées sur la façon d’améliorer votre page. Par exemple, consultez Optimiser la vitesse du site web à l’aide de Lighthouse.

Ouvrir l’outil 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 Inspecter l’activité réseau dans un nouvel onglet ou une nouvelle fenêtre :

   

2. Pour ouvrir DevTools, cliquez avec le bouton droit sur la page web, puis sélectionnez Inspect. Vous pouvez également appuyer sur Ctrl+Maj+J (Windows, Linux) ou Cmd+Option+J (macOS). DevTools s’ouvre.

3. Dans DevTools, dans la barre d’activité, sélectionnez l’onglet Réseau . Si cet onglet n’est pas visible, cliquez sur le bouton Autres outils () :

   Vous préférerez peut-être ancrer DevTools au bas de votre fenêtre :

   

L’outil Réseau est initialement vide. DevTools journalise uniquement l’activité réseau après son ouverture, et aucune activité réseau ne s’est produite depuis l’ouverture de DevTools.

Comprendre l’interface utilisateur de l’outil réseau

L’outil Réseau est divisé en trois parties main :

• La barre d’outils supérieure contient des options permettant de personnaliser l’outil et de filtrer les demandes réseau.
• Sous la barre d’outils supérieure, le graphique Vue d’ensemble fournit une vue d’ensemble générale du trafic réseau au fil du temps et permet de filtrer les demandes réseau.
• Sous le graphique Vue d’ensemble , la section Journal réseau affiche l’activité réseau et permet d’inspecter des demandes individuelles.

Activité réseau des journaux

Pour afficher l’activité réseau qu’une page provoque :

1. Actualisez la page web. L’outil Réseau journalise toute l’activité réseau dans le journal réseau :

   

   Chaque ligne du journal réseau représente une ressource. Par défaut, les ressources sont répertoriées par ordre chronologique. La ressource principale est généralement le document HTML main. La ressource inférieure correspond à ce qui a été demandé en dernier.

   Chaque colonne représente des informations sur une ressource. Dans la figure précédente, les colonnes par défaut sont affichées.

   • État. Code status HTTP pour la réponse.

   • Type. Type de ressource.

   • Initiateur. Cause de la demande de ressource. Cliquez sur un lien dans la colonne Initiateur pour accéder au code source à l’origine de la requête.

   • Le temps. Durée de la demande.

   • Cascade. Représentation graphique des différentes étapes de la requête. Pour afficher une répartition, pointez sur une cascade.

   Notez que le graphique Vue d’ensemble montre également l’activité réseau. Vous n’utiliserez pas le graphe Vue d’ensemble de ce tutoriel. Vous pouvez donc le masquer. Consultez Masquer le volet Vue d’ensemble.

   Après avoir ouvert DevTools, il enregistre l’activité réseau dans le journal réseau.

2. Pour le démontrer, examinez d’abord le bas du journal réseau et notez mentalement la dernière activité.

3. À présent, cliquez sur le bouton Obtenir des données dans la démonstration.

4. Examinez à nouveau le bas du journal réseau . Une nouvelle ressource nommée getstarted.json s’affiche :

   

Afficher plus d’informations

Les colonnes du journal réseau sont configurables. Vous pouvez masquer les colonnes que vous n’utilisez pas. Il existe également de nombreuses colonnes masquées par défaut, ce qui peut vous être utile.

1. Cliquez avec le bouton droit sur l’en-tête de la table Journal réseau, puis sélectionnez Domaine. Le domaine de chaque ressource est maintenant affiché :

   

2. 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 les connexions réseau des appareils mobiles de vos utilisateurs. En limitant la page, vous avez une meilleure idée de la durée de chargement d’une page sur un appareil mobile.

1. Sélectionnez la liste déroulante Limitation dans la barre d’outils supérieure. Il est défini sur Aucune limitation par défaut.

2. Sélectionnez Slow 3G :

   

3. Appuyez longuement sur Recharger () (ou cliquez avec le bouton droit sur Actualiser), puis sélectionnez Vider le cache et actualiser en dur :

   

Lors des visites répétées, le navigateur fournit généralement des fichiers à partir du cache, ce qui accélère le chargement de la page. Le cache vide et l’actualisation matérielle forcent le navigateur à accéder au réseau pour toutes les ressources. Utilisez-la pour afficher la façon dont un premier visiteur subit le chargement d’une page.

Le flux de travail Cache vide et actualisation matérielle est disponible uniquement lorsque DevTools est ouvert.

Voir aussi Émuler des connexions réseau lentes dans Informations de référence sur les fonctionnalités réseau.

Captures d’écran

Captures d’écran montrant l’apparence d’une page web au fil du temps pendant son chargement.

1. Cliquez sur le bouton (), puis cochez la case Capture d’écran :

   

2. Actualisez à nouveau la page à l’aide du flux de travail Cache vide et actualisation en dur . Consultez Simuler une connexion plus lente ci-dessus si vous avez besoin d’un rappel sur la procédure à suivre.

   Le panneau Captures d’écran fournit des miniatures de l’affichage de la page à différents points pendant le processus de chargement :

   

3. Cliquez sur la première miniature. DevTools vous montre l’activité réseau qui s’est produite à ce moment -là :

   

4. Cliquez à nouveau sur () et désactivez la case à cocher Capturer les captures d’écran pour fermer le volet Captures d’écran .

5. Actualisez à nouveau la page.

Inspecter les détails de la ressource

Sélectionnez une ressource pour en savoir plus.

1. Sélectionnez network-tutorial/ . Le panneau En-têtes s’affiche. Utilisez ce panneau pour inspecter les en-têtes HTTP :

   

2. Sélectionnez le panneau Aperçu . Un rendu de base du code HTML s’affiche :

   

   Le panneau est utile lorsqu’une API retourne un code d’erreur au format HTML. Vous trouverez peut-être plus facile de lire le code HTML rendu que le code source HTML ou lorsque vous inspectez des images.

3. Sélectionnez le panneau Réponse . Le code source HTML s’affiche :

   

   Conseil : Lorsqu’un fichier est minifié, sélectionnez le bouton Format () en bas du panneau Réponse pour re-formater le contenu du fichier pour plus de lisibilité.

   Par exemple, si la réponse contient des données JSON réduites, cliquez sur le bouton Format pour re-formater la syntaxe JSON afin que chaque propriété d’objet soit sur sa propre ligne. Vous pouvez également utiliser la visionneuse JSON pour afficher les réponses JSON mises en forme et mises en surbrillance dans un onglet de navigateur. Consultez Afficher le format JSON.

4. Sélectionnez le panneau Minutage . Une répartition de l’activité réseau pour la ressource s’affiche :

   

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

   

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

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

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

1. Sélectionnez Rechercher (). Le volet De recherche s’ouvre à gauche du journal réseau :

   

2. Tapez no-cache et appuyez sur Entrée. Le volet Recherche répertorie toutes les instances qu’il no-cache trouve dans les en-têtes de ressource ou le contenu :

   

3. Cliquez sur un résultat pour afficher la ressource dans laquelle le résultat a été trouvé. Si vous examinez les détails de la ressource, sélectionnez un résultat pour y accéder directement. Par exemple, si la requête a été trouvée dans un en-tête, le panneau En-têtes s’ouvre. Si la requête a été trouvée dans le contenu, le panneau Réponse s’ouvre :

   

4. Fermez le volet De recherche et le volet En-têtes .

Filtrer les ressources

DevTools fournit de nombreux flux de travail pour filtrer les ressources qui ne sont pas pertinentes pour la tâche en cours.

La barre d’outils Filtres doit être activée par défaut. Si la barre d’outils Filtres n’est pas activée, cliquez sur Filtrer () pour l’afficher :

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

La zone de texte Filtrer prend en charge de nombreux types de filtrage.

1. Tapez png dans la zone de texte Filtrer . Seuls les fichiers qui contiennent le texte png sont affichés. Dans ce cas, les seuls fichiers qui correspondent au filtre sont les images PNG.

2. Type /.*\.[cj]s+$/, qui est une expression régulière JavaScript. DevTools filtre toutes les ressources dont le nom de fichier ne se termine pas par un j ou un c suivi de 1 ou plusieurs s caractères.

3. Tapez -main.css. DevTools filtre main.css. Si un fichier correspond à ce modèle, il est également filtré.

4. Tapez larger-than:1000 dans la zone de texte Filtrer . DevTools filtre toutes les ressources dont les réponses sont inférieures à 1 000 octets.

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

5. Effacez la zone de texte Filtrer de tout texte.

Filtrer par type de ressource

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

1. Sélectionnez CSS. Tous les autres types de fichiers sont filtrés :

   

2. Pour afficher également les scripts, appuyez longuement sur Ctrl (Windows, Linux) ou Commande (macOS), puis cliquez sur JS.

3. Pour supprimer les filtres et afficher à nouveau toutes les ressources, sélectionnez Tout.

Pour les autres flux de travail de filtrage, consultez Filtrer les demandes.

Bloquer les demandes

À quoi ressemble une page et se comporte-t-elle quand certaines des ressources de la page ne sont pas disponibles ? Est-ce qu’il échoue complètement ou est-il encore quelque peu fonctionnel ? Bloquer les demandes pour en savoir plus :

1. Appuyez sur Ctrl+Maj+P (Windows, Linux) ou Cmd+Maj+P (macOS) pour ouvrir le menu Commandes.

2. Tapez block, sélectionnez Afficher le blocage des requêtes réseau, puis appuyez sur Entrée :

   

3. Cliquez sur Ajouter un modèle (), tapez main.css, puis cliquez sur Ajouter :

   

4. Actualisez la page. Comme prévu, le style de la page est légèrement raté, car la main feuille de style a été bloquée.

   Dans la main.css ligne du journal réseau, le texte rouge signifie que la ressource a été bloquée :

   

5. Décochez la case Activer le blocage des requêtes réseau .

Conclusion

Félicitations, vous avez terminé le tutoriel ! Vous savez maintenant comment utiliser l’outil Réseau dans Microsoft Edge DevTools.

Pour découvrir d’autres fonctionnalités DevTools liées à l’inspection de l’activité réseau, consultez Informations de référence sur les fonctionnalités réseau.

Remarque

Certaines parties de cette page sont des modifications fondées sur le travail créé et partagé par Google et utilisées conformément aux conditions décrites dans la licence internationale 4,0 d’attribution créative. La page d’origine se trouve ici et est créée par Kayce Basques (Rédacteur technique, Chrome DevTools & Lighthouse).

Cette œuvre est concédée sous licence creative commons attribution 4.0 international.