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

Découvrez de nouvelles façons d'analyser le chargement de page dans cette référence complète des fonctionnalités d'analyse du réseau des Outils pour les développeurs Chrome.

Enregistrer les requêtes réseau

Par défaut, les outils de développement enregistrent toutes les requêtes réseau dans le panneau Réseau, tant qu'ils sont ouverts.

Arrêter d'enregistrer les requêtes réseau

Pour arrêter les demandes d'enregistrement :

• Cliquez sur Arrêter l'enregistrement du journal réseau dans le panneau Réseau. Il devient gris pour indiquer que les outils de développement n'enregistrent plus les requêtes.
• Appuyez sur Commande+E (Mac) ou Ctrl+E (Windows, Linux) lorsque le panneau Réseau est sélectionné.

Effacer les demandes

Cliquez sur Effacer dans le panneau Réseau pour effacer toutes les requêtes du tableau Requêtes.

Enregistrer les requêtes entre les chargements de page

Pour enregistrer les requêtes lors des chargements de page, cochez la case Conserver le journal dans le panneau Réseau. Les outils de développement enregistrent toutes les requêtes jusqu'à ce que vous désactiviez l'option Conserver le journal.

Effectuer des captures d'écran pendant le chargement de la page

Effectuez des captures d'écran pour analyser ce que les utilisateurs voient pendant qu'ils attendent le chargement de votre page.

Pour activer les captures d'écran, ouvrez Paramètres dans le panneau Réseau, puis sélectionnez Effectuer des captures d'écran.

Actualisez la page lorsque le panneau Réseau est sélectionné pour effectuer des captures d'écran.

Une fois la capture d'écran effectuée, vous pouvez interagir avec de différentes manières :

• Pointez sur une capture d'écran pour afficher le moment où elle a été effectuée. Une ligne jaune s'affiche dans la timeline Aperçu.
• Cliquez sur la miniature d'une capture d'écran pour filtrer toutes les requêtes qui ont eu lieu après la capture d'écran.
• Double-cliquez sur une vignette pour l'agrandir.

Modifier et renvoyer une demande

Vous pouvez modifier et renvoyer n'importe quelle requête réseau récupérable à partir du tableau Requêtes :

1. Effectuez un clic droit sur la requête, puis sélectionnez Edit and resend as fetch (Modifier et renvoyer en tant que récupération). Les outils de développement ouvrent le panneau Console avec la requête renseignée en tant qu'appel fetch(), en conservant les paramètres de requête et le contexte d'exécution d'origine.
2. Si vous le souhaitez, modifiez l'appel fetch() dans la Console, puis appuyez sur Entrée pour renvoyer la requête.

Modifier le comportement de chargement

Émuler un nouveau visiteur en désactivant la mise en cache dans le navigateur

Pour émuler l'expérience d'un nouvel utilisateur sur votre site, cochez la case Désactiver le cache. Les outils de développement désactivent la mise en cache dans le navigateur. Cela permet d'émuler plus précisément l'expérience d'un nouvel utilisateur, car les requêtes sont diffusées à partir du cache du navigateur lors des visites répétées.

Désactiver la mise en cache dans le navigateur depuis le panneau "Network conditions" (Conditions du réseau)

Si vous souhaitez désactiver le cache lorsque vous travaillez dans d'autres panneaux des outils de développement, utilisez le tiroir Conditions du réseau.

1. Cliquez sur l'icône  pour ouvrir le panneau Conditions du réseau.
2. Cochez ou décochez la case Désactiver le cache.

Vider manuellement le cache du navigateur

Pour vider manuellement le cache du navigateur à tout moment, effectuez un clic droit n'importe où dans le tableau Requêtes, puis sélectionnez Vider le cache du navigateur.

Émuler hors connexion

Il existe une nouvelle classe d'applications Web, appelées progressive web apps, qui peuvent fonctionner hors connexion à l'aide de service workers. Lorsque vous créez ce type d'application, il est utile de pouvoir simuler rapidement un appareil sans connexion de données.

Pour simuler une expérience réseau complètement hors connexion, sélectionnez Hors connexion dans le menu déroulant Limitation de bande passante réseau à côté de la case Désactiver le cache.

Les outils de développement affichent une icône d'avertissement à côté de l'onglet Réseau pour vous rappeler que le mode hors connexion est activé.

Émuler des connexions réseau lentes

Pour émuler une connexion 4G rapide, 4G lente ou 3G, sélectionnez le préréglage correspondant dans le menu déroulant Limitation du débit de la barre d'action en haut de l'écran.

Si vous avez activé les métriques de champ dans le panneau Performances, l'une des options de limitation du menu peut être marquée comme recommandée en fonction des données du rapport sur l'expérience utilisateur de Chrome.

Les outils de développement affichent une icône d'avertissement  à côté du panneau Réseau pour vous rappeler que la limitation est activée.

Créer des profils de limitation personnalisés

En plus des préréglages, tels que la 4G lente ou rapide, vous pouvez également ajouter vos propres profils de limitation personnalisés :

1. Ouvrez le menu Throttling (Limitation), puis sélectionnez Custom (Personnalisé) > Add... (Ajouter...).
2. Configurez un nouveau profil de limitation comme décrit dans settings Settings > Throttling (Paramètres > Limitation).

3. De retour dans le panneau Réseau, sélectionnez votre nouveau profil dans le menu déroulant Limitation du débit.

   

Les outils de développement affichent une icône d'avertissement  à côté du panneau Réseau pour vous rappeler que la limitation du débit est activée.

Limiter les connexions WebSocket

En plus des requêtes HTTP, les outils de développement limitent les connexions WebSocket depuis la version 99.

Pour observer la limitation du débit WebSocket :

1. Initiez une nouvelle connexion, par exemple à l'aide d'un outil de test.
2. Dans le panneau Réseau, sélectionnez Aucune limitation du débit, puis envoyez un message via la connexion.
3. Créez un profil de limitation personnalisé très lent, par exemple 10 kbit/s. Un profil aussi lent vous aidera à remarquer la différence.
4. Dans le panneau Réseau, sélectionnez le profil et envoyez un autre message.
5. Activez le filtre WS, cliquez sur le nom de votre connexion, ouvrez l'onglet Messages, puis vérifiez la différence de temps entre les messages envoyés et les messages renvoyés avec et sans limitation. Exemple :

Émuler des connexions réseau lentes à partir du panneau "Conditions du réseau"

Si vous souhaitez limiter la connexion réseau lorsque vous travaillez dans d'autres panneaux des outils de développement, utilisez le tiroir Conditions du réseau.

1. Cliquez sur l'icône  pour ouvrir le panneau Conditions du réseau.
2. Sélectionnez une vitesse de connexion dans le menu Limitation de bande passante réseau.

Supprimer manuellement les cookies du navigateur

Pour effacer manuellement les cookies du navigateur à tout moment, effectuez un clic droit n'importe où dans le tableau Requêtes, puis sélectionnez Effacer les cookies du navigateur.

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

Consultez Remplacer des fichiers et des en-têtes de réponse HTTP en local.

Remplacer l'user-agent

Pour remplacer manuellement le user-agent :

1. Cliquez sur l'icône  pour ouvrir le panneau Conditions du réseau.
2. Désélectionnez Sélectionner automatiquement.
3. Sélectionnez une option de user-agent dans le menu ou saisissez-en une personnalisée dans le champ.

Rechercher des requêtes

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

1. Appuyez sur le raccourci suivant pour ouvrir l'onglet Rechercher à droite :

   • Sous macOS, Command+F.
   • Sous Windows ou Linux, Ctrl+F.

2. Dans l'onglet Rechercher, saisissez votre requête, puis appuyez sur Entrée. Vous pouvez également cliquer sur match_case ou regular_expression pour activer respectivement la sensibilité à la casse ou les expressions régulières.

3. Cliquez sur l'un des résultats de recherche. Le panneau Réseau met en surbrillance jaune la requête correspondante. De plus, le panneau ouvre l'onglet En-têtes ou Réponse et met en surbrillance la chaîne correspondante, le cas échéant.

Pour actualiser les résultats de recherche, cliquez sur refresh Actualiser. Pour effacer les résultats, cliquez sur Bloquer Effacer.

Pour en savoir plus sur toutes les façons de rechercher des éléments dans les outils de développement, consultez Rechercher : trouver du texte dans toutes les ressources chargées.

Filtrer les requêtes

Filtrer les demandes par propriétés

Utilisez le champ Filtrer pour filtrer les requêtes par propriétés, telles que le domaine ou la taille de la requête, ou saisissez une chaîne de texte pour faire correspondre l'URL, le domaine, le nom d'hôte ou le port de la requête (par exemple, localhost ou example.com), y compris les requêtes same-site.

Si vous ne voyez pas la zone, la barre Filtres est probablement masquée. Consultez Masquer la barre de filtres.

Pour inverser votre filtre, cochez la case Inverser à côté du champ Filtre.

Vous pouvez utiliser plusieurs propriétés simultanément en les séparant par un espace. Par exemple, mime-type:image/gif larger-than:1K affiche tous les GIF de plus d'un kilo-octet. Ces filtres multipropriétés sont équivalents à des opérations AND. Les opérations OR ne sont pas acceptées.

Voici la liste complète des propriétés acceptées.

• cookie-domain. Afficher les ressources qui définissent un domaine de cookie spécifique.
• cookie-name. Afficher les ressources qui définissent un nom de cookie spécifique.
• cookie-path. Affichez les ressources qui définissent un chemin de cookie spécifique.
• cookie-value : affiche les ressources qui définissent une valeur de cookie spécifique.
• domain : n'affiche que les ressources du domaine spécifié. Vous pouvez utiliser un caractère générique (*) pour inclure plusieurs domaines. Par exemple, *.com affiche les ressources de tous les noms de domaine se terminant par .com. Les outils de développement affichent un menu déroulant de saisie semi-automatique contenant tous les domaines qu'ils ont rencontrés.
• has-overrides : affiche les demandes qui ont remplacé content, headers, des remplacements (yes) ou aucun remplacement (no). Vous pouvez ajouter la colonne Remplacements correspondante au tableau des demandes.
• has-response-header : affiche les ressources qui contiennent l'en-tête de réponse HTTP spécifié. Les outils pour les développeurs remplissent le menu déroulant de saisie semi-automatique avec tous les en-têtes de réponse qu'ils ont rencontrés.
• is. Utilisez is:running pour trouver les ressources WebSocket.
• larger-than : affiche les ressources dont la taille est supérieure à la taille spécifiée, en octets. Définir une valeur de 1000 équivaut à définir une valeur de 1k.
• method : affiche les ressources récupérées avec un type de méthode HTTP spécifique. Les outils de développement renseignent le menu déroulant de saisie semi-automatique avec toutes les méthodes HTTP qu'ils ont rencontrées.
• mime-type : affiche les ressources d'un type MIME spécifié. Les outils de développement remplissent le menu déroulant de saisie semi-automatique avec tous les types MIME qu'ils ont rencontrés.
• mixed-content. Afficher toutes les ressources de contenu mixte (mixed-content:all) ou seulement celles qui sont affichées (mixed-content:displayed).
• priority : affiche les ressources dont le niveau de priorité correspond à la valeur spécifiée.
• resource-type. Afficher les ressources d'un type de ressource, par exemple une image. Les outils de développement renseignent le menu déroulant de saisie semi-automatique avec tous les types de ressources qu'ils ont rencontrés.
• response-header-set-cookie : affiche les en-têtes Set-Cookie bruts dans l'onglet "Problèmes". Les cookies incorrects avec des en-têtes Set-Cookie incorrects seront signalés dans le panneau "Réseau".
• scheme : affiche les ressources récupérées via le protocole HTTP non sécurisé (scheme:http) ou le protocole HTTPS sécurisé (scheme:https).
• set-cookie-domain : affiche les ressources qui ont un en-tête Set-Cookie avec un attribut Domain correspondant à la valeur spécifiée. Les outils de développement renseignent la saisie semi-automatique avec tous les domaines de cookies qu'ils ont rencontrés.
• set-cookie-name : affiche les ressources dont l'en-tête Set-Cookie correspond à la valeur spécifiée. Les outils de développement remplissent la saisie semi-automatique avec tous les noms de cookies qu'ils ont rencontrés.
• set-cookie-value : affiche les ressources dont l'en-tête Set-Cookie correspond à la valeur spécifiée. Les outils de développement renseignent la saisie semi-automatique avec toutes les valeurs de cookie qu'ils ont rencontrées.
• status-code : n'affiche que les ressources dont le code d'état HTTP correspond au code spécifié. Les outils de développement remplissent le menu déroulant de saisie semi-automatique avec tous les codes d'état qu'ils ont rencontrés.
• url. Affiche les ressources dont le url correspond à la valeur spécifiée.

Filtrer les requêtes par type

Pour filtrer les requêtes par type de ressource, cliquez sur les boutons All (Tout), Fetch/XHR, JS, CSS, Img, Media (Contenu multimédia), Font (Police), Doc, WS (WebSocket), Wasm (WebAssembly), Manifest (Fichier manifeste) ou Other (Autre, tout autre type non listé ici) dans le panneau Network (Réseau).

Si vous ne voyez pas ces boutons, cela signifie probablement que la barre d'action Filtres est masquée. Consultez Masquer la barre "Filtres".

Pour afficher simultanément des ressources de plusieurs types, maintenez la touche Commande (Mac) ou Ctrl (Windows, Linux) enfoncée, puis cliquez sur plusieurs filtres de type.

Filtrer les demandes par heure

Faites glisser la chronologie Vue d'ensemble vers la gauche ou la droite pour n'afficher que les demandes actives pendant cette période. Le filtre est inclusif. Toutes les requêtes actives pendant la période sélectionnée sont affichées.

Masquer les URL de données

Les URL de données sont de petits fichiers intégrés à d'autres documents. Toute requête commençant par data: dans le tableau Requêtes est une URL de données.

Pour masquer ces demandes, dans la barre d'action Filtres, sélectionnez Plus de filtres > check_box Masquer les URL de données.

La barre d'état en bas de l'écran affiche le nombre de requêtes affichées sur le nombre total.

Masquer les URL des extensions

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 installées dans Chrome. Les URL des demandes d'extension commencent par chrome-extension://.

Pour masquer les requêtes d'extension, dans la barre d'action Filtres, sélectionnez Autres filtres > check_box Masquer les URL d'extension.

La barre d'état en bas de l'écran indique le nombre de requêtes affichées par rapport au nombre total de requêtes.

Afficher uniquement les requêtes dont les cookies de réponse ont été bloqués

Pour filtrer tous les éléments, à l'exception des requêtes dont les cookies de réponse ont été bloqués pour une raison quelconque, dans la barre d'action Filtres, sélectionnez Plus de filtres > check_box Cookies de réponse bloqués.

La barre d'état en bas de l'écran affiche le nombre de requêtes affichées par rapport au nombre total de requêtes.

Pour connaître la raison pour laquelle un cookie de réponse a été bloqué, sélectionnez la requête, ouvrez son onglet Cookies, puis pointez sur l'icône d'information .

De plus, le panneau Réseau affiche une icône d'avertissement à côté d'une requête dont les cookies sont bloqués en raison de flags Chrome ou de la configuration. Pointez sur l'icône pour afficher une info-bulle contenant un indice, puis cliquez dessus pour accéder au panneau Problèmes et obtenir plus d'informations.

Afficher uniquement les requêtes bloquées

Pour filtrer tout sauf les requêtes bloquées, dans la barre d'action Filtres, sélectionnez Autres filtres > check_box Requêtes bloquées. Pour tester cela, vous pouvez utiliser l'onglet Blocage des requêtes réseau dans le tiroir.

Le tableau Requêtes met en évidence les requêtes bloquées en rouge. La barre d'état en bas de l'écran affiche le nombre de requêtes affichées sur le nombre total.

Afficher uniquement les demandes tierces

Pour filtrer tout sauf les requêtes dont l'origine diffère de celle de la page, dans la barre d'action Filtres, sélectionnez Plus de filtres > check_box Requêtes tierces.

La barre d'état en bas de l'écran affiche le nombre de requêtes affichées par rapport au nombre total de requêtes.

Trier les demandes

Par défaut, les requêtes de la table Requêtes sont triées par heure de lancement, mais vous pouvez trier la table à l'aide d'autres critères.

Trier par colonne

Cliquez sur l'en-tête d'une colonne du tableau Demandes pour trier les demandes en fonction de cette colonne.

Trier par phase d'activité

Pour modifier la façon dont la cascade trie les demandes, effectuez un clic droit sur l'en-tête du tableau Demandes, pointez sur Cascade, puis sélectionnez l'une des options suivantes :

• Heure de début. La première requête initiée se trouve en haut.
• Temps de réponse : La première requête dont le téléchargement a commencé se trouve en haut.
• Heure de fin : La première requête terminée se trouve en haut.
• Durée totale. La requête avec la configuration de connexion et la requête / réponse les plus courtes se trouve en haut.
• Latence. La requête qui a attendu le moins longtemps une réponse se trouve en haut de la liste.

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

Dans cet exemple, la cascade est triée par durée totale. La partie plus claire de chaque barre correspond au temps d'attente. La partie la plus sombre correspond au temps passé à télécharger des octets.

Analyser les requêtes

Tant que les outils de développement sont ouverts, ils enregistrent toutes les requêtes dans le panneau Réseau. Utilisez le panneau Réseau pour analyser les requêtes.

Afficher un journal des requêtes

Utilisez le tableau Requêtes pour afficher un journal de toutes les requêtes effectuées lorsque les outils de développement sont ouverts. Cliquez ou pointez sur les requêtes pour afficher plus d'informations les concernant.

La table Requêtes affiche par défaut les colonnes suivantes :

• Nom. Nom de fichier ou identifiant de la ressource.

• État. Cette colonne peut afficher les valeurs suivantes :

  

  • Code d'état HTTP, par exemple 200 ou 404.
  • CORS error pour les requêtes ayant échoué en raison du partage des ressources interorigines (CORS).
  • (blocked:origin) pour les requêtes dont les en-têtes sont mal configurés. Pointez sur cette valeur d'état pour afficher une info-bulle indiquant l'origine du problème.
  • (failed) suivi du message d'erreur.

• Type : Type MIME de la ressource demandée.

• Initiateur : Les objets ou processus suivants peuvent lancer des requêtes :

  • Analyseur Analyseur HTML de Chrome.
  • Redirection. Redirection HTTP
  • Script. Fonction JavaScript. Dans ce cas, le panneau Réseau fournit un lien vers la ligne correspondante dans le fichier source.
  • Premiers indices. Réponse HTTP 103 Early Hints.
  • Autre. Un autre processus ou une autre action, comme accéder à une page à l'aide d'un lien ou saisir une URL dans la barre d'adresse.

• Size (Taille). Taille combinée des en-têtes de réponse et du corps de la réponse, telle qu'elle est fournie par le serveur.

• Time. Durée totale, du début de la requête à la réception du dernier octet de la réponse.

• Cascade. Une répartition visuelle de l'activité de chaque requête.

Ajouter ou supprimer des colonnes

Effectuez un clic droit sur l'en-tête du tableau Requests (Requêtes), puis sélectionnez une option pour l'afficher ou le masquer. Les options affichées sont cochées.

Vous pouvez ajouter ou supprimer les colonnes supplémentaires suivantes :

• N° de requête : ordre absolu de lancement de la requête, épinglé par défaut en première position dans le tableau Requêtes.
• Chemin d'accès. Partie du chemin d'accès de l'URL.
• URL. URL complète de la demande.
• Méthode. Méthode HTTP de la requête (par exemple, GET, POST, PUT, DELETE).
• Protocole. Protocole de la requête (par exemple, h2 pour HTTP/2, h3 pour HTTP/3, etc.).
• Protocole. Partie "schéma" de l'URL.
• Domaine. Partie domaine de l'URL.
• Adresse distante. Adresse IP et port distants de la requête.
• Espace d'adressage à distance. Espace d'adressage à distance de la requête. Public pour les adresses IP publiques, Private pour les adresses IP privées.
• Espace d'adressage de l'initiateur Espace d'adressage de l'initiateur de la requête. Identique à la télécommande.
• Cookies. Nombre de cookies dans la requête.
• Définir des cookies. Nombre de cookies dans la réponse.
• Priorité. Priorité de la requête.
• ID de connexion. ID de connexion de la requête dans une session client, le cas échéant.
• Comporte des forçages Indique si la requête comporte des remplacements (oui, non, contenu ou en-têtes).
• Concerne une annonce : Vrai ou faux ?
• Préchargé. Indique si la requête a été lancée à l'aide du préchargement spéculatif.
• Blocage du rendu. Indique si la requête est bloquante, potentiellement bloquante ou non.
• Cascade : Répartition visuelle de l'activité de chaque requête.

Ajouter des colonnes personnalisées

Pour ajouter une colonne personnalisée au tableau Demandes :

1. Effectuez un clic droit sur l'en-tête du tableau Requests (Requêtes), puis sélectionnez Response Headers > Manage Header Columns (En-têtes de réponse > Gérer les colonnes d'en-tête).
2. Dans la boîte de dialogue, cliquez sur Ajouter un en-tête personnalisé, saisissez son nom, puis cliquez sur Ajouter.

Regrouper les requêtes par frames intégrés

Si les cadres intégrés d'une page lancent de nombreuses requêtes, vous pouvez rendre le journal des requêtes plus lisible en les regroupant.

Pour regrouper les requêtes par iFrame, ouvrez Paramètres dans le panneau Réseau, puis cochez check_box Regrouper par frame.

Pour afficher une requête initiée par un cadre iFrame, développez-la dans le journal des requêtes.

Afficher le timing des requêtes les unes par rapport aux autres

Utilisez la cascade pour afficher le timing des requêtes les unes par rapport aux autres. Par défaut, le graphique en cascade est organisé en fonction de l'heure de début des requêtes. Ainsi, les demandes les plus à gauche ont commencé plus tôt que celles les plus à droite.

Consultez Trier par phase d'activité pour découvrir les différentes façons de trier le graphique en cascade.

Analyser les messages d'une connexion WebSocket

Pour afficher les messages d'une connexion WebSocket :

1. Dans la colonne Nom du tableau Requêtes, cliquez sur l'URL de la connexion WebSocket.
2. Ouvrez l'onglet Messages. Le tableau affiche les 100 derniers messages.

Pour actualiser le tableau, cliquez à nouveau sur le nom de la connexion WebSocket dans la colonne Nom du tableau Requêtes.

Le tableau contient trois colonnes :

• Données. Charge utile du message. Si le message est en texte brut, il s'affiche ici. Pour les codes d'opération binaires, cette colonne affiche le nom et le code de l'opcode. Les codes d'opération suivants sont acceptés : frame de continuation, frame binaire, frame de fermeture de connexion, frame Ping et frame Pong.
• Durée : Longueur de la charge utile du message, en octets.
• Time. Heure à laquelle le message a été reçu ou envoyé.

Les messages sont associés à un code couleur en fonction de leur type :

• Les messages sortants sont vert clair.
• Les messages entrants sont blancs.
• Les codes d'opération WebSocket sont jaune clair.
• Les erreurs sont en rouge clair.

Analyser les événements d'un flux

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

1. Enregistrez les requêtes réseau sur une page qui diffuse des événements.
2. Dans Réseau, sélectionnez une requête et ouvrez l'onglet EventStream.

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 block Effacer.

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

Pour afficher un aperçu du corps d'une réponse :

1. Sélectionnez une demande dans la colonne Nom du tableau Demandes.
2. Ouvrez l'onglet Aperçu.

Cet onglet est principalement utile pour afficher des images.

Afficher le corps d'une réponse

Pour afficher le corps de la réponse à une requête :

1. Sélectionnez une demande dans la colonne Nom du tableau Demandes.
2. Ouvrez l'onglet Réponse.

Pour les réponses binaires ou compressées, sélectionnez une méthode de décodage (Base64, Hex ou UTF-8) dans le menu déroulant en bas de l'onglet Réponse.

Afficher les en-têtes HTTP

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

1. Sélectionnez une demande dans la colonne Nom du tableau Demandes.
2. Ouvrez l'onglet Headers (En-têtes), puis faites défiler la page jusqu'aux sections General (Général), Response Headers (En-têtes de réponse), Request Headers (En-têtes de requête) et, éventuellement, Early Hints Headers (En-têtes Early Hints).

Dans la section Général, les outils de développement affichent un message d'état lisible par l'humain à côté du code d'état HTTP reçu.

Dans la section En-têtes de réponse, vous pouvez pointer sur une valeur d'en-tête et cliquer sur le bouton edit Modifier pour remplacer l'en-tête de réponse localement.

Afficher la source de l'en-tête HTTP

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

1. Ouvrez l'onglet Headers (En-têtes) de la requête qui vous intéresse. Consultez Afficher les en-têtes HTTP.
2. Cliquez sur Afficher la source à côté de la section En-tête de la requête ou En-tête de la réponse.

Avertissement concernant les en-têtes provisoires

Parfois, l'onglet En-têtes affiche le message d'avertissement Provisional headers are shown.... Cela peut se produire pour les raisons suivantes :

• La requête n'a pas été envoyée sur le réseau, mais diffusée depuis un cache local qui ne stocke pas les en-têtes de requête d'origine. Dans ce cas, vous pouvez désactiver la mise en cache pour afficher les en-têtes de requête complets.

• La ressource réseau n'est pas valide. Par exemple, exécutez fetch("https://jec.fish.com/unknown-url/") dans la console.

Pour des raisons de sécurité, les outils de développement peuvent également n'afficher que les en-têtes provisoires.

Afficher la charge utile de la demande

Pour afficher la charge utile d'une requête, c'est-à-dire ses paramètres de chaîne de requête et les données de formulaire, sélectionnez une requête dans le tableau Requests (Requêtes), puis ouvrez l'onglet Payload (Charge utile).

Afficher la source de la charge utile

Par défaut, les outils de développement affichent la charge utile dans un format lisible par l'humain.

Pour afficher les sources des paramètres de la chaîne de requête et des données de formulaire, dans l'onglet Charge utile, cliquez sur Afficher la source à côté des sections Paramètres de la chaîne de requête ou Données du formulaire.

Afficher les paramètres de requête et de formulaire encodés en URL

Par défaut, les outils de développement affichent les paramètres de chaîne de requête et les données de formulaire sous une forme décodée en URL. Pour activer ou désactiver l'encodage des URL pour les arguments de l'onglet Charge utile, cliquez sur Afficher les valeurs encodées via l'URL ou Afficher les valeurs décodées.

Afficher les charges utiles binaires et compressées

Pour les charges utiles de requête binaires ou compressées, sélectionnez une méthode de décodage (Base64, Hex ou UTF-8) dans le menu déroulant situé en bas de l'onglet Charge utile.

Afficher les cookies

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

1. Sélectionnez une demande dans la colonne Nom du tableau Demandes.
2. Ouvrez l'onglet Cookies.

Pour obtenir une description de chaque colonne, consultez Champs.

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

Afficher les sessions liées à l'appareil

L'onglet Sessions liées à l'appareil affiche les informations de report (actualisation) associées à la requête sélectionnée pour toutes les sessions liées à l'appareil actives sur un site.

Pour afficher les informations sur le report (actualisation) :

1. Sélectionnez une demande dans la colonne Nom du tableau Demandes.
2. Ouvrez l'onglet Sessions liées à l'appareil.

L'onglet Sessions liées à l'appareil ne s'affiche que pour les requêtes pertinentes avec cookies. Cet onglet liste toutes les sessions actives liées à l'appareil et indique si les sessions ont différé la requête (et pourquoi, le cas échéant). Voici les options de report possibles :

• Deferred (Refresh)
• Not deferred (Proactive refresh attempted)
• Not deferred (Request is in scope of session but proactive refresh is not possible)
• Not deferred (Request is in scope of session but initiator is not allowed to trigger refresh)
• Not deferred (Request is in scope of session but cookies are still present)
• Not deferred (Request is not in scope of session)

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

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

1. Sélectionnez une demande dans la colonne Nom du tableau Demandes.
2. Ouvrez l'onglet Timing.

Consultez Prévisualiser une répartition temporelle pour accéder plus rapidement à ces données.

Pour en savoir plus sur chacune des phases que vous pouvez voir dans l'onglet Timing, consultez Explication des phases de répartition du timing.

Prévisualiser une répartition temporelle

Pour afficher un aperçu de la répartition temporelle d'une requête, pointez sur l'entrée de la requête dans la colonne Waterfall (Cascade) du tableau des requêtes.

Consultez Afficher la répartition temporelle d'une requête pour savoir comment accéder à ces données sans avoir à pointer dessus.

Explication des phases de répartition du timing

Voici plus d'informations sur chacune des phases que vous pouvez voir dans l'onglet Timing :

• Mise en file d'attente : Le navigateur met les requêtes en file d'attente avant le début de la connexion et lorsque :
  • Il existe des demandes de priorité plus élevée. La priorité d'une requête est déterminée par des facteurs tels que le type d'une ressource, ainsi que son emplacement dans le document. Pour en savoir plus, consultez la section Priorité des ressources du guide fetchpriority.
  • Six connexions TCP sont déjà ouvertes pour cette origine, ce qui correspond à 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 requête peut être bloquée après le début de la connexion pour l'une des raisons décrites dans Mise en file d'attente.
• Résolution DNS. Le navigateur résout l'adresse IP de la requête.
• Connexion initiale : Le navigateur établit une connexion, y compris les handshakes ou les tentatives TCP, et négocie un protocole SSL.
• Négociation de proxy. Le navigateur négocie la requête avec un serveur proxy.
• Demande envoyée. La demande est en cours d'envoi.
• Préparation de ServiceWorker : Le navigateur démarre le service worker.
• Requête adressée à ServiceWorker. La requête est envoyée au service worker.
• En attente (TTFB). Le navigateur attend le premier octet d'une réponse. TTFB signifie "Time To First Byte" (temps de latence du premier octet). Ce délai inclut un aller-retour de latence et le temps nécessaire au serveur pour préparer la réponse.
• Téléchargement de contenu : Le navigateur reçoit la réponse, soit directement du réseau, soit d'un service worker. Cette valeur correspond au temps total passé à lire le corps de la réponse. Des valeurs plus élevées que prévu peuvent indiquer un réseau lent ou que le navigateur est occupé à effectuer d'autres tâches, ce qui retarde la lecture de la réponse.

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 le tableau des requêtes. Les outils de développement colorent les initiateurs en vert et les dépendances en rouge.

Lorsque le tableau Requests (Requêtes) est trié par ordre chronologique, la première requête verte au-dessus de celle sur laquelle vous pointez est l'initiateur de la dépendance. Si une autre requête verte se trouve au-dessus, cette requête de niveau supérieur est l'initiateur de l'initiateur. Et ainsi de suite.

Afficher les événements de chargement

Les outils de développement affichent le moment où les événements DOMContentLoaded et load se produisent à plusieurs endroits du panneau Réseau. L'événement DOMContentLoaded est en bleu et l'événement load est en rouge.

Afficher le nombre total de requêtes

Le nombre total de requêtes est indiqué dans la barre d'état en bas du panneau Réseau.

Afficher la taille totale des ressources transférées et chargées

Les outils de développement listent la taille totale des ressources transférées et chargées (non compressées) dans la barre d'état en bas du panneau Réseau.

Consultez Afficher la taille non compressée d'une ressource pour connaître la taille des ressources une fois que le navigateur les a décompressées.

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

Lorsqu'une instruction JavaScript entraîne la demande d'une ressource, pointez sur la colonne Initiateur pour afficher la trace de la pile menant à la demande.

Afficher la taille non compressée d'une ressource

Sélectionnez Paramètres > Lignes de requête volumineuses, puis examinez la valeur inférieure de la colonne Taille.

Dans cet exemple, la taille compressée du document www.google.com envoyé sur le réseau était de 43.8 KB, tandis que la taille non compressée était de 136 KB.

Exporter les données des demandes

Vous pouvez exporter ou copier la liste des requêtes, avec les filtres appliqués, de plusieurs manières décrites ci-dessous.

Enregistrer toutes les requêtes 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. Ce format correspond à un objet JSON avec un ensemble de champs particulier.

Pour réduire le risque de fuite accidentelle d'informations sensibles, vous pouvez par défaut exporter le journal réseau "nettoyé" au format HAR, qui exclut les informations sensibles telles que les en-têtes Cookie, Set-Cookie et Authorization. Si nécessaire, vous pouvez également exporter le journal avec les données sensibles.

Pour enregistrer toutes les requêtes réseau dans un fichier HAR, choisissez l'une des deux méthodes suivantes :

• Effectuez un clic droit sur une requête dans le tableau Requêtes, puis sélectionnez Copier > Tout enregistrer [listé] au format HAR (nettoyé) ou Tout enregistrer [listé] au format HAR (avec données sensibles).

  

• Cliquez sur Télécharger Exporter au format HAR (nettoyé)… dans la barre d'action en haut du panneau Réseau.

  Pour exporter des données sensibles, commencez par activer Paramètres Paramètres > Préférences > Réseau > check_box Autoriser la génération de fichiers HAR avec des données sensibles, puis cliquez sur le bouton download Exporter et sélectionnez Exporter au format HAR (avec données sensibles) dans le menu déroulant.

  

Une fois que vous disposez d'un fichier HAR, vous pouvez le réimporter dans les outils de développement pour l'analyser de deux manières :

• Glissez-déposez le fichier HAR dans le tableau Requests (Requêtes).
• Cliquez sur Importer Importer un fichier HAR dans la barre d'action en haut du panneau Réseau.

Copier une ou plusieurs demandes (filtrées ou non) dans le presse-papiers

Dans la colonne Nom du tableau Requêtes, effectuez un clic droit sur une requête, pointez sur Copier, puis sélectionnez l'une des options suivantes.

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

• Copier l'URL Copiez l'URL de la requête dans le presse-papiers.
• Copier au format cURL. Copiez la requête en tant que commande cURL.
• Copier au format PowerShell. Copiez la requête en tant que commande PowerShell.
• Copier en tant que fetch. Copiez la requête en tant qu'appel de récupération.
• Copier en tant que fetch (Node.js) Copiez la requête en tant qu'appel fetch Node.js.
• Copier en tant qu'élément de préchargement Copiez la demande en tant que balise HTML <link rel="preload">.
• Copier la réponse Copiez le corps de la réponse dans le presse-papiers.
• Copier la trace de la pile. Copiez la trace de la pile de la requête dans le presse-papiers.

Pour copier toutes les demandes :

• Copier toutes les URL : copiez les URL de toutes les requêtes dans le presse-papiers.
• Tout copier au format cURL. Copiez toutes les requêtes sous la forme d'une chaîne de commandes cURL.
• Tout copier au format PowerShell Copiez toutes les requêtes sous la forme d'une chaîne de commandes PowerShell.
• Tout copier en tant que fetch. Copiez toutes les requêtes sous la forme d'une chaîne d'appels de récupération.
• Tout copier en tant que récupération (Node.js). Copie toutes les requêtes sous forme de chaîne d'appels Node.js fetch.
• Tout copier au format HAR (nettoyé) Copiez toutes les requêtes en tant que données HAR sans données sensibles telles que les en-têtes Cookie, Set-Cookie et Authorization.
• Tout copier au format HAR (y compris les données sensibles). Copiez toutes les requêtes en tant que données HAR avec des données sensibles.

Pour copier un ensemble de requêtes filtrées, appliquez un filtre au journal réseau, effectuez un clic droit sur une requête, puis sélectionnez :

• Copier toutes les URL listées : copie les URL de toutes les requêtes filtrées dans le presse-papiers.
• Copier tout ce qui est listé en tant que cURL. Copiez toutes les requêtes filtrées sous la forme d'une chaîne de commandes cURL.
• Copiez tout ce qui est listé en tant que PowerShell. Copiez toutes les requêtes filtrées sous forme de chaîne de commandes PowerShell.
• Copiez tout ce qui est listé en tant que récupération. Copiez toutes les requêtes filtrées sous la forme d'une chaîne d'appels de récupération.
• Copier tout ce qui est listé en tant que fetch (Node.js). Copiez toutes les requêtes filtrées sous la forme d'une chaîne d'appels de récupération Node.js.
• Copier tout ce qui est listé au format HAR (nettoyé) Copiez toutes les requêtes filtrées en tant que données HAR sans données sensibles telles que les en-têtes Cookie, Set-Cookie et Authorization.
• Copier tout ce qui est listé au format HAR (y compris les données sensibles). Copiez toutes les requêtes filtrées en tant que données HAR avec des données sensibles.

Modifier la mise en page du panneau "Réseau"

Développez ou réduisez les sections de l'interface utilisateur du panneau Réseau pour vous concentrer sur ce qui est important pour vous.

Masquer la barre d'action "Filtres"

Par défaut, les outils de développement affichent la barre de filtres en haut du panneau Réseau. Cliquez sur filter_alt Filtrer pour le masquer.

Utiliser de grandes lignes de requête

Utilisez de grandes lignes lorsque vous souhaitez ajouter plus d'espace vide dans le tableau des requêtes réseau. Certaines colonnes fournissent également des informations supplémentaires lorsque vous utilisez de grandes lignes. Par exemple, la valeur inférieure de la colonne Taille correspond à la taille non compressée d'une requête, et la colonne Priorité affiche la priorité de récupération initiale (valeur inférieure) et finale (valeur supérieure).

Ouvrez Paramètres , puis cliquez sur Lignes de requêtes volumineuses pour afficher les lignes volumineuses.

Masquer la piste "Vue d'ensemble"

Par défaut, les outils de développement affichent la piste Overview (Présentation). Ouvrez Paramètres , puis décochez la case Afficher l'aperçu pour le masquer.