Moniteur Réseau

Le moniteur réseau affiche toutes les requêtes effectuées par Firefox (par exemple, au chargement d'une page ou avec XMLHttpRequests), le temps pris par ces requêtes et les détails les concernant. Pour ouvrir le moniteur, sélectionnez "Réseau" dans le menu "Développement web" (situé sous mac dans "Outils") ou ouvrez les outils développeurs et sélectionnez l'onglet "Réseau".

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

A partir de la version 40 de Firefox, le moniteur affiche les requêtes dès le moment où la barre d'outils est ouverte, même si l'onglet réseau lui-même n'est pas sélectionné.  Cela signifie que vous pouvez commencer le débuggage d'une page dans la console puis passer à l'onglet réseau sans avoir à recharger la page.

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

Chaque ligne affiche :

  • : 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 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.
  • Domaine : le domaine du chemin requis.
    • A partir de Firefox 38, 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é.
    • A partir de Firefox 40, survoler le domaine pour voir l'adresse IP.
  • Type : le Content-type de la réponse.
  • Transfert (nouveau dans  Firefox 38) : Le nombre d'octets qui ont réellement été transférés pour charger la ressource. Cela sera plus petite que "Taille" si la ressource a été compressée.
  • Taille : la taille de la réponse.

La barre supérieure donne l'intitulé des colonnes, et en cliquant sur ces intitulés on peut classer toutes les requêtes en fonction d'une colonne donnée.

À partir de Firefox 30, si le fichier est une image, la ligne inclut une miniature de l'image et passer dessus affichera un aperçu de l'image.

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 Analyse des performances de cette page.

Filtrage par type de contenu

Au bas de la fenêtre, une ligne de boutons vous permet de filtrer les requêtes par le contenu de la réponse :

Tout à droite de cette ligne, le bouton "Effacer" permet de supprimer la liste des requêtes réseau.

Filtrage par URL

Nouveau dans Firefox 40.

A la suite de la ligne de boutons indiquant les types de contenu se trouve un champ de recherche:

Cliquez à l'intérieur, ou faites la combinaison de touches clavier Ctrl ou Cmd + F, 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.

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 (à partir de Firefox 31)
  • Copier les En-tête de la requête (à partir de Firefox 40)
  • Copier les En-tête 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)
  • 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, URLs, paramètres, en-têtes et de renvoyer la requête.

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.

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

À partir de Firefox 30, un sixième onglet apparait seulement si le type de contenu est du HTML : il s'agit de l'onglet Aperçu.

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 basiques à propos 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 (nouveautée de Firefox 39).
  • Le code d'état
  • 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

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

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 affichera un aperçu :

Délais

L'onglet Délais présente de façon plus détaillée et annotée la chronologie de la requête, en affichant la séparation entre chaque étape :

Aperçu

Cette fonctionnalité a été ajoutée dans Firefox 30.

À partir de Firefox 30, un sixième onglet "Aperçu" présentera un rendu HTML simple :

Sécurité

Nouveau dans Firefox 37.

À partir de Firefox 37, si le site est servi via HTTPS, vous aurez un onglet supplémentaire nommé "Sécurité". Celui-ci contient les détails relatifs à la connexion sécurisée utilisée : le protocole, la suite chiffrement (cipher), et les détails du certificat :

Depuis Firefox 38, l'onglet "sécurité" affiche un avertissement pour les faiblesses de sécurité. Actuellement cela concerne deux faiblesses :

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

Analyse des performances

Cette fonctionnalité a été ajoutée dans Firefox 29.

À partir de Firefox 29, 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 peut charger 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 l'orientation du navigateur.

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.

Étiquettes et contributeurs liés au document

Contributeurs à cette page : Hell_Carlito, marie-ototoi, maximelore, teoli, J.DMB, riplay777, Omnilaika02, Goofy
Dernière mise à jour par : Hell_Carlito,