Liste des requêtes réseau

La Liste des requêtes réseau du Moniteur Réseau affiche une liste des requêtes faites dans la page depuis son chargement.

Liste des requêtes réseau

Par défaut, le moniteur affiche une liste de toutes les requêtes faites lors du chargement de la page, à raison d'une par ligne :Il est également vidé par défaut lors d'un changement de page ou du rafraîchissement de la page. Vous avez la possibilité de modifier ce comportement en cochant "Activer les journaux persistants" dans les paramètres des outils de développement.

Champs des requêtes réseau

Il est possible d'afficher/cacher les différentes colonnes avec un clic droit sur l'en-tête du tableau (la ligne des noms des colonnes). Une option " Réinitialiser les colonnes" est également disponible. Voici une liste de toutes les colonnes disponibles :

  • État : le code de statut HTTP renvoyé. Il est indiqué par une icône de couleur : Le code exact est affiché juste après l'icône.
    • un cercle bleu pour les codes d'information (1XX codes). Cela inclut notamment le code 101 (Changement de protocole) pour les upgrades WebSocket.
    •  un cercle vert pour le succès (codes 2XX),
    •  un triangle orange pour la redirection (3XX)
    •  un carré rouge pour les erreurs (4XX et 5XX).
    •  un cercle gris pour les réponses récupérées dans le cache du navigateur
  • Méthode : la méthode de la requête HTTP.
  • Fichier : nom du fichier requis.
  • Protocole: Le protocole réseau utilisé pour transférer les donnée.
  • Scheme: Le "scheme" (https/http/ftp/...) du chemin demandé.
  • Domaine : le domaine du chemin requis.
    • Si la requête utilise le protocole SSL/TLS et que la connexion a une faiblesse de sécurité telle qu'un chiffrement peu solide, une icône en forme de triangle apparaît à côté du domaine. On peut trouver davantage de détails sur le problème dans l'onglet Sécurité.
    • Survolez le domaine pour voir l'adresse IP.
    • Il y a une icône à côté du domaine qui donne des informations supplémentaires sur le statut de sécurité de la requête. Voir icônes de sécurité.
  • IP distante: l'adresse IP du serveur répondant à la requête.
  • Source: La cause de la requête, par exemple un  une requête XHR, un <img>, un script, etc.
  • Type: Le Content-type de la réponse.
  • Cookies: Le nombre de "cookies de requêtes" associés à la requête.
  • Set-Cookies: Le nombre de "cookies de réponse" associés à la requête.
  • Transfert : Le nombre d'octets qui ont réellement été transférés pour charger la ressource. Cela sera plus petit que "Taille" si la ressource a été compressée. Si la ressource a été chargée depuis le cache d'un service worker, alors la case affiche "service worker"
  • Taille : la taille de la ressource transférée.

La barre supérieure donne l'intitulé des colonnes, et en cliquant sur ces intitulés classera toutes les requêtes en fonction de la colonne sélectionnée.

Miniature d'image

Si le fichier est une image, la ligne inclut une miniature de l'image et passer dessus affichera un aperçu de l'image :

 

 

Icônes sécurité

Le Moniteur réseau affiche une icône dans la colonne "Domaine" :

 

 

Cela donne une information supplémentaire concernant la sécurité de la requête :

Icône Signification
HTTPS
HTTPS faible (un encodage faible par exemple )
HTTPS invalide (un certificat invalide par exemple)
HTTP
Localhost
Indique que l'URL appartient à un traqueur connu qui serait bloqué si le blocage de contenu était activé.

Pour chaque requête HTTPS faible ou ratée, il est possible de voir des détails du problème dans l'onglet Sécurité.

Colonne source

Cette colonne indique la cause de la requête. C'est généralement évident et il est possible de voir la corrélation ave la colonne "Type". Les valeurs les plus courantes sont :

  • document : le document HTML source.
  • img: élément <img>.
  • imageset: élément <img>.
  • script: un fichier JavaScript.
  • stylesheet: un fichier CSS.

Chronologie

La liste des requêtes affiche également une chronologie des différentes parties de chaque requête :

La chronologie de chaque requête est donnée relativement aux autres, de telle façon que vous puissiez voir le temps de chargement total. Pour plus d'informations concernant le code couleur utilisé ici, consultez la section Délais de cette page.

La chronologie contient également deux lignes verticales :

  • La ligne bleue marque le point à partir duquel l'évènement DOMContentLoaded de la page est activé.
  • La ligne rouge marque le point à partir duquel l'évènement load de la page est activé

Filtrer les requêtes

  Il est possible de filtrer le contenu des requêtes par type de contenu ou par URL.

Filtrer par type de contenu

Pour filtrer par type de contenu, il faut utiliser les boutons de la barre d'outils.

Filtrer les requêtes XHR

Pour ne voir que les les requêtes XHR , il faut utiliser le bouton "XHR" de la barre d'outils

Filtrer les WebSockets

Pour ne voir que les connections WebSocket, il faut utiliser le bouton "WS" de la barre d'outils

Pour examiner les données échangées par les connections WebSocket, essayez le module complémentaire WebSocket Monitor.

Filtrer par URL

Pour cela, il y a une barre de recherche dans la barre d'outils. Cliquez à l'intérieur, ou faites la combinaison de touches clavier  Ctrl + F (ou Cmd + F sous Mac) , et saisissez votre recherche. La liste des requêtes réseau sera filtrée en fonction de la chaîne de caractère recherchée, sur les parties concernant le "Domaine" ou le "Fichier".

Il est possible de filtrer les requêtes qui ne contiennent pas la chaine de caractères recherchée. Il faut pour cela préfixer votre recherche par l'opérateur "-". Par exemple la recherche "-google.fr" affichera toutes les requêtes qui n'ont pas "google.fr" dans leur URL.

Filtrer par propriétés

Pour filtrer par propriétés de requêtes, il faut utiliser la boite de recherche de la barre d'outils. Cette boite reconnait les mot-clés spécifiques qui peuvent être utilisés pour filtrer les requêtes. Un mot-clé doit être suivi de deux points, puis d'une valeur de filtre valide. Les valeurs de filtres ne sont pas sensibles à la case (majuscule ou minuscule). précéder l'expression d'un moins (-) inverse le filtre. Il est possible de combiner différents filtres en les séparant par un espace.

Mot-clé Signification Exemple(s)
status-code Affiche les ressources avec un code de statut HTTP spécifique. status-code:304
method Affiche les ressources qui ont été requises par un une méthode HTTP spécifique. method:post
domain Affiche les ressources provenant d'un domaine spécifique. domain:mozilla.org
remote-ip Affiche les ressources provenant d'un serveur à l'adress IP spécifique. remote-ip:63.245.215.53
remote-ip:[2400:cb00:2048:1::6810:2802]
cause Affiche les ressources qui correspondent à une cause spécifique. Ces types se trouvent dans la colonne source. cause:js
cause:stylesheet
cause:img
transferred Affiche les ressources ayant une taille de transfert spécifique, ou une taille proche de celle spécifiée. "k" peut être utilisé comme suffixe pour les killobyte et m pour les megabytes. (1k vaut alors 1024). transferred:1k
size Affiche les ressources ayant une taille (après décompression) spécifique, ou une taille proche de celle spécifiée. "k" peut être utilisé comme suffixe pour les killobyte et m pour les megabytes. (1k vaut alors 1024) size:2m
larger-than Affiche les ressources qui sont plus grandes que la taille spécifiée. "k" peut être utilisé comme suffixe pour les killobyte et m pour les megabytes. (1k vaut alors 1024) larger-than:2000
-larger-than:4k
mime-type Affiche les ressources qui coresspondent au type MIME spécifié. mime-type:text/html
mime-type:image/png
mime-type:application/javascript
is is:cached et is:from-cache affichent uniquement les ressources venant du cache.
is:running affiche seulement les ressources en cours de transfert.
is:cached
-is:running
scheme Affiche les ressources transfére par le "scheme" spécifié. scheme:http
has-response-header Affiche les ressources qui contienent la "response header HTTP" spécifiée. has-response-header:cache-control
has-response-header:X-Firefox-Spdy
set-cookie-domain Affiche les ressources qui ont un header Set-Cookie avec un attribut Domain qui correspond à la valeur spécifiée. set-cookie-domain:.mozilla.org
set-cookie-name Affiche les ressources qui ont un header Set-Cookie avec un nom qui correspond à la valeur spécifiée. set-cookie-name:_ga
set-cookie-value Affiche les ressources qui ont un header Set-Cookie avec une valeur qui correspond à la valeur spécifiée. set-cookie-value:true
regexp Affiche les ressources dont l'URL correspond l'regular expression spécifiée. regexp:\d{5}
regexp:mdn|mozilla

Un clic droit sur une ligne de la liste affiche un menu contextuel avec les options suivantes :

  • Copier l'URL
  • Copier les paramètres de l'URL (à partir de Firefox 40)
  • Copier les données POST  (à partir de Firefox 40, uniquement pour les requêtes POST)
  • Copier en tant que commande cURL
  • Copier les En-têtes de la requête (à partir de Firefox 40)
  • Copier les En-têtes de la réponse (à partir de Firefox 40)
  • Copier la réponse (à partir de Firefox 40)
  • Copier l'image comme Data URI (seulement pour les images)
  • Tout copier en tant qu’HAR (à partir de Firefox 41)
  • Tout enregistrer en tant qu’HAR (à partir de Firefox 41)
  • Enregistrer l'image (à partir de Firefox 55, et seulement pour les images)
  • Modifier et renvoyer
  • Ouvrir dans un nouvel onglet
  • Lancer l'analyse des performances pour la page

Modifier et renvoyer

Cette option ouvre un éditeur qui vous permet de modifier les méthodes de requêtes, les URLs, les paramètres, les en-têtes et de renvoyer la requête.

Ouvrir dans un nouvel onglet

Renvoie la nouvelle requête dans un nouvel onglet. Très utile pour déboguer des requêtes asynchrones.

Copier en tant que commande cURL

Cette option copie la requête réseau dans le presse-papier en tant que commande cURL, de telle sorte que vous puissiez l'exécuter depuis une ligne de commande. La commande peut inclure les paramètres suivants :

-X [METHOD] Si la méthode n'est pas GET ou POST
--data pour les paramètres de requêtes URL encodés
--data-binary Pour les paramètres de requêtes multiparties
--http/VERSION Si la version de HTTP n'est pas 1.1
-I Si la méthode est HEAD
-H

Un pour chaque en-tête de requête :

Depuis Firefox 34, si l'en-tête  "Accept-Encoding" est présent, la commande cURL inclura --compressed à la place de -H "Accept-Encoding: gzip, deflate". Cela signifie que la réponse sera automatiquement décompressée.

Tout copier/enregistrer en tant qu’HAR

Ces options crée une Archive HTTP (HAR) pour toutes les requêtes listées. Ce format permet d'exporter des informations détaillées sur les requêtes réseau. "Tout copier" copie le contenu dans le presse-papiers. "Tout enregistrer" ouvre une fenêtre pour sauvegarder l'archive sur un disque. Le nouveau menu 'HAR' (en haut à droite) inclut également ces options, ainsi qu'une option pour importer un HAR :

Étiquettes et contributeurs liés au document

Contributeurs à cette page : maximelore
Dernière mise à jour par : maximelore,