Informations de référence sur les fonctionnalités réseau

L’outil Réseau dispose des fonctionnalités suivantes pour inspecter l’activité réseau d’une page web. Pour obtenir une procédure pas à pas et une présentation de l’outil Réseau , consultez Inspecter l’activité réseau.

Contenu détaillé :

• Enregistrer les demandes réseau
  • Arrêter l’enregistrement des demandes réseau
  • Effacer les demandes
  • Enregistrer les demandes sur les chargements de page
  • Capture d’écran pendant le chargement de la page
  • Relecture d’une requête XHR
• Modifier le comportement de chargement
  • Émuler un premier visiteur en désactivant le cache du navigateur
    • Désactiver le cache du navigateur à partir de l’outil Conditions réseau
  • Effacer manuellement le cache du navigateur
  • Émuler hors connexion
  • Émuler des connexions réseau lentes
    • Créer un profil de limitation personnalisé
    • Limiter les connexions WebSocket
    • Émuler des connexions réseau lentes à partir de l’outil Conditions réseau
  • Effacer manuellement les cookies du navigateur
  • Remplacer les en-têtes de réponse HTTP
  • Remplacer l’agent utilisateur
• Définir les indicateurs du client de l’agent utilisateur
• Demandes de recherche
• Filtrer les demandes
  • Filtrer les demandes par propriétés
  • Filtrer les demandes par type
  • Filtrer les demandes par heure
  • Masquer les URL de données
  • Masquer les URL d’extension
  • Afficher uniquement les requêtes avec des cookies de réponse bloqués
  • Afficher uniquement les demandes bloquées
  • Afficher uniquement les demandes tierces
• Demandes de tri
  • Trier par colonne
  • Trier par phase d’activité
• Analyser les demandes
  • Afficher un journal des demandes
    • Ajouter ou supprimer des colonnes
    • Ajouter des colonnes personnalisées pour les en-têtes de réponse
  • Regrouper les demandes par trames inline
  • Afficher la relation de minutage des requêtes
  • Analyser les messages d’une connexion WebSocket
  • Analyser les événements dans un flux
  • Afficher un aperçu du corps d’une réponse
  • Afficher un corps de réponse
  • Afficher les en-têtes HTTP
    • Afficher la source d’en-tête HTTP
    • Avertissement des en-têtes provisoires
  • Afficher la charge utile de la requête (paramètres de chaîne de requête et données de formulaire)
    • Afficher la source de charge utile
    • Afficher les paramètres de chaîne de requête encodés dans une URL
  • Afficher les cookies
  • Afficher la répartition temporelle d’une requête
    • Afficher un aperçu d’une répartition de minutage
    • Phases de répartition du temps expliquées
  • Afficher les initiateurs et les dépendances
  • Afficher les événements de chargement
  • Afficher le nombre total de demandes
  • Afficher la taille totale du téléchargement
  • Afficher la trace de pile à l’origine d’une requête
  • Afficher la taille non compressée d’une ressource
• Exporter les données des demandes
  • Enregistrer toutes les demandes réseau dans un fichier HAR
  • Copier les demandes réseau dans le Presse-papiers
  • Copier le json de la réponse mise en forme dans le Presse-papiers
  • Copier les valeurs de propriété des demandes réseau dans le Presse-papiers
• Modifier la disposition de l’outil Réseau
  • Masquer le volet Filtres
  • Utiliser des lignes de requête volumineuses
  • Masquer le volet Vue d’ensemble
• Voir aussi

Enregistrer les demandes réseau

Par défaut, DevTools enregistre toutes les demandes réseau dans l’outil Réseau , tant que DevTools est ouvert.

Par exemple :

1. Accédez à une page web, telle que la page de démonstration Inspecter l’activité réseau , dans une nouvelle fenêtre ou un nouvel onglet.

2. Cliquez avec le bouton droit sur la page web, puis sélectionnez Inspecter.

   DevTools s’ouvre.

3. Dans DevTools, sélectionnez l’outil Réseau .

4. Actualisez la page web.

   Le bouton Arrêter l’enregistrement du journal réseau est rouge et est disponible :

Arrêter l’enregistrement des demandes réseau

Pour arrêter l’enregistrement des demandes :

1. Dans l’outil Réseau , cliquez sur Arrêter l’enregistrement du journal réseau (). Il devient gris pour indiquer que DevTools n’enregistre plus les demandes.

2. Appuyez sur Ctrl+E (Windows, Linux) ou Cmd+E (macOS) pendant que l’outil Réseau est actif.

Effacer les demandes

Pour effacer toutes les demandes de la table Demandes , dans l’outil Réseau , cliquez sur le bouton Effacer le journal réseau () :

Vous pouvez également appuyer sur Ctrl+L (Windows, Linux, macOS) ou Cmd+K (macOS) pendant que l’outil Réseau a le focus.

Voir aussi :

• Application TODO

Enregistrer les demandes sur les chargements de page

Pour enregistrer les demandes sur les chargements de page, dans l’outil Réseau , cochez la case Conserver le journal :

DevTools enregistre toutes les demandes jusqu’à ce que vous désactiviez Conserver le journal.

Voir aussi :

• Application TODO

Capture d’écran pendant le chargement de la page

Vous pouvez capturer des captures d’écran pour analyser ce qui est affiché pour les utilisateurs en attendant le chargement de votre page.

Pour activer les captures d’écran :

1. Accédez à une page web, telle qu’une application TODO, dans une nouvelle fenêtre ou un nouvel onglet.

2. Cliquez avec le bouton droit sur la page web, puis sélectionnez Inspecter.

   DevTools s’ouvre.

3. Dans DevTools, ouvrez l’outil Réseau .

4. En haut à droite de l’outil Réseau , cliquez sur l’icône Paramètres réseau (engrenage). Une ligne de cases à cocher s’affiche.

5. Cochez la case Capturer les captures d’écran :

   

Pour capturer une capture d’écran :

1. Lorsque l’outil Réseau est activé, appuyez sur Ctrl+F5 pour actualiser la page. Les captures d’écran sont capturées pendant le chargement de la page et les miniatures sont affichées sous la ligne de cases à cocher.

   Vous pouvez interagir avec les captures d’écran comme suit.

2. Pointez sur une capture d’écran pour afficher le point auquel cette capture d’écran a été capturée. Une ligne verticale jaune s’affiche dans le volet graphique Vue d’ensemble .

   

3. Cliquez sur la miniature d’une capture d’écran pour filtrer toutes les demandes qui se sont produites après la capture d’écran.

4. Double-cliquez sur une miniature de capture d’écran pour effectuer un zoom avant et afficher la capture d’écran.

5. Appuyez sur Échap pour fermer la visionneuse de capture d’écran.

Relecture d’une requête XHR

Pour relire une requête XHR :

1. Accédez à une page web, telle que la démonstration de référence de l’outil réseau, dans une nouvelle fenêtre ou un nouvel onglet.

2. Cliquez avec le bouton droit sur la page web, puis sélectionnez Inspecter.

   DevTools s’ouvre.

3. Dans DevTools, sélectionnez l’outil Réseau .

4. Actualisez la page web.

   Dans la table Demandes de l’outil réseau, les lignes s’affichent pour :

   • devtools-network-reference/ (index.html)
   • style.css
   • script.js

5. Dans la page web de démonstration, cliquez sur le bouton Envoyer une requête XHR .

   Dans la table Demandes de l’outil réseau, une data.json ligne est ajoutée. La colonne Initiateur indique script.js:20.

6. Dans la table Demandes , cliquez avec le bouton droit sur la data.json demande, puis sélectionnez Relire XHR.

   Vous pouvez également sélectionner la requête, puis appuyer sur R.

   Dans la table Demandes de l’outil réseau, une deuxième data.json ligne est ajoutée. La colonne Initiateur indique Autre :

   

Pour plus d’informations sur les initiateurs, consultez :

• Affichez les initiateurs et les dépendances ci-dessous.
• Journaliser l’activité réseau dans Inspecter l’activité réseau.

Une fois que vous avez cliqué sur le bouton Envoyer une requête XHR de la démonstration (ce qui entraîne l’envoi d’une requête par JavaScript), l’élément de menu Copier la trace de la pile apparaît dans le menu Copier avec le bouton > droit pour les demandes. Consultez Copier les demandes réseau dans le Presse-papiers ci-dessous.

Modifier le comportement de chargement

Émuler un premier visiteur en désactivant le cache du navigateur

Pour émuler la façon dont un utilisateur vit votre site pour la première fois, activez la case à cocher Désactiver le cache . DevTools désactive le cache du navigateur. Cette fonctionnalité émule plus précisément l’expérience d’un utilisateur pour la première fois, car les demandes sont traitées à partir du cache du navigateur lors de visites répétées.

Case à cocher Désactiver le cache :

Désactiver le cache du navigateur à partir de l’outil Conditions réseau

À partir de l’outil Réseau , vous pouvez ouvrir l’outil Conditions réseau dans le panneau Affichage rapide en bas de DevTools, puis désactiver le cache du navigateur à partir de là :

1. Dans l’outil Réseau, cliquez sur le bouton Plus de conditions réseau ( L’outil Conditions réseau s’ouvre dans le panneau Affichage rapide en bas de DevTools.

2. Dans l’outil Conditions réseau , cochez la case Désactiver le cache :

   

Voir aussi :

• Outil conditions réseau

Effacer manuellement le cache du navigateur

Pour effacer manuellement le cache du navigateur à tout moment, cliquez avec le bouton droit n’importe où dans la table Demandes , puis sélectionnez Effacer le cache du navigateur :

Voir aussi :

• Application TODO

Émuler hors connexion

Une classe d’applications web, nommée Progressive Web Apps (PWA), peut fonctionner hors connexion avec l’aide des workers du service. Vous pouvez trouver utile de simuler rapidement un appareil qui n’a pas de connexion de données, lorsque vous créez ce type d’application.

Pour simuler une expérience réseau hors connexion, sélectionnez le menu > déroulant Aucune limitationPrésélections>hors connexion.

Le menu déroulant Hors connexion :

Émuler des connexions réseau lentes

Pour émuler une 4G rapide, une 4G lente ou une 3G, sélectionnez la présélection correspondante dans le menu déroulant Limitation dans la barre d’action en haut :

Vous pouvez choisir parmi différentes présélections, telles que :

• 4G rapide
• 4G lente
• 3 G
• Offline

Pour ajouter vos propres présélections personnalisées, cliquez sur le menu Limitation, puis sélectionnez Ajouter personnalisé>.

Une icône d’avertissement s’affiche sous l’onglet de l’outil Réseau pour vous rappeler que la limitation est activée :

Voir aussi :

• Simulez une connexion réseau plus lente dans Inspecter l’activité réseau.
• Application TODO

Créer un profil de limitation personnalisé

En plus des présélections, telles que la 4G lente ou rapide, vous pouvez également ajouter vos propres profils de limitation personnalisés.

Pour créer un profil de limitation personnalisé :

1. Accédez à une page web, telle que la page de démonstration Inspecter l’activité réseau , dans une nouvelle fenêtre ou un nouvel onglet.

2. Cliquez avec le bouton droit sur la page web, puis sélectionnez Inspecter.

   DevTools s’ouvre.

3. Sélectionnez l’outil Réseau .

4. Dans le menu Limitation , dans la section Personnalisé , sélectionnez Ajouter.

   Vous pouvez également sélectionner Personnaliser et contrôler lalimitation desparamètres>DevTools>.

   La page Paramètres DevTools s’ouvre, avec la page Limitation sélectionnée.

5. Dans la section Profils de limitation réseau , cliquez sur le bouton Ajouter un profil .

   Des exemples de valeurs sont présentés ci-dessous et sont utilisés dans la section suivante.

6. Dans la zone de texte Nom du profil , entrez 10 Kbits/s.

7. Dans la zone de texte Télécharger , entrez 10 (pour 10 kbit/s).

8. Dans la zone de texte Charger , entrez 10 (pour 10 kbit/s).

9. Dans la zone de texte Latence , entrez 10 (pour 10 ms).

10. Dans la zone de texte Perte de paquets , entrez 1 (pour 1 %).

11. Dans la zone de texte Longueur de la file d’attente de paquets , entrez 10.

12. Cochez la case Réorganisation des paquets :

    

13. Cliquez sur le bouton Ajouter.

    Le profil de limitation personnalisé s’affiche :

    

14. Dans le volet Paramètres , cliquez sur le bouton Fermer (X).

15. Sélectionnez l’outil Réseau .

16. Dans le menu déroulant Limitation , dans la section Personnalisé , sélectionnez votre profil de limitation personnalisé, par exemple 10 Kbits/s :

    

    Une icône d’avertissement () s’affiche sous l’onglet Réseau pour vous rappeler que la limitation est activée.

Voir aussi :

• Configurez un profil de limitation réseau personnalisé dans Limitation.

Limiter les connexions WebSocket

En plus des requêtes HTTP, DevTools peut limiter les connexions WebSocket. Nous allons utiliser le profil de limitation personnalisée lente créé dans la section précédente pour afficher l’effet d’une connexion WebSocket limitée sur votre page web.

Pour observer la limitation WebSocket :

1. Effectuez les étapes de la section précédente, Créer un profil de limitation personnalisé.

2. Accédez à une page qui utilise WebSockets, comme Testeur WebSocket en ligne, dans une nouvelle fenêtre ou un nouvel onglet.

3. Dans la page, établissez la connexion WebSocket.

   Si vous utilisez la page Web WebSocket Tester en ligne , cliquez sur le bouton Se connecter .

   Si vous ne créez pas de compte PieSocket pour obtenir un jeton d’API, la page web affiche « Connexion établie - {"error » :"Clé API inconnue"} ».

   Si vous créez un compte PieSocket pour obtenir un jeton d’API, la page web affiche simplement « Connexion établie ».

4. Cliquez avec le bouton droit sur la page web, puis sélectionnez Inspecter.

   DevTools s’ouvre.

5. Dans DevTools, dans l’outil Réseau, dans le menu déroulant Limitation, sélectionnez10 kbit/spersonnalisés>.

   Cette option a été créée dans la section précédente, Créer un profil de limitation personnalisé.

6. Dans la page web Testeur WebSocket en ligne , dans la zone de texte du message, supprimez DevTools sans limitation, puis entrez DevTools avec limitation.

7. Dans la page web Testeur WebSocket en ligne , cliquez sur le bouton Envoyer .

   La console dans la page web Du testeur WebSocket en ligne affiche DevTools avec limitation.

8. En haut de l’outil Réseau , sélectionnez le bouton Filtre de socket (illustré ci-dessous).

9. Dans le tableau, cliquez sur le nom de votre connexion, par exemple channel_123 ?api_key=....

   Les onglets s’affichent.

10. Sélectionnez l’onglet Messages (illustré ci-dessous).

    Les messages WebSocket envoyés entre le client et le serveur s’affichent.

    La colonne Time indique quand les messages ont été reçus ou envoyés. Ces valeurs de temps reflètent la connexion réseau limitée.

Émuler des connexions réseau lentes à partir de l’outil Conditions réseau

À partir de l’outil Réseau , vous pouvez ouvrir l’outil Conditions réseau dans le panneau Affichage rapide en bas de DevTools, puis limiter la connexion réseau à partir de là :

1. Dans l’outil Réseau , cliquez sur le bouton Plus de conditions réseau ( . L’outil Conditions réseau s’ouvre dans le panneau Affichage rapide en bas de DevTools.

2. Dans l’outil Conditions réseau , dans le menu Limitation du réseau , sélectionnez une vitesse de connexion.

Voir aussi :

• Outil conditions réseau

Effacer manuellement les cookies du navigateur

Pour effacer manuellement les cookies du navigateur à tout moment, cliquez avec le bouton droit n’importe où dans la table Demandes , puis sélectionnez Effacer les cookies du navigateur.

Remplacer les en-têtes de réponse HTTP

Voir aussi :

• Remplacer les ressources de page web avec des copies locales (onglet Remplacements)
• Remplacez les fichiers et les en-têtes de réponse HTTP dans Remplacer le contenu web et les en-têtes de réponse HTTP localement.

Remplacer l’agent utilisateur

Pour remplacer manuellement l’agent utilisateur :

1. Dans l’outil Réseau, cliquez sur le bouton Autres conditions réseau ( L’outil Conditions réseau s’ouvre dans le panneau Affichage rapide en bas de DevTools.

2. Dans l’outil Conditions réseau , décochez la case Utiliser le navigateur par défaut . Les autres contrôles deviennent disponibles.

3. Sélectionnez une option d’agent utilisateur dans le menu ou entrez un agent utilisateur personnalisé dans la zone de texte.

Définir les indicateurs du client de l’agent utilisateur

Si votre site utilise des indicateurs client de l’agent utilisateur et que vous souhaitez les tester, vous pouvez les définir dans l’outil Conditions réseau ou dans Émuler des appareils mobiles (émulation d’appareil).

Pour définir des indicateurs de client de l’agent utilisateur dans l’outil Conditions réseau :

1. Dans l’outil Réseau, cliquez sur le bouton Autres conditions réseau ( L’outil Conditions réseau s’ouvre dans le panneau Affichage rapide en bas de DevTools.

2. Dans la section Agent utilisateur , décochez la case Utiliser le navigateur par défaut , puis développez Indicateurs client de l’agent utilisateur :

   

3. Dans la liste déroulante Agent utilisateur , sélectionnez un navigateur et un appareil prédéfinis. Vous pouvez également accepter la valeur par défaut Custom... et entrer des informations dans la zone de texte Entrer un agent utilisateur personnalisé .

4. Pour un choix (prédéfini ou personnalisé), spécifiez les indicateurs de client de l’agent utilisateur comme suit :

   • Marque et version telles que Edge et 92. Pour ajouter plusieurs paires marque/version, cliquez sur + Ajouter une marque.
   • Version complète du navigateur , telle que 92.0.1111.0.
   • Plateforme et version telles que Windows et 10.0.
   • Architecture telle que x86.
   • Modèle d’appareil tel que Galaxy Nexus.

   Vous pouvez définir ou modifier l’un des indicateurs du client de l’agent utilisateur ; il n’y a aucune valeur obligatoire.

5. Sélectionnez Mettre à jour.

6. Pour vérifier les modifications, cliquez sur Console et tapez navigator.userAgentData. Développez les résultats en fonction des besoins pour afficher les modifications apportées aux données de l’agent utilisateur.

Voir aussi :

• Indicateurs du client de l’agent utilisateur dans Détection de Microsoft Edge à partir de votre site web.

Demandes de consultation

Pour effectuer une recherche dans les en-têtes de requête, les charges utiles et les réponses :

1. Dans l’outil Réseau , cliquez sur le bouton Rechercher (). Vous pouvez également appuyer sur Ctrl+F (Windows, Linux) ou Cmd+F (macOS).

   L’onglet Recherche s’ouvre sur le côté gauche de l’outil Réseau.

2. Dans la zone de texte Rechercher , entrez votre chaîne de requête, puis appuyez sur Entrée.

   Si vous le souhaitez, cliquez sur le bouton Correspondance de la casse pour activer le respect de la casse. Si vous le souhaitez, cliquez sur le bouton Expression régulière pour activer les expressions régulières.

3. Cliquez sur l’un des résultats de la recherche. L’outil Réseau met en surbrillance en jaune la requête qui correspond. L’outil Réseau ouvre également l’onglet En-têtes ou Réponse et met en surbrillance la chaîne qui y correspond, le cas échéant.

Pour actualiser les résultats de la recherche, sous l’onglet Recherche , cliquez sur le bouton Actualiser ().

Pour effacer les résultats de la recherche, sous l’onglet Recherche , cliquez sur le bouton Effacer la recherche ().

Pour plus d’informations sur toutes les façons dont vous pouvez effectuer des recherches dans DevTools, consultez Rechercher des fichiers sources pour une page à l’aide de l’outil de recherche

Filtrer les demandes

Vous pouvez filtrer les demandes par propriétés, par type ou par heure, et vous pouvez masquer les URL de données. La liste déroulante Autres filtres contient les options et status coches suivantes :

• Masquer les URL de données
• Masquer les URL d’extension
• Cookies de réponse bloqués
• Demandes bloquées
• Demandes tierces

La liste déroulante comporte un nombre sur la gauche qui indique le nombre de filtres sélectionnés dans la liste déroulante.

Filtrer les demandes par propriétés

Utilisez la zone de texte Filtrer pour filtrer les demandes par propriétés, telles que le domaine ou la taille de la requête.

Si la zone de texte n’est pas affichée, le volet Filtres est probablement masqué ; consultez Masquer le volet Filtres ci-dessous.

La zone de texte Filtrer :

Pour inverser votre filtre, cochez la case Inverser en regard de la zone Filtre .

Vous pouvez utiliser plusieurs propriétés simultanément en séparant chaque propriété par un espace. Par exemple, mime-type:image/png larger-than:1K affiche tous les png dont la taille est supérieure à 1 kilo-octet. Les filtres à propriétés multiples sont équivalents aux AND opérations. OR les opérations ne sont pas prises en charge.

Liste complète des propriétés prises en charge :

Filtrer les demandes par type

Pour filtrer les demandes par type de requête, cliquez sur les boutons de l’outil Réseau : All, Fetch/XHR, Doc, CSS, JS, Font, Img, Media, Manifest, WS (WebSocket), Wasm (WebAssembly) ou Autre (tout autre type non répertorié ici).

Si les boutons n’apparaissent pas, le volet Filtres peut être masqué. Consultez Masquer le volet Filtres ci-dessous.

Pour activer plusieurs filtres de type simultanément, appuyez longuement sur Ctrl (Windows, Linux) ou Commande (macOS), puis cliquez sur les filtres.

Filtrer les demandes par heure

Cliquez et faites glisser vers la gauche ou la droite dans le volet Vue d’ensemble pour afficher uniquement les demandes qui étaient actives pendant cette période. Le filtre est inclusif. Toute requête qui était active pendant l’heure en surbrillance s’affiche.

Filtrage des requêtes inactives d’environ 300 ms :

Masquer les URL de données

Les URL de données sont de petits fichiers incorporés dans d’autres documents. Toute requête qui s’affiche dans la table Requests qui commence par data: est une URL de données.

Pour masquer les demandes, désactivez la case à cocher Masquer les URL de données :

Masquer les URL d’extension

Pour vous concentrer sur le code que vous créez, vous pouvez filtrer les requêtes non pertinentes envoyées par les extensions que vous avez peut-être installées dans Microsoft Edge. Les demandes d’extension ont des URL qui commencent par chrome-extension://.

Pour masquer les demandes d’extension, dans la barre d’actions Filtres , sélectionnez le menu déroulant Autres filtres , puis sélectionnez Masquer les URL d’extension afin qu’une coche s’affiche en regard de celle-ci :

La barre status en bas affiche le nombre de demandes affichées sur le total, par exemple 5/10 requêtes.

Afficher uniquement les requêtes avec des cookies de réponse bloqués

Pour filtrer tout, à l’exception des demandes avec des cookies de réponse bloqués pour une raison quelconque, dans la barre d’action Filtres , sélectionnez la liste déroulante Autres filtres , puis sélectionnez Cookies de réponse bloqués afin qu’une coche s’affiche en regard de celle-ci.

Ensuite, pour savoir pourquoi un cookie de réponse a été bloqué, sélectionnez la demande (sous Nom), ouvrez son onglet Cookies (à droite), puis pointez sur l’icône informations ().

Par exemple :

1. Dans Microsoft Edge, sélectionnez Paramètres et plus>Nouvelle fenêtre InPrivate.

2. Dans la barre d’adresse, entrez Microsoft.com.

3. Cliquez avec le bouton droit sur la page web, puis sélectionnez Inspecter.

   DevTools s’ouvre.

4. Sélectionnez l’outil Réseau .

5. Vérifiez que le bouton Tout filtrer est sélectionné.

6. Actualisez la page web.

   De nombreux messages sont répertoriés dans l’outil Réseau .

7. Dans la barre d’action Filtres , sélectionnez la liste déroulante Autres filtres , puis sélectionnez Cookies de réponse bloqués.

   Dans le menu, une coche s’affiche en regard de Cookies de réponse bloqués.

8. Cliquez en dehors de la liste déroulante pour la fermer.

   Les requêtes qui ont bloqué des cookies de réponse sont affichées, telles que id ?d_visid_ver=....

9. Sélectionnez une requête, par exemple id ?d_visid_ver=....

   La barre latérale s’ouvre, avec des onglets.

10. Sélectionnez l’onglet Cookies .

11. Pointez sur l’icône ).

    L’info-bulle indique, par exemple : « Cette tentative de définition d’un cookie via un en-tête Set-Cookie a été bloquée en raison des préférences de l’utilisateur . »

    

    La barre de status en bas affiche le nombre de demandes affichées par rapport au total.

En outre, l’outil Réseau affiche une icône d’avertissement () en regard d’une requête avec des cookies bloqués en raison d’indicateurs edge ou de configuration. Pointez sur l’icône pour afficher une info-bulle avec un indice et cliquez dessus pour accéder à l’outil Problèmes pour plus d’informations.

Afficher uniquement les demandes bloquées

Pour filtrer tout, sauf les demandes bloquées, dans la barre d’actions Filtres, sélectionnez Autres filtresDemandes bloquées>, afin qu’une coche s’affiche. Pour tester cela, vous pouvez utiliser l’outil de blocage des requêtes réseau dans le panneau Affichage rapide en bas de DevTools . consultez Bloquer les demandes dans Inspecter l’activité réseau.

Par exemple :

1. Accédez à une page web, telle que la page de démonstration Inspecter l’activité réseau , dans une nouvelle fenêtre ou un nouvel onglet.

2. Cliquez avec le bouton droit sur la page web, puis sélectionnez Inspecter.

   DevTools s’ouvre.

3. Dans DevTools, sélectionnez l’outil Réseau .

4. Actualisez la page web.

   La table Requests répertorie les .htmlfichiers , .css, .pnget .js .

5. Dans la liste déroulante Autres filtres (avec l’info-bulle Afficher uniquement/masquer les demandes), sélectionnez Demandes bloquées.

   Dans la liste déroulante, une coche s’affiche en regard de Demandes bloquées.

6. Cliquez en dehors de la liste déroulante pour la fermer.

   La table Requests est vide, car DevTools ne bloque aucune demande et les requêtes sont désormais filtrées pour afficher uniquement les requêtes bloquées.

7. Appuyez sur Échap une ou deux fois pour que le panneau Affichage rapide s’ouvre en bas de DevTools.

8. Dans la barre d’outils Affichage rapide , cliquez sur le bouton Plus d’outils (), puis sélectionnez Blocage des requêtes réseau.

   L’outil De blocage des requêtes réseau s’ouvre dans le panneau Affichage rapide.

9. Dans l’outil Blocage des requêtes réseau , cliquez sur le bouton Ajouter un modèle de blocage de requête réseau ( .

10. Dans la zone de texte Modèle texte pour bloquer les demandes correspondantes , entrez *.png, puis cliquez sur le bouton Ajouter .

    *.png est répertorié, avec une coche.

    Dans l’outil Réseau , la table Requests est toujours vide, car aucune demande n’a encore été activement bloquée.

11. Actualisez la page web.

    

    • Dans la page web de démonstration, au lieu d’un logo Edge en regard du titre, une icône d’image cassée est affichée, ainsi que le texte de remplacement de l’image (logo Microsoft Edge DevTools).

    • Dans l’outil Réseau , la table Demandes répertorie uniquement les .png fichiers. La table Requests met en évidence les demandes bloquées sous forme de texte rouge.

    • Dans l’outil Réseau, la barre de status en bas affiche le nombre de demandes affichées sur le total, par exemple 2/5 demandes.

Afficher uniquement les demandes tierces

Pour filtrer tout à l’exception des requêtes dont l’origine diffère de l’origine de la page, dans la barre d’action Filtres, sélectionnez Autres filtres demandes tierces>, afin qu’une coche s’affiche. Essayez-le dans la page de démonstration Inspecter l’activité réseau .

La barre de status en bas affiche le nombre de demandes affichées par rapport au total.

Demandes de tri

Par défaut, les demandes de la table Requests sont triées par heure d’initiation, mais vous pouvez trier la table à l’aide d’autres critères.

Trier par colonne

Cliquez sur l’en-tête d’une colonne dans demandes de tri des demandes en fonction de cette colonne.

Trier par phase d’activité

La colonne Cascade est désactivée par défaut. Pour activer la colonne Cascade : cliquez avec le bouton droit sur un en-tête de table Demandes , puis sélectionnez l’élément de menu Cascade simple qui n’a pas de sous-menu.

Pour modifier la façon dont la colonne Cascade trie les requêtes :

• Cliquez avec le bouton droit sur l’en-tête de la table Demandes , cliquez sur Cascade, puis sélectionnez l’une des options suivantes :

  • Heure de début : la première requête lancée est placée en haut.

  • Temps de réponse : la première demande qui a démarré le téléchargement est placée en haut.

  • Heure de fin : la première requête qui s’est terminée est placée en haut.

  • Durée totale : la requête avec les paramètres de connexion les plus courts et la demande ou la réponse est placée en haut.

  • Latence : la requête qui a attendu le plus court délai pour obtenir une réponse est placée en haut.

Ces descriptions supposent que chaque option respective est classée de la plus courte à la plus longue. Cliquez sur l’en-tête de la colonne Cascade pour inverser l’ordre.

L’exemple suivant montre le tri de la cascade par durée totale. La partie la plus claire de chaque barre est le temps passé à attendre et la partie la plus sombre est le temps passé à télécharger les octets :

Analyser les demandes

Tant que DevTools est ouvert, il journalise toutes les demandes dans l’outil Réseau . Utilisez l’outil Réseau pour analyser les demandes.

Afficher un journal des demandes

Utilisez la table Requests pour afficher un journal de toutes les demandes effectuées pendant que DevTools a été ouvert. Pour afficher plus d’informations sur chaque élément, cliquez ou pointez sur les demandes.

La table Requests affiche les colonnes suivantes par défaut :

• Nom. Nom de fichier de la ressource ou identificateur de la ressource.
• État. Le code d’état HTTP.
• Tapez. Type MIME de la ressource demandée.
• Initiateur. Les objets ou processus suivants peuvent lancer des requêtes :
  • Analyseur. Analyseur HTML.
  • Rediriger. Redirection HTTP.
  • Script. Fonction JavaScript.
  • Autre. D’autres processus ou actions, comme accéder à une page via un lien ou entrer une URL dans la barre d’adresse.
• Taille. Taille combinée des en-têtes de réponse et du corps de la réponse, tel que remis par le serveur.
• Le temps. Durée totale, du début de la demande à la réception de l’octet final dans la réponse.
• Rempli par. Indique si la requête a été satisfaite par le cache HTTP ou le worker de service de l’application.

La colonne Cascade est désactivée par défaut. Pour activer la colonne Cascade , cliquez avec le bouton droit sur un en-tête de table Demandes , puis sélectionnez l’élément de menu Cascade simple qui n’a pas de sous-menu.

Ajouter ou supprimer des colonnes

Cliquez avec le bouton droit sur l’en-tête de la table Demandes et sélectionnez un nom de colonne pour le masquer ou l’afficher. Les colonnes actuellement affichées ont des coches à côté d’elles.

Ajouter des colonnes personnalisées pour les en-têtes de réponse

Pour ajouter une colonne personnalisée à la table Requests :

1. Cliquez avec le bouton droit sur l’en-tête de la table Demandes, puis sélectionnez En-têtes> de réponseGérer les colonnes d’en-tête.

   La fenêtre contextuelle Gérer les colonnes d’en-tête s’ouvre.

2. Cliquez sur le bouton Ajouter un en-tête personnalisé , entrez le nom de l’en-tête personnalisé, puis cliquez sur Ajouter.

   

Regrouper les demandes par trames inline

Si les cadres inline d’une page lancent un grand nombre de demandes, vous pouvez rendre le journal des demandes plus convivial en les regroupant.

Pour regrouper les demandes par iframes :

1. Accédez à une page web, telle que la démonstration de référence de l’outil réseau, dans une nouvelle fenêtre ou un nouvel onglet.

2. Cliquez avec le bouton droit sur la page web, puis sélectionnez Inspecter.

   DevTools s’ouvre.

3. Dans DevTools, sélectionnez l’outil Réseau .

4. Actualisez la page web.

   Dans la table Demandes de l’outil réseau, les lignes s’affichent pour :

   • devtools-network-reference/ (index.html)
   • style.css
   • script.js

5. Dans la page web de démonstration, cliquez sur le bouton Charger des iframes .

   De nombreuses lignes sont ajoutées dans la table Requests :

   

6. Dans l’outil Réseau , cliquez sur le bouton Paramètres réseau (), puis cochez la case Regrouper par trame .

   Dans la table Demandes , les noms de cadres extensibles sont affichés.

7. Dans la table Demandes , cliquez sur un triangle de développement sur un cadre.

   Les requêtes qui ont été lancées par le cadre inline sont affichées :

   

Afficher la relation de minutage des requêtes

Utilisez la colonne Cascade du volet Demandes pour afficher les relations de minutage des requêtes. La organization par défaut de la colonne Cascade utilise l’heure de début des requêtes. Par conséquent, les requêtes qui sont plus à gauche ont démarré plus tôt que les requêtes qui sont plus à droite.

La colonne Cascade est désactivée par défaut. Pour activer la colonne Cascade , cliquez avec le bouton droit sur un en-tête de table Demandes , puis sélectionnez l’élément de menu Cascade simple qui n’a pas de sous-menu.

Pour voir les différentes façons dont vous pouvez trier la cascade, consultez Trier par phase d’activité, ci-dessus.

Colonne Cascade du volet Demandes :

Analyser les messages d’une connexion WebSocket

Pour afficher les messages d’une connexion WebSocket :

1. Accédez à une page web, telle que le testeur Websocket en ligne.

2. Cliquez avec le bouton droit sur la page web, puis sélectionnez Inspecter.

   DevTools s’ouvre.

3. Sélectionnez l’outil Réseau .

   Le bouton Tout filtrer est sélectionné par défaut. Le panneau Réseau est vide et n’affiche aucun message.

4. Actualisez la page web.

   Dans la table Demandes de l’outil réseau, de nombreuses demandes sont répertoriées.

5. En haut de l’outil Réseau , sélectionnez le bouton Filtre de socket , avec info-bulle : WebSocket | Transport web | DirectSocket.

   La liste filtrée des demandes est vide.

6. Dans la page web Testeur Websocket en ligne, cliquez sur le bouton Se connecter .

   Si vous n’avez pas configuré de compte et de jeton d’API, la page affiche :

   • Connexion établie
   • {"error » :"Unknown API key"} avec un triangle pointant vers le bas ; envoyé du serveur au navigateur.

   Dans l’outil Réseau , sous l’onglet Messages , la requête s’affiche :

   • channel_123 ?api_key=...

7. Dans la liste des demandes, sélectionnez la connexion WebSocket, par exemple channel_123 ?api_key=....

   La barre latérale s’ouvre, avec des onglets.

8. Sélectionnez l’onglet Messages .

   Si vous ne vous êtes pas inscrit à un jeton d’API, l’onglet Messages répertorie le message :

   • {"error » :"Unknown API key"} avec une flèche rouge vers le bas ; envoyé du serveur au navigateur.

9. Dans la page web Online Websocket Tester, dans la zone de texte, remplacez Hello PieSocket ! par Hello world !, puis cliquez sur le bouton Envoyer .

   Dans la page web, la console affiche le message Hello world ! avec un triangle pointant vers le haut ; envoyé du navigateur au serveur.

   Dans l’outil Réseau , sous l’onglet Messages , le tableau affiche les 100 derniers messages ; dans ce cas, le message est ajouté :

   • Salut tout le monde! avec une flèche verte vers le haut ; envoyée du navigateur au serveur :

Remarque : pour obtenir des messages de flèche vers le bas rouges (repris à partir du serveur), ainsi que des messages de flèche verte vers le haut, vous devez :

1. Créez un compte sur le site PieSocket. Cela crée un jeton d’API.

2. Créez un cluster sur le site PieSocket.

3. Dans la page du tableau de bord PieSocket , cliquez sur le bouton Tester en ligne .

   La page Testeur WebSocket en ligne s’ouvre, avec vos paramètres de requête.

4. Cliquez sur le bouton Se connecter .

Pour actualiser la table Demandes , dans le volet Nom , cliquez à nouveau sur le nom de la connexion WebSocket.

La table Requests contient les trois colonnes suivantes :

• Données : Charge utile du message. Si le message est en texte brut, il s’affiche ici. Pour les opcodes binaires, cette colonne affiche le nom et le code de l’opcode. Les opcodes suivants sont pris en charge :

  • Cadre de continuation
  • Trame binaire
  • Cadre de fermeture de connexion
  • Ping Frame
  • Cadre de Pong

• Longueur. Longueur de la charge utile du message, en octets.

• Le temps. Heure à laquelle le message a été reçu ou envoyé.

Analyser les événements dans un flux

Pour afficher les événements que les serveurs diffusent via l’API Fetch, l’API EventSource et XHR :

1. Accédez à une page web qui diffuse en continu des événements, tels que la démonstration de référence de l’outil réseau, dans une nouvelle fenêtre ou un nouvel onglet.

2. Cliquez avec le bouton droit sur la page web, puis sélectionnez Inspecter.

   DevTools s’ouvre.

3. Dans DevTools, sélectionnez l’outil Réseau .

4. Actualisez la page web.

   Dans la table Demandes de l’outil réseau, les lignes s’affichent pour :

   • devtools-network-reference/ (index.html)
   • style.css
   • script.js

5. Dans la page web de démonstration, cliquez sur le bouton Stream événements envoyés par le serveur.

   Dans la table Requests , une sse ligne (événement envoyé par le serveur) est ajoutée.

6. Sélectionnez la sse demande (événement envoyé par le serveur).

   La barre latérale s’ouvre, y compris un onglet EventStream .

7. Sélectionnez l’onglet EventStream :

   

   Un nouveau message « hello » est reçu et affiché une fois par seconde.

Pour filtrer les événements, spécifiez une expression régulière dans la barre de filtre en haut de l’onglet EventStream .

Pour effacer la liste des événements capturés, cliquez sur le bouton Effacer ().

Voir aussi :

• Utilisation de l’API Fetch
• Événements envoyés par le serveur - API EventSource.
• XMLHttpRequest : XHR.

Afficher un aperçu du corps d’une réponse

Pour afficher un aperçu du contenu d’un corps de réponse HTTP :

1. Dans l’outil Réseau , dans la table Demandes , dans la colonne Nom , cliquez sur le nom d’une requête.

2. Dans la barre latérale, sélectionnez l’onglet Aperçu :

   

L’onglet Aperçu est principalement utile pour afficher des images.

Afficher un corps de réponse

Pour afficher le corps de la réponse à une demande :

1. Dans la table Demandes , dans la colonne Nom , cliquez sur le nom de la demande.

2. Dans la barre latérale, sélectionnez l’onglet Réponse :

   

Afficher les en-têtes HTTP

Pour afficher les données d’en-tête HTTP relatives à une requête :

1. Dans la table Demandes , cliquez sur le nom de la demande.

2. Dans la barre latérale, sélectionnez l’onglet En-têtes , puis faites défiler jusqu’aux différentes sections :

   • Général
   • En-têtes d’indicateurs précoces (facultatif)
   • En-têtes de réponse
   • En-têtes de requête

   

Afficher la source d’en-tête HTTP

Par défaut, l’onglet En-têtes affiche les noms d’en-têtes par ordre alphabétique. Pour afficher les noms d’en-tête HTTP dans l’ordre dans lequel ils ont été reçus :

1. Accédez à une page web qui utilise XHR, telle que La suppression de -ms-high-contrast et l’adoption de couleurs forcées basées sur des normes dans Microsoft Edge, dans une nouvelle fenêtre ou un nouvel onglet.

2. Acceptez les cookies dans l’invite de bannière, le cas échéant.

   Dans les régions où le Règlement général sur la protection des données (RGPD) est appliqué, ce site affiche une bannière de cookie et n’envoie pas de collect demande (ci-dessous), sauf si vous acceptez les cookies dans la bannière.

3. Cliquez avec le bouton droit sur la page web, puis sélectionnez Inspecter.

   DevTools s’ouvre.

4. Sélectionnez l’outil Réseau .

5. Actualisez la page web.

   Dans la table Demandes , de nombreuses demandes sont répertoriées.

6. Cliquez sur le bouton rouge Arrêter l’enregistrement du journal réseau () en haut.

7. Dans la table Demandes , cliquez sur la colonne Nom pour trier les demandes par ordre alphabétique, puis sélectionnez une demande de collecte .

   La barre latérale s’ouvre, avec des onglets.

8. Sélectionnez l’onglet En-têtes :

   

9. Cochez la case Raw en regard de la section En-têtes de réponse ou En-têtes de requête .

Voir aussi :

• Afficher les en-têtes HTTP ci-dessus.

Avertissement des en-têtes provisoires

Parfois, l’onglet En-têtes affiche le message d’avertissement Les en-têtes provisoires sont affichés. Cela peut être dû aux raisons suivantes :

• La demande n’a pas été envoyée sur le réseau, mais a été traitée à partir d’un cache local, qui ne stocke pas les en-têtes de requête d’origine.
• La ressource réseau n’est pas valide.
• Pour des raisons de sécurité.

Supposons que la demande n’a pas été envoyée sur le réseau, mais qu’elle a été servie à partir d’un cache local, qui ne stocke pas les en-têtes de requête d’origine. Dans ce cas, vous pouvez cocher la case Désactiver le cache en haut de l’outil Réseau pour afficher les en-têtes de requête complets. Par exemple :

1. Accédez à la page de démonstration Inspecter l’activité réseau .

2. Cliquez avec le bouton droit sur la page web, puis sélectionnez Inspecter.

   DevTools s’ouvre.

3. Sélectionnez l’outil Réseau .

4. Actualisez la page web.

5. Sélectionnez la requête réseaugetstarted.js .

   La section En-têtes de demande affiche le message : Les en-têtes provisoires sont affichés. Désactivez le cache pour afficher les en-têtes complets.

   

6. Cochez la case Désactiver le cache en haut de l’outil Réseau .

7. Actualisez la page web.

8. Sélectionnez la requête réseaugetstarted.js .

   La section En-têtes de requête n’affiche plus le message ; les en-têtes de requête complets sont affichés.

Voir aussi :

• Émulez un premier visiteur en désactivant le cache du navigateur ci-dessus.

Afficher la charge utile de la requête (paramètres de chaîne de requête et données de formulaire)

Pour afficher la charge utile d’une requête HTTP (paramètres de chaîne de requête et données de formulaire), sélectionnez une requête dans la table Demandes , puis sélectionnez l’onglet Charge utile dans la barre latérale, comme suit :

1. Accédez à une page web, telle que la démonstration de référence de l’outil réseau, dans une nouvelle fenêtre ou un nouvel onglet.

2. Cliquez avec le bouton droit sur la page web, puis sélectionnez Inspecter.

   DevTools s’ouvre.

3. Dans DevTools, sélectionnez l’outil Réseau .

4. Actualisez la page web.

   Dans la table Demandes de l’outil réseau, les lignes s’affichent pour :

   • devtools-network-reference/ (index.html)
   • style.css
   • script.js
   • favicon.png

5. Dans la page web de démonstration, cliquez sur le bouton Envoyer des données de formulaire .

   Dans la table Demandes de l’outil réseau, une ligne est ajoutée :

   • form-data-endpoint?hasfile=true

6. Sélectionnez la ligne form-data-endpoint?hasfile=true.

   La barre latérale s’ouvre, avec un onglet Charge utile .

7. Sélectionnez l’onglet Charge utile .

   La charge utile de la requête s’affiche, y compris une section Paramètres de chaîne de requête et une section Données de formulaire :

Dans l’onglet Console de DevTools se trouve l’erreur :

• POST https://microsoftedge.github.io/Demos/devtools-network-reference/form-data-endpoint?hasfile=true 405 (Method Not Allowed) (anonymous) @ script.js:49

Cette erreur non autorisée de méthode non autorisée s’affiche dans la console, car il n’y a pas form-data-endpoint de gestionnaire POST sur le serveur de démonstration. L’erreur est attendue, car github.io’hébergement n’exécute pas de serveurs d’applications, mais uniquement des fichiers statiques.

Afficher la source de charge utile

Par défaut, l’outil Réseau affiche la charge utile sous une forme lisible par l’utilisateur.

Pour afficher plutôt les sources des paramètres de chaîne de requête ou des données de formulaire :

1. Effectuez les étapes décrites dans la section précédente, ci-dessus.

   Sous l’onglet Charge utile , la section Paramètres de chaîne de requête affiche la charge utile sous une forme lisible par l’utilisateur, pour hasfile. La section Données du formulaire affiche la charge utile dans un formulaire lisible par l’utilisateur, pour username, timestampet :file

   

2. En regard de l’en-tête de la section Paramètres de chaîne de requête, cliquez sur le bouton Afficher la source .

3. En regard de l’en-tête de la section Données du formulaire , cliquez sur le bouton Afficher la source .

   Les informations sources de la charge utile s’affichent :

   

Afficher les paramètres de chaîne de requête encodés dans une URL

Pour afficher les paramètres de chaîne de requête dans un format lisible par l’utilisateur, mais avec des encodages conservés :

1. Accédez à une page web qui utilise des paramètres de chaîne de requête, tels que la démonstration de référence de l’outil réseau, dans une nouvelle fenêtre ou un nouvel onglet.

2. Cliquez avec le bouton droit sur la page web, puis sélectionnez Inspecter.

   DevTools s’ouvre.

3. Dans DevTools, sélectionnez l’outil Réseau .

4. Actualisez la page web.

   La table Requests répertorie les .htmlfichiers , .css, .jset .png .

5. Dans la page web de démonstration, cliquez sur le bouton Envoyer les paramètres de requête encodés .

   La table Requests ajoute une ligne :

   encoded-query-params-endpoint?name=Danas+Barkus&url=https%3A%2F%2Fcontoso.com%2F%C3%A0%C3%A9%C3%A8%C3%B4%C3%A7%D0%BB

6. Sélectionnez la encoded-query-params-endpoint ligne.

   La barre latérale s’ouvre, avec des onglets.

7. Dans la barre latérale, sélectionnez l’onglet Charge utile .

   La section Paramètres de chaîne de requête affiche l’URL décodée, comme suit : https://contoso.com/àéèôçл

   

8. Dans la section Paramètres de chaîne de requête , cliquez sur le bouton Afficher l’URL encodée .

   L’URL s’affiche désormais avec des caractères encodés (tels que %3A et %2F), et l’étiquette du bouton devient Afficher décodé :

   

9. Cliquez sur le bouton Afficher décodé .

   L’URL est à nouveau affichée avec des caractères décodés, sous la forme : https://contoso.com/àéèôçл, et l’étiquette du bouton revient à Afficher l’URL encodée.

Afficher les cookies

Pour afficher les cookies envoyés dans l’en-tête HTTP d’une requête :

1. Dans la table Demandes , cliquez sur le nom de la demande.

2. Dans la barre latérale, sélectionnez l’onglet Cookies :

   

Pour plus d’informations sur chacune des colonnes, consultez Champs dans Afficher, modifier et supprimer des cookies.

Pour modifier les cookies, consultez Afficher, modifier et supprimer les cookies.

Afficher la répartition temporelle d’une requête

Pour afficher la répartition temporelle d’une requête :

1. Dans la table Requête, cliquez sur le nom de la demande.

2. Dans la barre latérale, sélectionnez l’onglet Minutage .

   

Pour obtenir un moyen plus rapide d’accéder aux données, consultez Aperçu d’une répartition du temps.

Pour plus d’informations sur chacune des phases qui peuvent être affichées dans le panneau Minutage , consultez Explication des phases de répartition du minutage.

Afficher un aperçu d’une répartition de minutage

Pour afficher un aperçu de la répartition temporelle d’une requête, dans la colonne Cascade de la table Demandes , pointez sur l’entrée de la requête.

La colonne Cascade est désactivée par défaut. Pour activer la colonne Cascade , cliquez avec le bouton droit sur un en-tête de table Demandes , puis sélectionnez l’élément de menu Cascade simple qui n’a pas de sous-menu.

Pour afficher les données sans pointer, consultez la partie supérieure de la section présente , Afficher la répartition du minutage d’une requête.

Phases de répartition du temps expliquées

Chacune de ces phases peut apparaître sous l’onglet Minutage :

• Mise en file d’attente. Le navigateur met en file d’attente les requêtes lorsque l’une des conditions suivantes est vraie

  • Il existe des demandes de priorité plus élevée.
  • Six connexions TCP sont déjà ouvertes pour cette origine, ce qui est la limite. S’applique uniquement à HTTP/1.0 et HTTP/1.1.
  • Le navigateur alloue brièvement de l’espace dans le cache du disque.

• Bloqué. La demande peut être bloquée pour l’une des raisons décrites dans Mise en file d’attente.

• Recherche DNS. Le navigateur résout l’adresse IP de la requête.

• Connexion initiale. Le navigateur établit une connexion, y compris les liaisons TCP et les nouvelles tentatives et la négociation d’un protocole SSL (Secure Socket Layer).

• Négociation de proxy. Le navigateur négocie la demande avec un serveur proxy.

• Demande envoyée. La demande est envoyée.

• Préparation de ServiceWorker. Le navigateur démarre le service Worker.

• Demande à ServiceWorker. La demande est envoyée au worker de service.

• En attente (TTFB). Le navigateur attend le premier octet d’une réponse. TTFB signifie Time To First Byte. Ce minutage inclut un aller-retour de latence et le temps que le serveur a pris pour préparer la réponse.

• Téléchargement de contenu. Le navigateur reçoit la réponse.

• Réception d’un envoi (push). Le navigateur reçoit des données pour cette réponse via l’envoi (push) du serveur HTTP/2.

• Lecture push. Le navigateur lit les données locales qui ont été reçues précédemment.

Afficher les initiateurs et les dépendances

Pour afficher les initiateurs et les dépendances d’une requête, maintenez la touche Maj enfoncée et pointez sur la requête dans la table Demandes .

• Les requêtes qui ont lancé la demande pointée sont affichées en vert.
• Les dépendances des requêtes survolées sont affichées en rouge.

Lorsque la table Requests est triée par ordre chronologique, si vous pointez sur une ligne, la ligne qui la précède affiche une requête verte. La requête verte est l’initiateur de la dépendance. Si une autre requête verte est affichée sur la ligne précédente, cette requête plus élevée est l’initiateur de l’initiateur. Et ainsi de suite.

Afficher les événements de chargement

DevTools affiche le minutage des DOMContentLoaded événements et load à plusieurs endroits sur l’outil Réseau :

• Dans le volet Vue d’ensemble avec des lignes verticales.

• Dans la colonne Cascade de la table Requête avec des lignes verticales. La colonne Cascade est désactivée par défaut. Pour activer la colonne Cascade , cliquez avec le bouton droit sur un en-tête de table Demandes , puis sélectionnez l’élément de menu Cascade simple qui n’a pas de sous-menu.

• Dans le volet Résumé , en bas de l’outil Réseau , avec les étiquettes de minutage.

L’événement DOMContentLoaded est de couleur bleue et l’événement load est rouge.

Afficher le nombre total de demandes

Le nombre total de demandes est répertorié dans le volet Résumé , en bas de l’outil Réseau .

Attention : ce nombre effectue uniquement le suivi des demandes enregistrées depuis l’ouverture de DevTools. Si d’autres requêtes se sont produites avant l’ouverture de DevTools, ces requêtes ne sont pas comptabilisées.

Afficher la taille totale du téléchargement

La taille totale de téléchargement des demandes est indiquée dans le volet Résumé , en bas de l’outil Réseau .

Attention : ce nombre effectue uniquement le suivi des demandes enregistrées depuis l’ouverture de DevTools. Si d’autres requêtes se sont produites avant l’ouverture de DevTools, les requêtes précédentes ne sont pas comptabilisées.

Pour vérifier la taille des ressources volumineuses après que le navigateur n’a pas résolu chaque élément, consultez Afficher la taille non compressée d’une ressource.

Afficher la trace de pile à l’origine d’une requête

Une fois qu’une instruction JavaScript a demandé une ressource, pointez sur la colonne Initiateur pour afficher la trace de pile menant à la requête.

Afficher la taille non compressée d’une ressource

Pour afficher simultanément la taille transférée et la taille non compressée d’une ressource :

1. En haut à droite de l’outil Réseau , cliquez sur l’icône Paramètres réseau (engrenage). Une ligne de cases à cocher s’affiche.

2. Activez la case à cocher Grandes lignes de requête .

3. Examinez la colonne Taille dans la table Requête. La valeur supérieure est la taille transférée, et la valeur inférieure correspond à la taille de la ressource une fois que le navigateur l’a annulée :

   

Exporter les données des demandes

Vous pouvez exporter ou copier la liste des demandes, avec des filtres appliqués, de plusieurs façons décrites ci-dessous.

Enregistrer toutes les demandes réseau dans un fichier HAR

HAR (HTTP Archive) est un format de fichier utilisé par plusieurs outils de session HTTP pour exporter les données capturées. Le format est un objet JSON avec un ensemble particulier de champs. Consultez Har Analyzer.

Pour réduire les risques de fuites accidentelles d’informations sensibles, par défaut, vous pouvez exporter le journal réseau « nettoyé » au format HAR qui exclut les informations sensibles telles que Cookieles en-têtes , Set-Cookieet Authorization . Si nécessaire, vous pouvez également exporter le journal avec des données sensibles.

Pour enregistrer toutes les demandes réseau dans un fichier HAR, sans données sensibles :

1. Accédez à une page web, telle que la page de démonstration Inspecter l’activité réseau , dans une nouvelle fenêtre ou un nouvel onglet.

2. Cliquez avec le bouton droit sur la page web, puis sélectionnez Inspecter.

   DevTools s’ouvre.

3. Dans DevTools, sélectionnez l’outil Réseau .

4. Actualisez la page web.

5. Cliquez avec le bouton droit sur n’importe quelle requête dans la table Demandes , puis sélectionnez Copier>tout copier en tant que HAR (aseptisé) :

   

   Ou, dans la barre d’action en haut de l’outil Réseau , cliquez sur le bouton Exporter har (aseptisé) ( .

DevTools enregistre toutes les requêtes qui se sont produites depuis l’ouverture de DevTools dans le fichier HAR.

Vous ne pouvez pas filtrer les demandes et vous ne pouvez pas enregistrer une seule requête.

Pour enregistrer toutes les demandes réseau dans un fichier HAR, y compris les données sensibles :

1. Dans DevTools, sélectionnez Personnalisé et contrôlez Paramètres DevTools>.

   La page Préférences des paramètres> s’ouvre.

2. Faites défiler jusqu’à la section Réseau .

3. Cochez la case Autoriser pour générer har avec des données sensibles.

4. Cliquez sur le bouton Fermer ().

5. Dans l’outil Réseau, cliquez avec le bouton droit sur une requête dans la table Demandes, puis sélectionnez Copier>tout copier en tant que HAR (avec des données sensibles).

   Ou, dans la barre d’action en haut, cliquez sur le bouton Exporter HAR (assainie ou avec des données sensibles) (), puis sélectionnez Exporter har (avec des données sensibles) :

   

Importer un fichier HAR dans DevTools à des fins d’analyse

Une fois que vous disposez d’un fichier HAR, vous pouvez le réimporter dans DevTools à des fins d’analyse à l’aide de HAR Analyzer.

Pour importer un fichier HAR dans DevTools à des fins d’analyse :

• Dans la barre d’action en haut de l’outil Réseau , cliquez sur le bouton Importer un fichier HAR ().

• Vous pouvez également faire glisser le fichier HAR sur la table Requests .

L’outil Réseau lit et affiche les initiateurs pour les demandes importées à partir du fichier HAR. Pour les initiateurs, consultez Afficher un journal des requêtes ci-dessus.

Copier les demandes réseau dans le Presse-papiers

Sous la colonne Nom de la table Demandes , cliquez avec le bouton droit sur une demande, pointez sur Copier, puis sélectionnez l’une des options suivantes.

Pour copier une requête unique, sa réponse ou sa trace de pile :

Pour copier toutes les demandes :

Pour copier un ensemble filtré de demandes, appliquez un filtre au journal réseau, cliquez avec le bouton droit sur une demande, puis sélectionnez :

Voir aussi :

• Demandes de filtre, ci-dessus.

Copier le json de la réponse mise en forme dans le Presse-papiers

Pour copier les données JSON mises en forme d’une réponse JSON :

1. Dans la table Demandes , cliquez sur le nom de la requête qui a conduit à une réponse JSON.

2. Dans la barre latérale, sélectionnez l’onglet Aperçu .

3. Cliquez avec le bouton droit sur la première ligne de l’aperçu de la réponse JSON mise en forme, puis sélectionnez Copier la valeur.

   

   Vous pouvez maintenant coller la valeur dans n’importe quel éditeur.

Copier les valeurs de propriété des demandes réseau dans le Presse-papiers

Pour copier les valeurs de propriété des demandes réseau vers votre Presse-papiers :

1. Dans la table Requête, cliquez sur le nom de la demande.

2. Dans la barre latérale, sélectionnez l’onglet Charge utile :

3. Développez l’une des sections suivantes.

   • Charge utile de la requête (JSON)
   • Données de formulaire
   • Paramètres de la chaîne de requête
   • En-têtes de requête
   • En-têtes de réponse

4. Cliquez avec le bouton droit sur une valeur, puis sélectionnez Copier la valeur. Vous pouvez maintenant coller la valeur dans n’importe quel éditeur.

Modifier la disposition de l’outil Réseau

Vous pouvez développer ou réduire des sections de l’interface utilisateur de l’outil réseau pour concentrer les informations importantes.

Masquer le volet Filtres

Par défaut, DevTools affiche le volet Filtres . Pour masquer le volet Filtres , sélectionnez Filtrer ().

Utiliser des lignes de requête volumineuses

Utilisez des lignes de requêtes volumineuses lorsque vous souhaitez ajouter des espaces blancs dans votre table de requêtes réseau. Certaines colonnes fournissent également un peu plus d’informations lors de l’utilisation de lignes volumineuses ; par exemple :

• La valeur inférieure de la colonne Taille est la taille non compressée d’une requête.

• La colonne Priorité (non affichée par défaut) affiche la priorité d’extraction initiale (valeur inférieure) et finale (valeur supérieure).

Pour activer les lignes volumineuses :

1. Accédez à une page web, telle que la page de démonstration Inspecter l’activité réseau , dans une nouvelle fenêtre ou un nouvel onglet.

2. Cliquez avec le bouton droit sur la page web, puis sélectionnez Inspecter.

   DevTools s’ouvre.

3. Dans DevTools, sélectionnez l’outil Réseau .

4. Actualisez la page web.

   Les demandes sont affichées en petites lignes.

5. Dans l’outil Réseau , cliquez sur le bouton Paramètres réseau (), puis cochez la case Grandes lignes de requête .

   Les demandes sont affichées dans des lignes volumineuses :

   

Masquer le volet Vue d’ensemble

Par défaut, DevTools affiche le volet Vue d’ensemble . Pour masquer le volet Vue d’ensemble , décochez la case Afficher la vue d’ensemble .

Voir aussi

• Inspecter l’activité réseau : procédure pas à pas et présentation de l’outil Réseau .

Pages web de démonstration :

• Inspecter l’activité réseau
• Démonstration de référence de l’outil réseau
• Application TODO

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