diff options
Diffstat (limited to 'files/fr/tools/network_monitor')
| -rw-r--r-- | files/fr/tools/network_monitor/index.html | 64 | ||||
| -rw-r--r-- | files/fr/tools/network_monitor/performance_analysis/index.html | 43 | ||||
| -rw-r--r-- | files/fr/tools/network_monitor/recording/index.html | 32 | ||||
| -rw-r--r-- | files/fr/tools/network_monitor/request_details/index.html | 184 | ||||
| -rw-r--r-- | files/fr/tools/network_monitor/request_list/index.html | 377 | ||||
| -rw-r--r-- | files/fr/tools/network_monitor/throttling/index.html | 101 | ||||
| -rw-r--r-- | files/fr/tools/network_monitor/toolbar/index.html | 61 |
7 files changed, 862 insertions, 0 deletions
diff --git a/files/fr/tools/network_monitor/index.html b/files/fr/tools/network_monitor/index.html new file mode 100644 index 0000000000..9506bbdbe8 --- /dev/null +++ b/files/fr/tools/network_monitor/index.html @@ -0,0 +1,64 @@ +--- +title: Moniteur Réseau +slug: Outils/Moniteur_réseau +tags: + - Debugging + - Dev Tools + - Firefox + - Guide + - Networking + - Tools +translation_of: Tools/Network_Monitor +--- +<div>{{ToolsSidebar}}</div> + +<p>Le moniteur réseau affiche toutes les requêtes effectuées par Firefox (par exemple, au chargement d'une page ou lors de <a href="/fr/docs/Web/API/XMLHttpRequest">XMLHttpRequests</a>). Le temps que prend chaque requête ainsi que ses détails seront également affichés.</p> + +<h2 id="Ouvrir_le_Moniteur_Réseau">Ouvrir le Moniteur Réseau</h2> + +<p>Il existe plusieurs façons d'ouvrir le Moniteur :</p> + +<ul> + <li>Utiliser le raccourci clavier <kbd>Ctrl</kbd> + <kbd>Maj</kbd> + <kbd>E</kbd> ( <kbd>Command</kbd> + <kbd>Option</kbd> + <kbd>E</kbd> sur Mac).</li> + <li>Sélectionner "Réseau" dans le menu développement ( qui est un sous-menu du menu "Outils" sur MAC OS X et Linux).</li> + <li>Cliquer sur l'onglet "Réseau" dans la boite à outils (appuyer sur F12 pour ouvrir la boite à outils).</li> +</ul> + +<p>Le moniteur réseau va alors apparaître au bas de la fenêtre du navigateur. Lors de l'ouverture, le moniteur est vide et ressemble à ceci:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16854/network_monitor_new.png" style="border: 1px solid black; display: block; margin: 0 auto;"></p> + +<p>Recharger la page ou cliquer su le bouton, activera l'analyse de l'activité réseau. Une fois que l'outil est actif, il ressemblera à ceci:</p> + +<p><img alt="Ouvrir Le Moniteur Réseau" src="https://mdn.mozillademos.org/files/16245/network_monitor.png" style="border: 1px solid black; display: block; height: 541px; margin: 0px auto; width: 800px;" title=""></p> + +<p>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.</p> + +<h2 id="Vue_d'ensemble_de_l'interface_utilisateur">Vue d'ensemble de l'interface utilisateur</h2> + +<p>L'UI est divisé en quatre grandes catégories :</p> + +<ul> + <li>L'écran principal, qui contient: la <a href="/fr/docs/Tools/Network_Monitor#Toolbar">barre d'outils</a>, la <a href="/fr/docs/Tools/Network_Monitor#Network_request_list">liste des requêtes</a>, ainsi que <a href="/fr/docs/Tools/Network_Monitor#Network_request_details">le panneau des détails de la requête </a>:</li> +</ul> + +<p><img alt="Écran_Principal_Du_Moniteur_Réseau" src="https://mdn.mozillademos.org/files/16246/Network_Monitor_Closeup.png" style="border: 1px solid black; display: block; height: 747px; margin: 0px auto; width: 800px;" title=""></p> + +<ul> + <li><a href="/fr/docs/Tools/Network_Monitor#Performance_analysis">L'analyse de performances </a>qui est un écran séparé :</li> +</ul> + +<p><img alt="Écran analyse de performace" src="https://mdn.mozillademos.org/files/16276/network_performance.png" style="border: 1px solid black; display: block; height: 1176px; margin-left: auto; margin-right: auto; width: 1382px;" title=""></p> + +<h2 id="Utiliser_le_moniteur_Réseau">Utiliser le moniteur Réseau</h2> + +<p>Les articles suivants décrivent différents aspects de l'utilisation du Moniteur Réseau :</p> + +<ul> + <li><a href="/fr/docs/Tools/Network_Monitor/Toolbar">Barres 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="https://developer.mozilla.org/en-US/docs/Tools/Network_Monitor/request_details">Détail des requêtes réseau</a></li> + <li><a href="/fr/docs/Tools/Network_Monitor/recording">Enregistrement du trafic réseau</a></li> + <li><a href="/fr/docs/Tools/Network_Monitor/Performance_Analysis">Analyse des performances réseau</a></li> + <li><a href="/fr/docs/Tools/Network_Monitor/Throttling">Limitation de la bande passante</a></li> +</ul> diff --git a/files/fr/tools/network_monitor/performance_analysis/index.html b/files/fr/tools/network_monitor/performance_analysis/index.html new file mode 100644 index 0000000000..731bce1671 --- /dev/null +++ b/files/fr/tools/network_monitor/performance_analysis/index.html @@ -0,0 +1,43 @@ +--- +title: Analyse de performance réseau +slug: Outils/Moniteur_réseau/Performance_Analysis +tags: + - Debugging + - Dev Tools + - Firefox + - Guide + - Networking + - Tools +translation_of: Tools/Network_Monitor/Performance_Analysis +--- +<p>{{ToolsSidebar}}</p> + +<p>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.</p> + +<h2 id="Analyse_des_performances">Analyse des performances</h2> + +<p>Pour lancer l'outil d'analyse de performances, cliquez sur l'icône chronomètre en bas de la barre d'outils du Moniteur :</p> + +<p>(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)</p> + +<p>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 :</p> + +<p><img alt="capture décran de performances réseau" src="https://mdn.mozillademos.org/files/16277/network_performance.png" style="border: 1px solid black; display: block; height: 1176px; margin-left: auto; margin-right: auto; width: 900px;"></p> + +<p>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.</p> + +<p>Pour revenir à la liste de requêtes, cliquer sur le bouton "Retour" à gauche.</p> + +<p>Cliquer sur un secteur du diagramme affiche le Moniteur Réseau pour cette page, mais avec un filtre seulement pour ce <a href="/fr/docs/Tools/Network_Monitor#Filtering_by_content_type">type de ressource</a></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> diff --git a/files/fr/tools/network_monitor/recording/index.html b/files/fr/tools/network_monitor/recording/index.html new file mode 100644 index 0000000000..1aff22be9a --- /dev/null +++ b/files/fr/tools/network_monitor/recording/index.html @@ -0,0 +1,32 @@ +--- +title: Enregistrement des journaux réseau +slug: Outils/Moniteur_réseau/recording +translation_of: Tools/Network_Monitor/recording +--- +<p>{{ToolsSidebar}}</p> + +<p>Il est possible d’interrompre et de reprendre l'enregistrement des requêtes réseau grâce au bouton pause.</p> + +<h2 id="InterrompreReprendre_l'enregistrement_des_requêtes_réseau">Interrompre/Reprendre l'enregistrement des requêtes réseau</h2> + +<p>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).</p> + +<p>Le bouton est situé en haut à gauche de la barre d'outils principale du Moniteur. Il ressemble à un bouton pause typique : <img alt="" src="https://mdn.mozillademos.org/files/15625/pause-icon.png" style="height: 23px; width: 34px;">.</p> + +<p>Voir image :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15624/play-pause-network-traffic.png" style="border-style: solid; border-width: 1px; display: block; height: 305px; margin: 0px auto; width: 930px;"></p> + +<p>Une fois pressé, le bouton se transforme en une icône "Lecture", afin de reprendre l'enregistrement.</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> diff --git a/files/fr/tools/network_monitor/request_details/index.html b/files/fr/tools/network_monitor/request_details/index.html new file mode 100644 index 0000000000..f63ae19e4c --- /dev/null +++ b/files/fr/tools/network_monitor/request_details/index.html @@ -0,0 +1,184 @@ +--- +title: Détails des requêtes réseau +slug: Outils/Moniteur_réseau/request_details +translation_of: Tools/Network_Monitor/request_details +--- +<p>{{ToolsSidebar}}</p> + +<p>Le panneau du détail des requêtes réseau apparait après la sélection d'une requête dans la liste. Ce panneau fournit des informations détaillées sur la requête.</p> + +<h2 id="Détails_des_requêtes_réseau">Détails des requêtes réseau</h2> + +<p>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 :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16261/network_request_details.png" style="display: block; height: 741px; margin-left: auto; margin-right: auto; width: 930px;"></p> + +<p>Les onglets en haut du panneau vous permettent de passer entre cinq différentes pages :</p> + +<ul> + <li><strong>En-têtes</strong></li> + <li><strong>Messages (seulement pour les éléments de WebSocket)</strong></li> + <li><strong>Cookies</strong></li> + <li><strong>Paramètres</strong></li> + <li><strong>Réponse</strong></li> + <li><strong>Délais</strong></li> + <li><strong>Sécurité </strong>(seulement pour les pages sécurisées)</li> + <li><strong>Trace de la pile</strong> (seulement lorsque la requête a une trace de la pile, c'est-à-dire un script appelé dans un script).</li> +</ul> + +<p>Cliquer sur l'icône à gauche des onglets vous permet de fermer le panneau et retourner à la liste.</p> + +<h3 id="En-têtes">En-têtes</h3> + +<p>Cet onglet liste des informations essentielles de la requête :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16262/Network_Monitor_Closeup.png" style="border: 1px solid black; display: block; height: 747px; margin-left: auto; margin-right: auto; width: 900px;"></p> + +<p>Cela inclut :</p> + +<ul> + <li>L'URL de la requête.</li> + <li>La méthode de la requête.</li> + <li>L'adresse IP distante et son port <em>(e de Firefox 39).</em></li> + <li>Le code d'état, avec un point d'interrogation redirigeant vers la documentation MDN (si disponible)</li> + <li>La requête HTTP et les en-têtes de la réponse qui ont été envoyés.</li> + <li>Un bouton pour <a href="/fr/docs/Tools/Network_Monitor/request_list/#Edit_and_Resend">éditer et renvoyer </a>la requête</li> + <li>Un bouton pour afficher les en-têtes bruts, et les en-têtes de réponse</li> +</ul> + +<p>Il est possible de filtrer les en-têtes qui sont affichés :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16266/network_headers.png" style="border: 1px solid black; display: block; height: 295px; margin-left: auto; margin-right: auto; width: 900px;"></p> + +<p><span style="color: #000000;">Une icône en forme de point d'interrogation</span> 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 <a href="/fr/docs/Web/HTTP/Headers">documentation des en-têtes HTTP</a> pour en savoir plus.</p> + +<h3 id="Cookies">Cookies</h3> + +<p>Cet onglet énumère tous les détails de chaque cookie avec la requête ou la réponse :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16265/network_cookies.png" style="border: 1px solid black; display: block; height: 748px; margin-left: auto; margin-right: auto; width: 2276px;"></p> + +<p>Comme avec les en-têtes, vous pouvez filtrer la liste des cookies affichés. La liste complète des attibuts de cookie est affichée (voir la capture ci dessous pour un exemple).</p> + +<p><img alt="cookies panel in firefox devtools network monitor, showing a number of cookie attributes including samesite" src="https://mdn.mozillademos.org/files/16108/highlight-samesite-attribute.png" style="display: block; height: 394px; margin: 0px auto; width: 1047px;"></p> + +<p>L'attribut <code>samesite</code> est affiché depuis Firefox 62 ({{bug("1452715")}}).</p> + +<h3 id="Paramètres">Paramètres</h3> + +<p>Cet onglet affiche les paramètres de GET et les données POST de chaque requête :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16333/params.png" style="display: block; height: 215px; margin-left: auto; margin-right: auto; width: 900px;"></p> + +<h3 id="Réponse">Réponse</h3> + +<p>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 :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16268/network_response.png" style="border: 1px solid black; display: block; height: 747px; margin-left: auto; margin-right: auto; width: 900px;"></p> + +<p>Si la réponse est du JSON, elle sera affichée comme objet inspectable :</p> + +<p>Si la réponse est une image, l'onglet affiche un aperçu :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16331/response_pane_image.png" style="display: block; height: 347px; margin-left: auto; margin-right: auto; width: 900px;"></p> + +<h4 id="Cache">Cache</h4> + +<p>Si la réponse est mise en cache (c.-à-d. un 304), l'onglet cache affichera tous les détails sur la ressource mise en cache.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16329/response_cache.png" style="border: 1px solid black; display: block; height: 245px; margin: 0px auto; width: 567px;"></p> + +<p>Parmis ces détails on trouve :</p> + +<ul> + <li>Dernière consultation : La data à laquelle la ressource a été consultée.</li> + <li>Nombre de consultations : Le nombre de fois dans la session où la ressource a été consultée.</li> + <li>Taille des données : La taille de la ressource.</li> + <li>Dernière modification : La data à laquelle la ressource a été modifiée.</li> + <li>Expire le : La date a laquelle la ressource expire.</li> + <li>Appareil : L'appareil depuis lequel la ressource a été consultée (ex: "disque").</li> +</ul> + +<h4 id="Pré-visualisation_HTML">Pré-visualisation HTML</h4> + +<p>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.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16272/settings_for_browser_debugger.png" style="border-style: solid; border-width: 1px; border: 1px solid black; display: block; height: 744px; margin: 0px auto; width: 900px;"></p> + +<h3 id="Délais">Délais</h3> + +<p>L'onglet affiche la séparation entre chaque étape définie dans la spécification de l'<a href="https://dvcs.w3.org/hg/webperf/raw-file/tip/specs/HAR/Overview.html">Archive HTTP</a> : </p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Nom</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td>Bloqué</td> + <td> + <p>Temps passé dans la file d'attente de la connexion réseau</p> + + <p>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 <code><a href="http://kb.mozillazine.org/Network.http.max-persistent-connections-per-server">network.http.max-persistent-connections-per-server</a></code>. 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.</p> + </td> + </tr> + <tr> + <td>Résolution DNS</td> + <td>Temps pris pour résoudre le nom d'un hôte</td> + </tr> + <tr> + <td>Connexion</td> + <td>Temps pris pour créer une connexion TCP</td> + </tr> + <tr> + <td>Envoi</td> + <td>Temps pris pour envoyer la requête HTTP au serveur</td> + </tr> + <tr> + <td>Attente</td> + <td>Temps d'attente du serveur</td> + </tr> + <tr> + <td>Réception</td> + <td>Temps pris pour recevoir la réponse entière depuis le serveur (ou le cache)</td> + </tr> + </tbody> +</table> + +<p>Il présente également la chronologie de la requête de façon plus détaillée et annotée :</p> + + + +<p><img alt="" src="https://mdn.mozillademos.org/files/16271/network_timings.png" style="border: 1px solid black; display: block; height: 749px; margin-left: auto; margin-right: auto; width: 900px;"></p> + + + +<h3 id="Sécurité">Sécurité</h3> + +<p>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 :</p> + + + +<p><img alt="" src="https://mdn.mozillademos.org/files/16269/network_security.png" style="border: 1px solid black; display: block; height: 748px; margin-left: auto; margin-right: auto; width: 2276px;"></p> + + + +<p>L'onglet sécurité affiche un avertissement sur les faiblesses de sécurité. Actuellement il avertit de deux faiblesses :</p> + +<ol> + <li>Utiliser SSLv3 au lieu de TLS</li> + <li>Utiliser le chiffrage RC4</li> +</ol> + +<p><img alt="" src="https://mdn.mozillademos.org/files/10165/security-warning.png" style="display: block; height: 93px; margin-left: auto; margin-right: auto; width: 591px;"></p> + +<h3 id="Trace_de_la_pile">Trace de la pile</h3> + +<p><span style="color: #000000;">La trace de la pile est affichée dans son propre onglet, <span class="dico_title_2">surprenamment</span> nommé "Trace de la pile". Bien entendu, cela n'est valable que pour les réponses qui possèdent une trace de pile.</span></p> + + + +<p><img alt="" src="https://mdn.mozillademos.org/files/16270/network_stack_trace.png" style="border: 1px solid black; display: block; height: 205px; margin: 0px auto; width: 900px;"></p> diff --git a/files/fr/tools/network_monitor/request_list/index.html b/files/fr/tools/network_monitor/request_list/index.html new file mode 100644 index 0000000000..7b461f7ff2 --- /dev/null +++ b/files/fr/tools/network_monitor/request_list/index.html @@ -0,0 +1,377 @@ +--- +title: Liste des requêtes réseau +slug: Outils/Moniteur_réseau/request_list +translation_of: Tools/Network_Monitor/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 :</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> diff --git a/files/fr/tools/network_monitor/throttling/index.html b/files/fr/tools/network_monitor/throttling/index.html new file mode 100644 index 0000000000..0e538857c9 --- /dev/null +++ b/files/fr/tools/network_monitor/throttling/index.html @@ -0,0 +1,101 @@ +--- +title: Limitation de bande passante +slug: Outils/Moniteur_réseau/Throttling +translation_of: Tools/Network_Monitor/Throttling +--- +<p>{{ToolsSidebar}}</p> + +<p>Le moniteur réseau permet de limiter la bande passante réseau afin de simuler divers types de connexion.</p> + +<h2 id="Limitation_de_la_bande_passante">Limitation de la bande passante</h2> + +<p>La barre d'outils inclut une liste déroulante pour limiter la bande passante. Cela permet d'émuler la vitesse de différents réseaux. Il suffit alors de sélectionner une option dans un menu, et elle persistera à travers les rechargements de la page.</p> + + + +<p><img alt="" src="https://mdn.mozillademos.org/files/16260/throttling.png" style="border: 1px solid black; display: block; height: 177px; margin: 0px auto; width: 150px;"></p> + + + +<p>Les caractéristiques émulées sont :</p> + +<ul> + <li>Vitesse de téléchargement</li> + <li>Vitesse de téléversement (upload)</li> + <li>Latence minimum</li> +</ul> + +<p>Le tableau ci-dessous liste les paramètres associés à chaque type de réseau. Cependant, il n'est pas recommandé de se baser sur ces données pour des mesures exactes de performance. Elles ne sont là que pour donner une idée aproximative de l'experience utilisateur dans ces conditions. Les vitesses sont exprimées en multiples de bits par seconde.</p> + +<table class="fullwidth-table standard-table"> + <thead> + <tr> + <th scope="col">Selection</th> + <th scope="col">Download speed</th> + <th scope="col">Upload speed</th> + <th scope="col">Minimum latency (ms)</th> + </tr> + </thead> + <tbody> + <tr> + <td>GPRS</td> + <td>50 Kpbs</td> + <td>20 Kpbs</td> + <td>500</td> + </tr> + <tr> + <td>Regular 2G</td> + <td>250 Kpbs</td> + <td>50 Kpbs</td> + <td>300</td> + </tr> + <tr> + <td>Good 2G</td> + <td>450 Kpbs</td> + <td>150 Kpbs</td> + <td>150</td> + </tr> + <tr> + <td>Regular 3G</td> + <td>750 Kpbs</td> + <td>250 Kpbs</td> + <td>100</td> + </tr> + <tr> + <td>Good 3G</td> + <td>1.5 Mbps</td> + <td>750 Kpbs</td> + <td>40</td> + </tr> + <tr> + <td>Regular 4G/LTE</td> + <td>4 Mbps</td> + <td>3 Mbps</td> + <td>20</td> + </tr> + <tr> + <td>DSL</td> + <td>2 Mbps</td> + <td>1 Mbps</td> + <td>5</td> + </tr> + <tr> + <td>Wi-Fi</td> + <td>30 Mbps</td> + <td>15 Mbps</td> + <td>2</td> + </tr> + </tbody> +</table> + +<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> diff --git a/files/fr/tools/network_monitor/toolbar/index.html b/files/fr/tools/network_monitor/toolbar/index.html new file mode 100644 index 0000000000..da70faa365 --- /dev/null +++ b/files/fr/tools/network_monitor/toolbar/index.html @@ -0,0 +1,61 @@ +--- +title: Barres d'outils du Moniteur Réseau +slug: Outils/Moniteur_réseau/toolbar +tags: + - '110n:priority' + - Debugging + - Dev Tools + - Firefox + - Guide + - Networking + - Tools +translation_of: Tools/Network_Monitor/toolbar +--- +<p>{{ToolsSidebar}}</p> + +<p>Le moniteur Réseau fournit deux barres d'outils, l'une en haut de la fenêtre, l'autre en dessous.</p> + +<h2 id="Barre_d'outils">Barre d'outils</h2> + +<p>La première barre se trouve en haut de la fenêtre principale :</p> + +<p><img alt="première barre doutils" src="https://mdn.mozillademos.org/files/16247/network_toolbar.png" style="display: block; height: 98px; margin-left: auto; margin-right: auto; width: 1200px;"></p> + +<p>Cette barre fournit :</p> + +<ul> + <li>Une icône pour vider la <a href="/fr/docs/Outils/Moniteur_réseau/request_list">liste des requêtes</a></li> + <li>A box enabling you to <a href="/fr/docs/Outils/Moniteur_réseau/request_list#Filtering_requests">filter requests</a> by URL and by properties.</li> + <li>Un tableau d'icônes pour filtrer les requêtes par type : + <ul> + <li>Par type de contenu de la réponse</li> + <li>Par requêtes XHR</li> + <li>Par upgrade WebSocket (icone "WS")</li> + </ul> + </li> + <li>Une case à cocher pour "conserver les journaux" (n'effacera pas le contenu lors d'un changement de page ou d'un rafraichissement).</li> + <li>Une case à cocher pour désactiver le cache.</li> + <li>Une liste déroulante, fournissant plusieurs options pour limiter la bande passante</li> + <li>Un menu d'options HAR</li> +</ul> + +<p><img alt="deuxième barre doutils" src="https://mdn.mozillademos.org/files/16248/network_monitor_bottom_toolbar.png" style="border: 1px solid black; height: 48px; width: 2010px;"></p> + +<p>La deuxième barre d'outils se trouve en bas de la fenêtre :</p> + +<ul> + <li>Une icône pour lancer <a href="/fr/docs/Outils/Moniteur_réseau/Performance_Analysis">l'analyse de performances</a></li> + <li>Un résumé des requêtes de cette page, avec leur nombre, leur taille totale et leur durée totale.</li> +</ul> + +<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> |