MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

Outils de développement

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 + Q ( Command +  Option + Q 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 :

Performance analysis view

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 :

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 :

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 :

Icone 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

Nouveau dans Firefox 48

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

Nouveau dans Firefox 55

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 qui ont 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 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.

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 que HAR

Nouveau dans Firefox 41.

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) (supprimé dans 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 lien 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

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

Nouveau dans Firefox 54

Un lien [En savoir plus] est présent à côté de chaque en-tête. Ce lien pointe vers la documentation des en-têtes HTTP.

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 : 

Nom Description
Bloqué

Temps passé dans la file d'attente de la connexion réseau

Le navigateur impose une limite sur le nombre de connexions simultanées qui peuvent être faites à un seul serveur. Dans Firefox, le nombre par défaut est 6. Mais il peut être changé en modifiant la préférence  network.http.max-persistent-connections-per-server. Si toutes les connexions sont en cours d'utilisation, le navigateur ne peut plus charger de ressources jusqu'a ce qu'une connexion de libère.
Résolution DNS Temps pris pour résoudre le nom d'un hôte
Connexion Temps pris pour créer une connexion TCP
Envoi Temps pris pour envoyer la requête HTTP au serveur
Attente Temps d'attente du serveur
Réception Temps pris pour recevoir la réponse entière depuis le serveur (ou le cache)

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

 

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 :

 

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.

Étiquettes et contributeurs liés au document

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