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.

Ouvir le Moniteur Réseau

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

• Utiliser le raccourci clavier Ctrl +  Maj + Q ( Command +  Option + Q sur Mac).
• Sélectioner "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
• 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

Chaque ligne affiche :

• É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.
• 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 security icons.
• Source: La raison pour laquelle la requête a eu lieu. par exemple pour une requête XHR, cela peut-être <img>, script, script demandant une image, etc. Il s'agit d'une des nouveautés de Firefox 49.
• 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 réponse, après toutes les décompressions.

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 :

Icones 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 :

	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é.

Colone 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.

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 (Cmd sous mac) + 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".

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 tout les requêtes qui n'ont pas "google.fr" dans leur URL.

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)
• 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.

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)
• Aperçu (seulement si le type de contenu est du HTML)

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

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 :

Securitée

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

Aperçu

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

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.