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

Découvrez de nouvelles façons d'analyser le chargement de votre page dans cette référence complète des fonctionnalités d'analyse du réseau des outils de développement 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 l'enregistrement des 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 Cmd+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 demandes lors des chargements de page

Pour enregistrer les requêtes lors du chargement des pages, 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 lors du chargement d'une page

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

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

Actualisez la page lorsque le panneau Réseau est sélectionné pour capturer 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 chronologie Vue d'ensemble.
• 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.

Relancer la requête XHR

Pour rejouer une requête XHR, effectuez l'une des opérations suivantes dans le tableau Requests (Requêtes) :

• Sélectionnez la demande, puis appuyez sur R.
• Effectuez un clic droit sur la requête, puis sélectionnez Rejouer XHR.

Modifier le comportement de chargement

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

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

Désactiver le cache du navigateur depuis le tiroir "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 Requests (Requêtes), puis sélectionnez Clear browser cache (Vider le cache du navigateur).

Émuler le mode hors connexion

Il existe une nouvelle catégorie d'applications Web, appelées progressive web apps, qui peuvent fonctionner hors connexion à l'aide des 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 du réseau à côté de la case à cocher 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.

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.

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 Limitation du débit, puis sélectionnez Personnalisé > Ajouter….
2. Configurez un nouveau profil de limitation du débit comme décrit dans Paramètres Paramètres > Limitation du débit.

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.

Réguler 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 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 et envoyez un message via la connexion.
3. Créez un profil de limitation personnalisé très lent, par exemple 10 kbit/s. Un profil 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 du débit. Exemple :

Émuler des connexions réseau lentes à partir du tiroir "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 du réseau.

Supprimer manuellement les cookies du navigateur

Pour supprimer manuellement les cookies du navigateur à tout moment, effectuez un clic droit n'importe où dans le tableau Requêtes, puis sélectionnez Supprimer 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. Choisissez une option d'agent utilisateur 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 :

   • Sur 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 Network met en surbrillance en jaune la requête correspondante. De plus, le panneau ouvre également 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 Actualiser . Pour effacer les résultats, cliquez sur Bloquer Effacer.

Pour en savoir plus sur toutes les façons d'effectuer des recherches 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 la zone Filtrer pour filtrer les demandes par propriétés, telles que le domaine ou la taille de la demande.

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é de la case 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 kilooctet. Ces filtres multipropriétés sont équivalents à des opérations AND. Les opérations OR ne sont pas acceptées.

Vous trouverez ci-dessous la liste complète des propriétés acceptées.

• cookie-domain Affichez les ressources qui définissent un domaine de cookie spécifique.
• cookie-name. Affichez 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 avec tous les domaines qu'ils ont rencontrés.
• has-overrides : affiche les demandes qui ont remplacé content, headers, tous les 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 à celle 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écifié. Les outils de développement remplissent 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 : affiche toutes les ressources de contenu mixte (mixed-content:all) ou uniquement 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. Affichez les ressources d'un type de ressource, par exemple une image. Les outils pour les développeurs remplissent 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 mal formés 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 comportent un en-tête Set-Cookie avec un attribut Domain correspondant à la valeur spécifiée. Les outils de développement remplissent la saisie semi-automatique avec tous les domaines de cookies qu'ils ont rencontrés.
• set-cookie-name. Affiche les ressources qui comportent un en-tête Set-Cookie dont le nom 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 a une valeur correspondant à la valeur spécifiée. Les outils de développement remplissent l'autocomplétion 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 demandes par type

Pour filtrer les requêtes par type de ressource, cliquez sur les boutons Tout, Récupérer/XHR, JS, CSS, Img, Média, Police, Doc, WS (WebSocket), Wasm (WebAssembly), Manifeste ou Autre (tout autre type non listé ici) du panneau Réseau.

Si vous ne voyez pas ces boutons, il est probable que la barre d'action Filtres soit masquée. Consultez Masquer la barre "Filtres".

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

Filtrer les demandes par période

Faites glisser le curseur vers la gauche ou la droite sur la chronologie Vue d'ensemble pour n'afficher que les requêtes actives pendant cette période. Le filtre est inclusif. Toute requête active pendant la période mise en évidence s'affiche.

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 indique le nombre de demandes 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 requêtes d'extension commencent par chrome-extension://.

Pour masquer les demandes d'extension, dans la barre d'actions Filtres, sélectionnez Plus de filtres > check_box Masquer les URL d'extension.

La barre d'état en bas de l'écran indique le nombre de demandes affichées sur le nombre total.

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'actions Filtres, sélectionnez Plus de filtres > check_box Cookies de réponse bloqués.

La barre d'état en bas de l'écran indique le nombre de demandes affichées sur le nombre total.

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 tous les éléments, à l'exception des requêtes bloquées, dans la barre d'action Filtres, sélectionnez Plus de 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 Requests (Requêtes) met en évidence les requêtes bloquées en rouge. La barre d'état en bas de l'écran indique le nombre de demandes affichées sur le nombre total.

Afficher uniquement les demandes tierces

Pour filtrer tous les éléments, à l'exception des 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 indique le nombre de demandes affichées sur le nombre total.

Trier les demandes

Par défaut, les requêtes du tableau Requests (Requêtes) sont triées par heure d'initiation, mais vous pouvez trier le tableau selon d'autres critères.

Trier par colonne

Cliquez sur l'en-tête d'une colonne du tableau Demandes pour trier les demandes selon 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 lancée se trouve en haut de la liste.
• Temps de réponse : La première requête qui a lancé le téléchargement se trouve en haut de la liste.
• Heure de fin La première requête terminée se trouve en haut de la liste.
• 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 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 demandes

Tant que les outils pour les développeurs 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 demandes

Utilisez le tableau Requests (Requêtes) pour afficher un journal de toutes les requêtes effectuées lorsque les outils de développement sont ouverts. Cliquez sur les demandes ou pointez dessus pour en savoir plus.

Par défaut, le tableau "Requêtes" affiche 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 entre origines multiples (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 contenant un indice sur ce qui n'a pas fonctionné.
  • (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.
  • 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 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 demande.

Ajouter ou supprimer des colonnes

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

Vous pouvez ajouter ou supprimer les colonnes supplémentaires suivantes : Chemin d'accès, URL, Méthode, Protocole, Schéma, Domaine, Adresse distante, Espace d'adresses distant, Espace d'adresses de l'initiateur, Cookies, Définir les cookies, Priorité, ID de connexion, A des remplacements et Cascade.

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 initient 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 Grouper par frame.

Pour afficher une requête lancée par un 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, la cascade est organisée en fonction de l'heure de début des requêtes. Ainsi, les requêtes 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 la 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. Cliquez sur l'onglet Messages. Le tableau affiche les 100 derniers messages.

Pour actualiser le tableau, cliquez à nouveau sur le nom de la connexion WebSocket sous 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 : trame de continuation, trame binaire, trame de fermeture de connexion, trame Ping et trame 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 codés par 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 en streaming 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 Clear (Effacer).

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

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

1. Cliquez sur l'URL de la demande dans la colonne Nom du tableau Demandes.
2. Cliquez sur l'onglet Aperçu.

Cet onglet est surtout utile pour afficher des images.

Afficher le corps d'une réponse

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

1. Cliquez sur l'URL de la demande dans la colonne Nom du tableau "Demandes".
2. Cliquez sur 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. Cliquez sur une demande dans le tableau Demandes.
2. Ouvrez l'onglet En-têtes et faites défiler la page jusqu'aux sections Général, En-têtes de réponse, En-têtes de requête et, éventuellement, En-têtes d'indices précoces.

Dans la section Général, les outils de développement affichent un message d'état lisible à 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 Modifier 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 d'en-tête HTTP dans l'ordre dans lequel ils ont été reçus :

1. Ouvrez l'onglet 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 requête

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 Requêtes, puis ouvrez l'onglet Charge utile.

Afficher la source de la charge utile

Par défaut, les outils de développement affichent la charge utile sous une forme lisible.

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 arguments décodés via l'URL des paramètres de la chaîne de requête

Pour activer ou désactiver l'encodage des URL pour les arguments, cliquez sur Afficher le décodage ou Afficher l'encodage des URL dans l'onglet Charge utile.

Afficher les cookies

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

1. Cliquez sur l'URL de la demande dans la colonne Nom du tableau "Demandes".
2. Cliquez sur l'onglet Cookies.

Pour obtenir une description de chaque colonne, consultez Champs.

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

Afficher la répartition du timing d'une requête

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

1. Cliquez sur l'URL de la demande dans la colonne Nom du tableau Demandes.
2. Cliquez sur l'onglet Timing.

Pour accéder plus rapidement à ces données, consultez Prévisualiser une répartition du timing.

Pour en savoir plus sur chacune des phases qui peuvent s'afficher dans l'onglet Timing, consultez Explication des phases de répartition du timing.

Prévisualiser une répartition du timing

Pour afficher un aperçu de la répartition du timing d'une requête, pointez sur l'entrée de la requête dans la colonne Cascade du tableau "Requêtes".

Consultez Afficher la répartition du timing d'une requête pour savoir comment accéder à ces données sans avoir à pointer sur les éléments.

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é des requêtes est déterminée par des facteurs tels que le type de ressource et 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 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 la section 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 handshakes ou les tentatives TCP, et négocie un protocole SSL.
• Négociation par procuration : 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 timing 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 "Requêtes". Les outils de développement affichent 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. S'il existe une autre requête verte 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 timing des événements DOMContentLoaded et load à plusieurs endroits du panneau Réseau. L'événement DOMContentLoaded est bleu et l'événement load est rouge.

Afficher le nombre total de demandes

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 décompressées par le navigateur.

Afficher la trace de 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 pile menant à la requête.

Afficher la taille non compressée d'une ressource

Cochez Paramètres > Lignes de grandes requêtes, 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 demandes, 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 les risques de fuite accidentelle d'informations sensibles, vous pouvez exporter par défaut 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 des 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'actions 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 avez 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 HAR dans la barre d'actions en haut du panneau Réseau.

Copier une ou plusieurs demandes (ou toutes) dans le presse-papiers

Dans la colonne Nom du tableau Demandes, effectuez un clic droit sur une demande, pointez sur Copier, puis sélectionnez l'une des options suivantes.

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

• Copier l'URL Copiez l'URL de la demande dans le presse-papiers.
• Copier en tant que 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 fetch.
• Copiez en tant que fetch (Node.js). Copiez la requête en tant qu'appel fetch Node.js.
• 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 : copie les URL de toutes les requêtes dans le presse-papiers.
• Tout copier en tant que cURL Copiez toutes les requêtes sous forme de chaîne de commandes cURL.
• Tout copier en tant que PowerShell Copiez toutes les requêtes sous forme de chaîne de commandes PowerShell.
• Tout copier en tant que fetch : Copiez toutes les requêtes sous forme de chaîne d'appels fetch.
• Tout copier en tant que fetch (Node.js) Copiez toutes les requêtes sous forme de chaîne d'appels fetch Node.js.
• 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 en tant que fichier HAR (avec données sensibles) Copiez toutes les requêtes en tant que données HAR avec des données sensibles.

Pour copier un ensemble filtré de requêtes, 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 forme de 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.
• Copier tout ce qui est listé en tant que fetch Copiez toutes les requêtes filtrées sous forme de chaîne d'appels fetch.
• Copiez tout ce qui est listé en tant que fetch (Node.js). Copiez toutes les requêtes filtrées sous forme de chaîne d'appels fetch 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.
• Copiez 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'actions "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 les lignes de requêtes larges

Utilisez de grandes lignes lorsque vous souhaitez 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é indique la priorité de récupération initiale (valeur inférieure) et finale (valeur supérieure).

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

Masquer la piste "Vue d'ensemble"

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