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 documentation de référence complète sur les outils pour les développeurs Chrome et les fonctionnalités d'analyse réseau.

Enregistrer les requêtes réseau

Par défaut, les outils de développement enregistrent toutes les requêtes réseau dans le panneau Network (Réseau), à condition qu'ils soient 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 Network (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 au centre.

Effacer les demandes

Cliquez sur Effacer. dans le panneau Network (Réseau) pour effacer toutes les requêtes de la table Requests (Requêtes).

Enregistrer les demandes pour tous les chargements de page

Pour enregistrer les requêtes sur plusieurs 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 voient les utilisateurs pendant qu'ils attendent le chargement de votre page.

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

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

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

• Pointez sur une capture d'écran pour voir à quel moment elle a été effectuée. Une ligne jaune s'affiche dans le volet "Aperçu".
• Cliquez sur la vignette d'une capture d'écran pour filtrer les demandes survenues après la capture d'écran. capturées.
• Double-cliquez sur une vignette pour l'afficher en plein écran.

Relancer la requête XHR

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

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

Modifier le comportement de chargement

Émuler un nouveau visiteur en désactivant le cache du 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 le cache du navigateur. Cela émule plus précisément l'expérience d'un nouvel utilisateur, car les demandes sont émises à partir du cache du navigateur lors de visites répétées.

Désactiver le cache du navigateur à partir du panneau "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 champ Conditions du réseau panneau.

1. Cliquez sur l'icône pour ouvrir le panneau Conditions du réseau.
2. Cochez ou décochez la case Disable cache (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 catégorie d'applications Web, appelée Progressive Web Apps, qui peut fonctionner hors connexion avec avec l'aide des service workers. Lorsque vous créez ce type d'application, il est utile de pouvoir de simuler rapidement un appareil sans connexion de données.

Pour simuler une expérience réseau totalement hors connexion, sélectionnez Hors connexion dans le menu déroulant Limitation du réseau situé à 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 les connexions réseau lentes

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

Les outils de développement affichent une icône d'avertissement avertissement à côté du panneau Network (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 (4G lente ou rapide, par exemple), vous pouvez ajouter les vôtres profils de limitation personnalisés:

1. Ouvrez le menu Limitation et sélectionnez Personnalisé > Ajouter...
2. Configurez un nouveau profil de limitation comme décrit dans Paramètres Paramètres > Limitation.

3. De retour dans le panneau Network (Réseau), sélectionnez votre nouveau profil dans le menu déroulant Throttling (Limitation).

   

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

Limiter les connexions WebSocket

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

Pour observer la limitation WebSocket, procédez comme suit:

1. Établissez une nouvelle connexion, par exemple à l'aide d'un outil de test.
2. Dans le panneau Network (Réseau), sélectionnez No throttling (Aucune limitation) 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 aussi lent vous aidera à faire 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 et vérifiez le décalage horaire entre les messages envoyés et les messages en écho, avec et sans limitation. Exemple :

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

Si vous souhaitez limiter la connexion réseau tout en travaillant dans d'autres panneaux des outils de développement, utilisez Panneau 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 Network throttling (Limitation de la 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 Demandes et sélectionnez Effacer les cookies du navigateur

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

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

Remplacer le 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 l'option Sélectionner automatiquement.
3. Sélectionnez une option de user-agent dans le menu ou saisissez-en une personnalisée dans le champ.

Filtrer les requêtes

Filtrer les requêtes par propriété

Utilisez le champ Filtre pour filtrer les requêtes par propriétés, telles que le domaine ou la taille requête.

Si cette case ne s'affiche pas, cela signifie que le volet "Filtres" est probablement masqué. Consultez la section Masquer le volet "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. Pour Par exemple, mime-type:image/gif larger-than:1K affiche tous les GIF d'une taille supérieure à un kilo-octet. Ces filtres multi-propriétés équivalent aux opérations AND. Les opérations OR ne sont pas acceptées.

Voici la liste complète des propriétés prises en charge.

• 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 Affichez les ressources qui définissent une valeur de cookie spécifique.
• domain Permet d'afficher uniquement 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 dans .com. Les outils de développement affichent une liste de tous les domaines dans le menu déroulant de saisie semi-automatique rencontrés.
• has-overrides Affiche les requêtes qui ont remplacé content, headers, tous les remplacements (yes) ou aucun remplacement (no). Vous pouvez ajouter la colonne Contient des remplacements correspondante au tableau des requêtes.
• has-response-header Affiche les ressources qui contiennent l'en-tête de réponse HTTP spécifié. Les outils de développement renseignent la liste déroulante de saisie semi-automatique avec tous les en-têtes de réponse rencontrés.
• is Utilisez is:running pour trouver des 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 la valeur 1k.
• method Affiche les ressources récupérées via un type de méthode HTTP spécifié. Insère des outils de développement la liste déroulante de saisie semi-automatique avec toutes les méthodes HTTP qu’elle a rencontrées.
• mime-type Affiche les ressources d'un type MIME spécifié. Les outils de développement renseignent la liste déroulante de saisie semi-automatique avec tous les types MIME qu'il a rencontrés.
• mixed-content Afficher toutes les ressources de contenu mixte (mixed-content:all) ou uniquement celles qui sont affichées (mixed-content:displayed).
• priority Afficher les ressources dont le niveau de priorité correspond à la valeur spécifiée.
• resource-type Affiche les ressources d'un type donné (par exemple, l'image). Les outils de développement renseignent de saisie semi-automatique avec tous les types de ressources rencontrés.
• response-header-set-cookie Afficher les en-têtes Set-Cookie bruts dans l'onglet "Problèmes". Cookies mal formés avec des en-têtes Set-Cookie incorrects sont signalés dans le panneau "Network".
• scheme Afficher les ressources récupérées via le protocole HTTP non protégé (scheme:http) ou le protocole HTTPS protégé (scheme:https).
• set-cookie-domain Afficher les ressources ayant un en-tête Set-Cookie avec un attribut Domain qui correspond à la valeur spécifiée. Les outils de développement renseignent la saisie semi-automatique avec tous les cookies qu'il a rencontrés.
• set-cookie-name Affichez les ressources qui possèdent un en-tête Set-Cookie dont le nom correspond au la valeur spécifiée. Les outils de développement renseignent la saisie semi-automatique avec tous les noms de cookies rencontrés.
• set-cookie-value Afficher les ressources dont l'en-tête Set-Cookie correspond à la valeur la valeur spécifiée. Les outils de développement renseignent la saisie semi-automatique avec toutes les valeurs de cookie rencontrés.
• status-code Afficher uniquement les ressources dont le code d'état HTTP correspond au code spécifié. DevTools insère tous les codes d'état rencontrés.
• url Afficher les ressources dont le url correspond à la valeur spécifiée.

Filtrer les requêtes par type

Pour filtrer les requêtes par type, cliquez sur les boutons All, Fetch/XHR, JS, CSS, Img, Media, Police, Doc, WS (WebSocket), Wasm (WebAssembly), Manifeste ou Autre (tout autre type non répertorié ici) dans le panneau Network (Réseau).

Si vous ne voyez pas ces boutons, le volet "Filtres" est probablement masqué. Voir la section Masquer les filtres volet.

Pour activer plusieurs filtres de types simultanément, maintenez les touches Commande (Mac) ou Ctrl (Windows, Linux) enfoncées et puis cliquez dessus.

Filtrer les requêtes par heure

Faites glisser le volet Vue d'ensemble vers la gauche ou la droite pour n'afficher que les requêtes actives pendant cette période. Le filtre est inclusif. Toute requête active pendant l'heure mise en surbrillance est affichés.

Masquer les URL de données

Les URL de données sont de petits fichiers intégrés dans d'autres documents. Toute demande figurant dans la section La table Requêtes commençant par data: est une URL de données.

Pour masquer ces requêtes, cochez la case Masquer les URL de données.

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

Masquer les URL des extensions

Pour vous concentrer sur le code dont vous êtes l'auteur, vous pouvez filtrer les requêtes non pertinentes envoyées par les extensions que vous avez installées dans Chrome. L'URL des demandes d'extension commence par chrome-extension://.

Pour masquer les demandes d'extension, cochez la case Masquer les URL des extensions.

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

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

Pour tout filtrer, à l'exception des requêtes dont les cookies de réponse ont été bloqués pour une raison quelconque, cochez la case Cookies de réponse bloqués. Essayez-la sur cette page de démonstration.

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

Pour savoir pourquoi un cookie de réponse a été bloqué, sélectionnez la demande, ouvrez l'onglet Cookies et pointez sur l'icône d'information .

En outre, le panneau Réseau affiche une icône d'avertissement avertissement à côté d'une demande concernée par l'abandon progressif des cookies tiers ou d'une demande exemptée. Pointez sur l'icône pour afficher une info-bulle contenant un indice, puis cliquez dessus pour accéder au panneau Issues (Problèmes) et en savoir plus.

Afficher uniquement les requêtes bloquées

Pour tout filtrer, à l'exception des requêtes bloquées, consultez Requêtes bloquées. Pour tester cela, vous pouvez utiliser l'onglet du panneau Blocage des requêtes réseau.

Le tableau 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 requêtes affichées par rapport au nombre total.

Afficher uniquement les demandes tierces

Pour filtrer toutes les requêtes, à l'exception des requêtes dont l'origine est différente de l'origine de la page, consultez les requêtes tierces . Essayez-la sur cette page de démonstration.

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

Trier les requêtes

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

Trier par colonne

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

Trier par phase d'activité

Pour modifier la façon dont Waterfall trie les requêtes, effectuez un clic droit sur l'en-tête du tableau "Requêtes", puis pointez sur Waterfall (Cascade d'annonces), puis sélectionnez l'une des options suivantes:

• Heure de début : La première requête lancé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 la plus courte et la requête / réponse se situent à en haut.
• Latence. La requête qui a attendu le moins de temps pour obtenir une réponse se trouve en haut.

Ces descriptions supposent que chaque option est classée du plus court au plus long. Clic sur l'en-tête de la colonne Waterfall inverse l'ordre.

Dans cet exemple, le Waterfall est trié par durée totale. La partie la plus légère de chaque barre est le temps passé à attendre. La partie sombre correspond au temps de téléchargement des octets.

Analyser les requêtes

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

Afficher un journal des requêtes

Le tableau Requests (Requêtes) permet d'afficher le journal de toutes les requêtes effectuées lorsque les outils de développement sont ouverts. En cliquant ou en passant la souris sur les demandes, vous obtenez plus d'informations à leur sujet.

Le tableau "Requêtes" affiche les colonnes suivantes par défaut:

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

• État : Cette colonne peut indiquer les valeurs suivantes:

  

  • Code d'état HTTP, par exemple, 200 ou 404.
  • Échec de CORS error pour les requêtes en raison d'un 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 le problème rencontré.
  • (failed) suivi du message d'erreur.

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

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

  • Analyseur : l'analyseur HTML de Chrome.
  • Redirection : Une redirection HTTP.
  • Script : Une fonction JavaScript.
  • Autre : Autre processus ou action, comme accéder à une page à l'aide d'un lien ou saisir un 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 que fournie par la Google Cloud.

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

• Waterfall (En 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 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, URL, Méthode, Protocole, Schéma, Domaine, Adresse distante, Espace d'adressage distant, Espace d'adressage de l'initiateur, Cookies, Définir des cookies, Priorité, ID de connexion, Comporte des remplacements et Waterfall.

Ajouter des colonnes personnalisées

Pour ajouter une colonne personnalisée au tableau Demandes, procédez comme suit:

1. Effectuez un clic droit sur l'en-tête du tableau Requests (Requêtes), puis sélectionnez Response Headers (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 sur une page déclenchent de nombreuses demandes, vous pouvez rendre le journal des requêtes plus convivial en les regroupant.

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

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

Afficher la chronologie des requêtes les unes par rapport aux autres

Utilisez le Waterfall pour afficher la chronologie des requêtes les unes par rapport aux autres. Par défaut, Les cascades d'annonces sont organisées en fonction de l'heure de début des requêtes. Ainsi, les requêtes situées plus à gauche ont commencé plus tôt que celles qui sont plus à droite.

Consultez Trier par phase d'activité pour voir les différentes manières de trier le Waterfall.

Analyser les messages d'une connexion WebSocket

Pour afficher les messages d'une connexion WebSocket:

1. Dans la colonne Nom de la table 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 la table, cliquez de nouveau sur le nom de la connexion WebSocket dans la colonne Nom de la Requests (Demandes).

Le tableau contient trois colonnes:

• Données : Charge utile du message. Si le message est en texte brut, il est affiché ici. Binaire opcodes, cette colonne affiche le nom et le code du code d’exploitation. Les opcodes suivants sont compatibles: Trame de continuation, frame binaire, frame de fermeture de connexion, frame de ping et frame de 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 correspondant à leur type:

• Les SMS sortants s'affichent en vert clair.
• Les SMS entrants apparaissent en blanc.
• Les opcodes WebSocket sont jaunes clair.
• Les erreurs s'affichent en rouge clair.

Analyser des événements dans un flux

Pour afficher les événements diffusés par les serveurs via l'API Fetch, l'API EventSource et XHR:

1. Enregistrez les requêtes réseau sur une page qui diffuse des événements. Par exemple, ouvrez cette page de démonstration et cliquez sur l'un des trois boutons.
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 bloquer 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 requête, dans la colonne Nom de la table Requêtes.
2. Cliquez sur l'onglet Aperçu.

Cet onglet est particulièrement utile pour afficher des images.

Afficher le corps d'une réponse

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

1. Cliquez sur l'URL de la requête dans la colonne Nom de la table "Requêtes".
2. Cliquez sur l'onglet Response (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 requête dans le tableau Requêtes.
2. Ouvrez l'onglet Headers (En-têtes) et faites défiler la page jusqu'à la section General (Général), Response Headers (En-têtes de réponse), Request Headers (En-têtes des requêtes) et, éventuellement, Early Hints Headers (En-têtes des indications précoces).

Dans la section General (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 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 des en-têtes HTTP dans ordre de réception:

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

Avertissement concernant les en-têtes provisoires

L'onglet En-têtes affiche parfois 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 via le réseau, mais a été diffusée à partir d'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 ne peuvent également afficher que des en-têtes provisoires.

Afficher la charge utile de la requête

Pour afficher la charge utile de la requête, c'est-à-dire ses paramètres de chaîne de requête et ses données de formulaire, sélectionnez une requête dans la table Requests (Requêtes) et 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.

Pour afficher les sources des paramètres de 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 de formulaire.

Afficher les arguments décodés par URL des paramètres de chaîne de requête

Pour activer ou désactiver l'encodage en URL des arguments, sous l'onglet Charge utile, cliquez sur Afficher les valeurs décodées ou Afficher les valeurs encodées en URL.

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 requête dans la colonne Nom de la table "Requêtes".
2. Cliquez sur l'onglet Cookies.

Pour obtenir une description de chacune des colonnes, consultez la section Champs.

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

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

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

1. Cliquez sur l'URL de la requête, dans la colonne Nom de la table Requêtes.
2. Cliquez sur l'onglet Durée.

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

Consultez la section Explications sur les phases de répartition temporelle pour en savoir plus sur chacune des phases que vous pouvez trouver dans l'onglet Durée.

Prévisualiser une répartition temporelle

Pour afficher un aperçu de la répartition temporelle d'une demande, pointez sur l'entrée de la demande dans la Colonne Waterfall de la table Requêtes.

Consultez la section Afficher la répartition temporelle d'une demande pour savoir comment accéder à ces données sans nécessiter ou survoler l'élément.

Explication des phases de répartition temporelle

Vous trouverez ci-dessous des informations supplémentaires sur chacune des phases que vous pouvez voir dans l'onglet Délai:

• Mise en file d'attente. Le navigateur met les requêtes en file d'attente avant le début de la connexion et quand:
  • Il existe des requêtes de priorité plus élevée.
  • Il y a déjà six connexions TCP ouvertes pour cette origine, ce qui correspond à la limite. S'applique à HTTP/1.0 et HTTP/1.1 uniquement.
  • Le navigateur alloue brièvement de l'espace dans le cache disque.
• Ils sont instables. La requête peut être bloquée après le démarrage de la connexion pour l'une des raisons décrites dans la section 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 des handshakes TCP ou des nouvelles tentatives et la négociation d'une norme SSL.
• Négociation du proxy. Le navigateur négocie la demande avec un serveur proxy.
• Demande envoyée. La demande est en cours d'envoi.
• Préparation des serviceWorkers. Le navigateur lance le service worker.
• Requête envoyée à ServiceWorker La requête est en cours d'envoi au service worker.
• En attente (TTFB) : Le navigateur attend le premier octet d'une réponse. TTFB signifie Time Au premier octet. Ce délai inclut un aller-retour de latence et le temps nécessaire au serveur préparer la réponse.
• Téléchargement de contenu. Le navigateur reçoit la réponse, directement du réseau ou d'un service worker. Cette valeur correspond au temps total passé à lire le corps de la réponse. Des valeurs supérieures aux attentes 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 initiés et les dépendances

Pour afficher les demandeurs et les dépendances d'une requête, maintenez la touche Maj enfoncée et pointez sur la requête dans la Table des requêtes. Les déclencheurs des outils de développement sont colorés en vert et les dépendances en rouge.

Lorsque la table Requests est classée chronologiquement, la première requête verte au-dessus de la requête qui sur lequel vous passez la souris est l'initiateur de la dépendance. S'il y a une autre demande verte ci-dessus que cette demande plus élevée est à l'origine de l'initiateur. Et ainsi de suite.

Afficher les événements de chargement

Les outils de développement affichent la chronologie des événements DOMContentLoaded et load à plusieurs endroits sur le Network (Réseau). L'événement DOMContentLoaded est coloré en bleu, et l'événement load est rouge.

Afficher le nombre total de requêtes

Le nombre total de demandes est affiché dans le volet Résumé, en bas du panneau Réseau.

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

Les outils de développement indiquent la taille totale des ressources transférées et chargées (non compressées) dans le volet Summary (Résumé) en bas du panneau Network (Réseau).

Consultez la section Afficher la taille non compressée d'une ressource pour connaître la taille des ressources après leur décompression par le navigateur.

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

Afficher la taille non compressée d'une ressource

Vérifiez les paramètres > Big request rows, puis examinez la valeur inférieure de la colonne Size (Taille).

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

Données des demandes d'exportation

Enregistrer toutes les requêtes réseau dans un fichier HAR

Le format de fichier HAR (HTTP Archive) est 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.

Vous pouvez enregistrer toutes les requêtes réseau dans un fichier HAR de deux manières:

• Effectuez un clic droit sur une requête dans le tableau Requests (Demandes), puis sélectionnez Save all as HAR with content (Tout enregistrer en tant que fichier HAR avec contenu).
• Cliquez sur Exporter le fichier HAR dans la barre d'action en haut du panneau Réseau.

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

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

Copier une ou plusieurs requêtes 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:

• Copier l'URL : Copiez l'URL de la requête 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 récupération : Copiez la requête en tant qu'appel de récupération.

• Copier en tant que récupération Node.js Copiez la requête en tant qu'appel d'extraction Node.js.

  ---

• Copier la réponse : Copiez le corps de la réponse dans le presse-papiers.

  ---

• Copiez toutes les URL. Copier les URL de toutes les requêtes dans le presse-papiers.

• Tout copier en tant que cURL Copier toutes les requêtes sous la forme d'une chaîne de commandes cURL.

• Tout copier en tant que PowerShell Copier toutes les requêtes sous la forme d'une chaîne de commandes PowerShell.

• Tout copier en tant que récupération : 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 Copiez toutes les requêtes sous la forme d'une chaîne d'appels de récupération Node.js.

• Tout copier en tant que fichier HAR. Copiez toutes les demandes en tant que données HAR.

Modifier la mise en page du panneau "Network"

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

Masquer le volet "Filtres"

Par défaut, les outils de développement affichent le volet Filtres. Cliquez sur Filtrer. pour la masquer.

Utiliser les lignes de requêtes volumineuses

Utilisez des lignes volumineuses lorsque vous souhaitez avoir plus d'espaces blancs dans votre table de requêtes réseau. Certaines colonnes fournir un peu plus d'informations 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 fois la priorité de récupération initiale (valeur inférieure) et finale (valeur supérieure).

Ouvrez les paramètres et cliquez sur Big request rows pour afficher les grandes lignes.

Masquer le canal "Aperçu"

Par défaut, les outils de développement affichent le canal Vue d'ensemble. Ouvrez Paramètres et décochez la case Afficher la vue d'ensemble pour le masquer.