Moniteur Réseau

Le moniteur réseau affiche toutes les requêtes effectuées par Firefox (par exemple, au chargement d'une page ou lors de XMLHttpRequests). Le temps que prend chaque requête ainsi que ses détails seront également affichés.

Ouvrir le Moniteur Réseau

Il existe plusieurs façons d'ouvrir le Moniteur :

• Utiliser le raccourci clavier Ctrl +  Maj + E ( Command +  Option + E sur Mac).
• Sélectionner "Réseau" dans le menu développement ( qui est un sous-menu du menu "Outils" sur MAC OS X et Linux).
• Cliquer sur l'onglet "Réseau" dans la boite à outils (appuyer sur F12 pour ouvrir la boite à outils).

Le moniteur réseau va alors apparaître au bas de la fenêtre du navigateur. Rechargez la page pour voir les requêtes :

Le moniteur enregistre les requêtes dès le moment où la boite à outils est ouverte, même si l'onglet réseau n'est pas sélectionné. Cela signifie que vous pouvez commencer le débogage d'une page dans la Console puis passer à l'onglet réseau sans avoir à recharger la page.

Vue d'ensemble de l'interface utilisateur

L'UI est divisé en quatre grandes catégories :

• L'écran principal, qui contient: la barre d'outils, la liste des requêtes, ainsi que le panneau des détails de la requête :

• L'analyse de performances qui est un écran séparé :

Barre d'outils

Depuis Firefox 47, la barre d'outils est en haut de la fenêtre principale. Dans les versions précédentes, elle est en bas.

Cette barre fournit :

• Une icône pour vider la liste des requêtes
• Un tableau d'icônes pour filtrer les requêtes par type :
  • Par type de contenu de la réponse
  • Par requêtes XHR
  • (nouveau dans Firefox 48) les upgrades WebSocket (icone "WS")
• une icône pour lancer l'analyse de performances
• Un résumé des requêtes de cette page, avec leur nombre, leur taille totale et leur durée totale.
• Une boite permettant de filtrer les requêtes par URL et par propriétés
• Une icône pour afficher/cacher le panneau des détails des requêtes.

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

Depuis Firefox 55, 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).  Dans le menu contextuel ainsi invoqué, en plus des colonnes à afficher/cacher on retrouve une option " Réinitialiser les colonnes". 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 au contour gris pour les réponses récupérées dans le cache du navigateur (à partir de Firefox 40)
• 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ées. Cette colonne est une nouveauté de Firefox 55 et n'est pas affichée par défaut.
• Scheme: Le "scheme" (https/http/ftp/...) du chemin demandé. Cette colonne est une nouveauté de Firefox 55 et n'est pas affichée par défaut.
• 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. Cette colonne est une nouveauté de Firefox 55 et n'est pas affichée par défaut.
• Source: La cause de la requête, par exemple un  une requête XHR, un <img>, un script, etc. Il s'agit d'une des nouveautés de Firefox 49.
• Type: Le Content-type de la réponse.
• Cookies: Le nombre de "cookies de requêtes" associés à la requête. Cette colonne est une nouveauté de Firefox 55 et n'est pas affichée par défaut.
• Set-Cookies: Le nombre de "cookies de réponse" associés à la requête. Cette colonne est une nouveauté de Firefox 55 et n'est pas affichée par défaut.
• Type : le Content-type de la réponse.
• 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. Depuis Firefox 47, 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 raté (un certificat invalide par exemple)
	HTTP
	Localhost

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.

Lorsqu’une requête a été initiée via JavaScript, une petite icône JS est affichée. Survoler cette icône affiche une popup contenant la trace de la pile afin de fournir des indices sur le pourquoi de la requête.

Il est alors possible de cliquer sur une des lignes pour ouvrir la script en question dans l'outil Débogueur.

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.

A partir de Firefox 45, 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".

Depuis Firefox 45,  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.

Menu contextuel

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 que HAR (à partir de Firefox 41)
• Tout enregistrer en tant que 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 :

Tout copier/enregistrer en tant que 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.

Détails des requêtes réseau

Cliquer sur une ligne affiche un nouveau panneau sur le côté droit du moniteur réseau, qui affiche plus d'informations détaillées sur la requête.

Les onglets en haut du panneau vous permettent de passer entre cinq différentes pages :

• En-têtes
• Cookies
• Paramètres
• Réponse
• Délais
• Sécurité (seulement pour les pages sécurisées)
• Trace de la pile (seulement lorsque la requête a une trace de la pile (un script appelé dans un script).) Disponible depuis Firefox 55

Cliquer sur l'icône à gauche des onglets vous permet de fermer le panneau et retourner à la liste.

En-têtes

Cet onglet liste des informations essentielles de la requête :

Cela inclut :

• L'URL de la requête.
• La méthode de la requête.
• L'adresse IP distante et son port (e de Firefox 39).
• Le code d'état, avec un point d'intérogation redirigeant vers la documentation MDN (si disponible)
• La requête HTTP et les en-têtes de la réponse qui ont été envoyés.
• Un bouton pour éditer et renvoyer la requête
• Un bouton pour afficher les en-tête brut, et les en-tête de réponse

Il est possible de filtrer les en-têtes qui sont affichés :

Depuis Firefox 54, une icône en forme de point d'interrogation est présente à côté de chaque en-tête (sur la même ligne que le code d'état). Ce lien pointe vers la documentation des en-têtes HTTP pour en savoir plus.

Cookies

Cet onglet énumère tous les détails de chaque cookie avec la requête ou la réponse :

Comme avec les en-têtes, vous pouvez filtrer la liste des cookies affichés.

Paramètres

Cet onglet affiche les paramètres de GET et les données POST de chaque requête :

Réponse

Le contenu complet de la réponse. Si la réponse est du HTML, du JS ou du CSS, elle sera affichée comme texte :

Si la réponse est du JSON, elle sera affichée comme objet inspectable :

Si la réponse est une image, l'onglet affiche un aperçu :

Pré-visualisation HTML

Depuis Firefox 59, si la réponse est du HTML, une prévisualisation du HTML rendu apparaitra dans l'onglet Réponse, au-dessus du texte de la réponse.

Délais

L'onglet affiche la séparation entre chaque étape définie dans la spécification de l'Archive HTTP : 

Il présente également la chronologie de la requête de façon plus détaillée et annotée :

Sécurité

Si le site est chargé via HTTPS, l'onglet "Sécurité" apparait. Il contient les détails sur la connexion sécurisée. Cela inclut le protocole, le chiffrage, et les détails du certificat :

L'onglet sécurité affiche un avertissement sur les faiblesses de sécurité. Actuellement il avertit de deux faiblesses :

1. Utiliser SSLv3 au lieu de TLS
2. Utiliser le chiffrage RC4

Trace de la pile

Depuis Firefox 55, la trace de la pile est affichée dans son propre onglet, surprenamment nommé "Trace de la pile". Bien entendu, cela n'est valable que pour les réponses qui possèdent une trace de pile.

Aperçu

(Supprimé dans Firefox 55)

Si le type de fichier est HTML, un onglet "Aperçu" apparait. Celui-ci affiche un rendu HTML simple :

Interrompre/Reprendre l'enregistrement des requêtes réseau

Depuis Firefox 58, le Moniteur Réseau possède un bouton pour interrompre/reprendre l'enregistrement du trafic réseau d'une page. C'est pratique par exemple, pour avoir une vue de la page stable pour un instant T pendant le débug (et ainsi éviter d'avoir quarante milles requêtes qui noient le poisson).

Le bouton est situé en haut à gauche de la barre d'outils principale du Moniteur. Il ressemble à un bouton pause typique : .

Voir image :

Une fois pressé, le bouton se transforme en une icône "Lecture", afin de reprendre l'enregistrement.

Analyse des performances

Le Moniteur Réseau inclut un outil d'analyse de performances, pour vous aider à comprendre combien de temps le navigateur met pour télécharger les différentes parties de votre site.

Pour lancer l'outil d'analyse de performances, cliquez sur l'icône chronomètre en bas de la barre d'outils du Moniteur :

(notez que si vous venez d'ouvrir le Moniteur Réseau, sans avoir lancé d'analyse, le chronomètre sera dans la fenêtre principale)

Le Moniteur Réseau charge alors le site deux fois : une avec un cache vide et une avec une mise en cache. Il simule ainsi la première visite du site et les visites suivantes. Il affiche les résultats pour chaque test côte à côte ou verticalement, suivant la place disponible :

Les résultats de chaque test sont résumés dans un tableau et un diagramme à secteurs. Le tableau rassemble les ressources par type et affiche la taille de chaque ressource ainsi que le temps total pour la charger. Le diagramme "camembert" l'accompagnant affiche la taille relative de chaque ressource.

Pour revenir à la liste de requêtes, cliquer sur le bouton "Retour" à gauche.

Cliquer sur un secteur du diagramme affiche le Moniteur Réseau pour cette page, mais avec un filtre seulement pour ce type de ressource.