path: root/files/fr/tools/network_monitor/request_list/index.html

---
title: Liste des requêtes réseau
slug: Tools/Network_Monitor/request_list
translation_of: Tools/Network_Monitor/request_list
original_slug: Outils/Moniteur_réseau/request_list
---
<p>{{ToolsSidebar}}</p>

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

<h2 id="Liste_des_requêtes_réseau">Liste des requêtes réseau</h2>

<p>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 :<img alt="" src="https://mdn.mozillademos.org/files/16258/Network_request_list.png" style="border: 1px solid black; display: block; height: 328px; margin: 0px auto; width: 900px;">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 <a href="/fr/docs/Tools_Toolbox#Common_preferences">paramètres</a> des outils de développement.</p>

<h3 id="Champs_des_requêtes_réseau">Champs des requêtes réseau</h3>

<p>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 "<strong>Réinitialiser les colonnes</strong>" est également disponible. Voici une liste de toutes les colonnes disponibles:</p>

<p>Il est également possible d'ajuster la largeur des colonnes pour faciliter la lecture. L'option "<strong>Réinitialiser les colonnes</strong>" réinitialise aussi la largeur des colonnes.</p>

<p>{{EmbedYouTube("5fbuDO2s9Pk")}}</p>

<p>Cliquer sur un en-tête de colonne trie la liste par rapport à cette colonne. "<strong>Réinitialiser les colonnes</strong>" remet le tri par défaut.</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/16627/network_monitor_header_right_click.png" style="display: block; margin: 0 auto;"></p>

<p>Voici une liste des colonnes disponibles:</p>

<ul>
 <li><strong>État </strong>: 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.

  <ul>
   <li><img alt="" src="https://mdn.mozillademos.org/files/13136/1x.png" style="height: 17px; width: 17px;">un cercle bleu pour les codes d'information (1XX codes). Cela inclut notamment le code 101 (Changement de protocole) pour les upgrades <a href="/fr/docs/Web/API/WebSocket">WebSocket</a>.</li>
   <li><img alt="" src="https://mdn.mozillademos.org/files/10941/200.png" style="height: 17px; width: 17px;"> un cercle vert pour le succès (codes 2XX),</li>
   <li><img alt="" src="https://mdn.mozillademos.org/files/10945/300.png" style="height: 17px; width: 17px;"> un triangle orange pour la redirection (3XX)</li>
   <li><img alt="" src="https://mdn.mozillademos.org/files/10943/4-500.png" style="height: 17px; width: 17px;"> un carré rouge pour les erreurs (4XX et 5XX).</li>
   <li><img alt="" src="https://mdn.mozillademos.org/files/10947/cached.png" style="height: 17px; width: 17px;"> un cercle gris pour les réponses récupérées dans le cache du navigateur</li>
  </ul>
 </li>
 <li><strong>Méthode </strong>: la méthode de la requête HTTP.</li>
 <li><strong>Fichier </strong>: nom du fichier requis.</li>
 <li><strong>Protocole:</strong> Le protocole réseau utilisé pour transférer les donnée.</li>
 <li><strong>Scheme:</strong> Le "scheme" (https/http/ftp/...) du chemin demandé.</li>
 <li><strong>Domaine </strong>: le domaine du chemin requis.
  <ul>
   <li><strong></strong>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 <a href="/fr/docs/Tools/Network_Monitor#Security">l'onglet Sécurité</a>.</li>
   <li>Survolez le domaine pour voir l'adresse IP.</li>
   <li>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 <a href="/fr/docs/Tools/Network_Monitor#Security_icons">icônes de sécurité</a>.</li>
  </ul>
 </li>
 <li><strong>IP distante</strong>: l'adresse IP du serveur répondant à la requête.</li>
 <li><strong>Source</strong>: La cause de la requête, par exemple un une requête XHR, un {{htmlelement("img")}}, un script, etc.</li>
 <li><strong>Type</strong>: Le <code>Content-type</code> de la réponse.</li>
 <li><strong>Cookies:</strong> Le nombre de "cookies de requêtes" associés à la requête.</li>
 <li><strong>Set-Cookies:</strong> Le nombre de "cookies de réponse" associés à la requête.</li>
 <li><strong>Transfert</strong> : Le nombre d'octets qui ont réellement été transférés pour charger la ressource. Cela sera plus petit que "<strong>Taille</strong>" si la ressource a été compressée. Si la ressource a été chargée depuis le cache d'un <a href="/fr/docs/Web/API/Service_Worker_API">service worker</a>, alors la case affiche "service worker"</li>
 <li><strong>Taille </strong>: la taille de la ressource transférée.</li>
</ul>

<p>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.</p>

<h4 id="Miniature_dimage">Miniature d'image</h4>

<p>Si le fichier est une image, survoler son nom de fichier affichera un aperçu de l'image :</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/16257/image_preview.png" style="border: 1px solid black; display: block; height: 334px; margin: 0px auto; width: 900px;"></p>

<h4 id="Icônes_sécurité">Icônes sécurité</h4>

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

<p><img alt="" src="https://mdn.mozillademos.org/files/16194/network_message_list_63.png" style="border: 1px solid black; display: block; height: 191px; margin: 0 auto; width: 845px;"></p>

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

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Icône</th>
   <th scope="col">Signification</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td><img alt="" src="https://mdn.mozillademos.org/files/11655/https.svg" style="height: 16px; width: 16px;"></td>
   <td>HTTPS</td>
  </tr>
  <tr>
   <td><img alt="" src="https://mdn.mozillademos.org/files/11653/https-weak.svg" style="height: 16px; width: 16px;"></td>
   <td>HTTPS faible (un encodage faible par exemple )</td>
  </tr>
  <tr>
   <td><img alt="" src="https://mdn.mozillademos.org/files/11649/https-failed.svg" style="height: 16px; width: 16px;"></td>
   <td>HTTPS invalide (un certificat invalide par exemple)</td>
  </tr>
  <tr>
   <td><img alt="" src="https://mdn.mozillademos.org/files/11651/http.svg" style="height: 16px; width: 16px;"></td>
   <td>HTTP</td>
  </tr>
  <tr>
   <td><img alt="" src="https://mdn.mozillademos.org/files/11657/localhost.svg" style="height: 16px; width: 16px;"></td>
   <td>Localhost</td>
  </tr>
  <tr>
   <td><img alt="" src="https://mdn.mozillademos.org/files/16192/tracker_icon.png" style="height: 16px; width: 16px;"></td>
   <td>Indique que l'URL appartient à un traqueur connu qui serait bloqué si le blocage de contenu était activé.</td>
  </tr>
 </tbody>
</table>

<p>Pour chaque requête HTTPS faible ou ratée, il est possible de voir des détails du problème dans <a href="/fr/docs/Tools/Network_Monitor#Security">l'onglet Sécurité</a>.</p>

<h4 id="Colonne_source">Colonne source</h4>

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

<ul>
 <li>document : le document HTML source.</li>
 <li>img: élément {{htmlelement("img")}}.</li>
 <li>imageset: élément {{htmlelement("img")}}.</li>
 <li>script: un fichier JavaScript.</li>
 <li>stylesheet: un fichier CSS.</li>
</ul>

<h3 id="Chronologie">Chronologie</h3>

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

<p><img alt="" src="https://mdn.mozillademos.org/files/16259/timeline.png" style="border: 1px solid black; display: block; height: 331px; margin: 0px auto; width: 900px;">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 <a href="/fr/docs/Tools/Network_Monitor#Timings">Délais</a> de cette page.</p>

<p>La chronologie contient également deux lignes verticales :</p>

<ul>
 <li>La ligne <span style="color: blue;">bleue</span> marque le point à partir duquel l'évènement <code><a href="/fr/docs/Web/Events/DOMContentLoaded">DOMContentLoaded</a></code> de la page est activé.</li>
 <li>La ligne <span style="color: red;">rouge</span> marque le point à partir duquel l'évènement<code><a href="/fr/docs/Web/Events/load"> load</a></code> de la page est activé</li>
</ul>

<h3 id="Filtrer_les_requêtes">Filtrer les requêtes</h3>

<p>Il est possible de filtrer le contenu des requêtes par type de contenu, par URL, par s'il s'agit de requêtes XMLHttpRequests ou WebSocket, ou par propriétés de requête.</p>

<h4 id="Bloquer_une_URL_spécifique">Bloquer une URL spécifique</h4>

<p>Pour voir comme une page s'en sort sans une ressource, il est possible de bloquer une URL spécifique depuis la liste de requêtes.</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/16701/beforeBlocking.png" style="border: 1px solid black; display: block; margin: 0 auto;"></p>

<ol>
 <li>Survoler la requête voulue.</li>
 <li>Sélectionner "Bloquer l'URL" dans le menu contextuel.</li>
 <li>Lors du rechargement de la page, l'URL en question sera bloquée et un message ajouté sur la ligne pour indiquer que la ressources a été bloqué par les outils de développement.</li>
</ol>

<p><img alt="" src="https://mdn.mozillademos.org/files/16700/afterBlocking.png" style="border: 1px solid black; display: block; height: 865px; margin: 0px auto; width: 1136px;"></p>

<p>Pour débloquer l'URL :</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/16702/unblockUrl.png" style="border: 1px solid black; display: block; margin: 0 auto;"></p>

<ol>
 <li>Survoler la requête voulue.</li>
 <li>Sélectionner "Débloquer l'URL" dans le menu contextuel</li>
 <li>Lors du rechargement de la page, l'URL en question sera à nouveau disponible.</li>
</ol>

<h4 id="Filtrer_par_type_de_contenu">Filtrer par type de contenu</h4>

<p>Pour filtrer par type de contenu, il faut utiliser les boutons de la <a href="/fr/docs/Tools/Network_Monitor#Toolbar">barre d'outils</a>.</p>

<h4 id="Filtrer_les_requêtes_XHR">Filtrer les requêtes XHR</h4>

<p>Pour ne voir que les les requêtes {{Glossary("XHR (XMLHttpRequest)", "XHR")}} , il faut utiliser le bouton "XHR" de la <a href="/fr/docs/Tools/Network_Monitor#Toolbar">barre d'outils</a></p>

<h4 id="Filtrer_les_WebSockets">Filtrer les WebSockets</h4>

<p>Pour ne voir que les connections WebSocket, il faut utiliser le bouton "WS" de la <a href="/fr/docs/Tools/Network_Monitor#Toolbar">barre d'outils</a></p>

<p>Le module complémentaire <a href="https://addons.mozilla.org/en-US/firefox/addon/websocketsniff">WebSocket Sniffer</a> peut également s'avérer utile.</p>

<h4 id="Filtrer_par_URL">Filtrer par URL</h4>

<p>Pour cela, il y a une barre de recherche dans la <a href="/fr/docs/Tools/Network_Monitor#Toolbar">barre d'outils</a>. Cliquez à l'intérieur, ou faites la combinaison de touches clavier  <kbd>Ctrl</kbd> + <kbd>F</kbd> (ou <kbd>Cmd</kbd> + <kbd>F</kbd> 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".</p>

<p>{{EmbedYouTube("HUcWOBBhLHg")}}</p>

<p>Il est possible de filtrer les requêtes qui ne contiennent<em> pas</em> 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 <em>pas </em>"google.fr" dans leur URL.</p>

<h4 id="Filtrer_par_propriétés">Filtrer par propriétés</h4>

<p>Pour filtrer par propriétés de requêtes, il faut utiliser la boite de recherche de la <a href="/fr/docs/Tools/Network_Monitor#Toolbar">barre d'outils</a>. 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.</p>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Mot-clé</th>
   <th scope="col">Signification</th>
   <th scope="col">Exemple(s)</th>
  </tr>
  <tr>
   <td><code>status-code</code></td>
   <td>Affiche les ressources avec un code de statut HTTP spécifique.</td>
   <td><code>status-code:304</code></td>
  </tr>
  <tr>
   <td><code>method</code></td>
   <td>Affiche les ressources qui ont été requises par un une méthode HTTP spécifique.</td>
   <td><code>method:post</code></td>
  </tr>
  <tr>
   <td><code>domain</code></td>
   <td>Affiche les ressources provenant d'un domaine spécifique.</td>
   <td><code>domain:mozilla.org</code></td>
  </tr>
  <tr>
   <td><code>remote-ip</code></td>
   <td>Affiche les ressources provenant d'un serveur à l'adress IP spécifique.</td>
   <td><code>remote-ip:63.245.215.53</code><br>
    <code>remote-ip:[2400:cb00:2048:1::6810:2802]</code></td>
  </tr>
  <tr>
   <td><code>cause</code></td>
   <td>Affiche les ressources qui correspondent à une cause spécifique. Ces types se trouvent dans la <a href="/fr/docs/Outils/Moniteur_r%C3%A9seau$edit#Cause_column">colonne source</a>.</td>
   <td><code>cause:js</code><br>
    <code>cause:stylesheet<br>
    cause:img</code></td>
  </tr>
  <tr>
   <td><code>transferred</code></td>
   <td>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. (<code>1k</code> vaut alors <code>1024)</code>.</td>
   <td><code>transferred:1k</code></td>
  </tr>
  <tr>
   <td><code>size</code></td>
   <td>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. (<code>1k</code> vaut alors <code>1024)</code></td>
   <td><code>size:2m</code></td>
  </tr>
  <tr>
   <td><code>larger-than</code></td>
   <td>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. (<code>1k</code> vaut alors <code>1024)</code></td>
   <td><code>larger-than:2000</code><br>
    <code>-larger-than:4k</code></td>
  </tr>
  <tr>
   <td><code>mime-type</code></td>
   <td>Affiche les ressources qui coresspondent au type MIME spécifié.</td>
   <td><code>mime-type:text/html</code><br>
    <code>mime-type:image/png</code><br>
    <code>mime-type:application/javascript</code></td>
  </tr>
  <tr>
   <td><code>is</code></td>
   <td><code>is:cached</code> et <code>is:from-cache</code> affichent uniquement les ressources venant du cache.<br>
    <code>is:running</code> affiche seulement les ressources en cours de transfert.</td>
   <td><code>is:cached</code><br>
    <code>-is:running</code></td>
  </tr>
  <tr>
   <td><code>scheme</code></td>
   <td>Affiche les ressources transfére par le "scheme" spécifié.</td>
   <td><code>scheme:http</code></td>
  </tr>
  <tr>
   <td><code>has-response-header</code></td>
   <td>Affiche les ressources qui contienent la "response header HTTP" spécifiée.</td>
   <td><code>has-response-header:cache-control</code><br>
    <code>has-response-header:X-Firefox-Spdy</code></td>
  </tr>
  <tr>
   <td><code>set-cookie-domain</code></td>
   <td>Affiche les ressources qui ont un header <code>Set-Cookie</code> avec un attribut <code>Domain</code> qui correspond à la valeur spécifiée.</td>
   <td><code>set-cookie-domain:.mozilla.org</code></td>
  </tr>
  <tr>
   <td><code>set-cookie-name</code></td>
   <td>Affiche les ressources qui ont un header <code>Set-Cookie</code> avec un nom qui correspond à la valeur spécifiée.</td>
   <td><code>set-cookie-name:_ga</code></td>
  </tr>
  <tr>
   <td><code>set-cookie-value</code></td>
   <td>Affiche les ressources qui ont un header <code>Set-Cookie</code> avec une valeur qui correspond à la valeur spécifiée.</td>
   <td><code>set-cookie-value:true</code></td>
  </tr>
  <tr>
   <td><code>regexp</code></td>
   <td>Affiche les ressources dont l'URL correspond l'{{Glossary("regular expression")}} spécifiée.</td>
   <td><code>regexp:\d{5}<br>
    regexp:mdn|mozilla</code></td>
  </tr>
 </thead>
</table>

<p>Pour trouver toutes les erreurs 404, il est possible de taper "404" et la recherche complétera automatiquement par "status-code:404" :</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/16677/404_filter.png" style="border: 1px solid black; display: block; margin: 0 auto;"></p>

<h3 id="Menu_contextuel">Menu contextuel</h3>

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

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

<h4 id="Modifier_et_renvoyer">Modifier et renvoyer</h4>

<p>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.</p>

<h4 id="Ouvrir_dans_un_nouvel_onglet">Ouvrir dans un nouvel onglet</h4>

<p style="margin-top: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; text-indent: 0px;"><span style="color: #000000;">Renvoie la nouvelle requête dans un nouvel onglet. Très utile pour déboguer des requêtes asynchrones.</span></p>

<h4 id="Copier_en_tant_que_commande_cURL">Copier en tant que commande cURL</h4>

<p>Cette option copie la requête réseau dans le presse-papier en tant que commande <a href="http://curl.haxx.se/">cURL</a>, de telle sorte que vous puissiez l'exécuter depuis une ligne de commande. La commande peut inclure les paramètres suivants :</p>

<table class="standard-table">
 <tbody>
  <tr>
   <td><code>-X [METHOD]</code></td>
   <td>Si la méthode n'est pas GET ou POST</td>
  </tr>
  <tr>
   <td><code>--data</code></td>
   <td>pour les paramètres de requêtes URL encodés</td>
  </tr>
  <tr>
   <td><code>--data-binary</code></td>
   <td>Pour les paramètres de requêtes multiparties</td>
  </tr>
  <tr>
   <td><code>--http/VERSION</code></td>
   <td>Si la version de HTTP n'est pas 1.1</td>
  </tr>
  <tr>
   <td><code>-I</code></td>
   <td>Si la méthode est HEAD</td>
  </tr>
  <tr>
   <td><code>-H</code></td>
   <td>
    <p>Un pour chaque en-tête de requête&nbsp;:</p>

    <p>Si l'en-tête  "Accept-Encoding" est présent, la commande cURL inclura <code>--compressed</code> à la place de <code>-H "Accept-Encoding: gzip, deflate"</code>. Cela signifie que la réponse sera automatiquement décompressée.</p>
   </td>
  </tr>
 </tbody>
</table>

<h4 id="Tout_copierenregistrer_en_tant_qu’HAR">Tout copier/enregistrer en tant qu’HAR</h4>

<p>Ces options crée une <a href="https://w3c.github.io/web-performance/specs/HAR/Overview.html">Archive HTTP</a> (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 :</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/16056/har-dropdown.png" style="border-style: solid; border-width: 1px; height: 262px; width: 723px;"></p>

<h2 id="Fonctionnalités_du_Moniteur_Réseau">Fonctionnalités du Moniteur Réseau</h2>

<p>Les articles suivants couvrent les différents aspects de l'utilisation du Moniteur Réseau :</p>

<ul>
 <li><a href="/fr/docs/Tools/Network_Monitor/Toolbar">Barre d'outils</a></li>
 <li><a href="/fr/docs/Tools/Network_Monitor/request_list">Liste des requêtes réseau</a></li>
 <li><a href="/fr/docs/Tools/Network_Monitor/request_details">Détails des requêtes réseau</a></li>
 <li><a href="/fr/docs/Tools/Network_Monitor/Performance_Analysis">Analyse de performances</a></li>
 <li><a href="/fr/docs/Tools/Network_Monitor/Throttling">Limitation de bande passante</a></li>
</ul>