1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
|
---
title: Outils de développement Firefox
slug: Tools
tags:
- Développement Web
- Développement Web:Outils
- Firefox
- Guide
- Outils
translation_of: Tools
original_slug: Outils
---
<div>{{ToolsSidebar}}</div>
<p class="summary">Examinez, modifiez et déboguez du HTML, des CSS et du JavaScript sur ordinateur ou sur mobile.</p>
<p>Si vous cherchez des informations sur l'utilisation des outils de développement disponibles dans Firefox, vous êtes au bon endroit.</p>
<p>Cette page fournit des liens vers des informations détaillées sur tous les outils principaux et additionnels de Firefox. Ainsi que d'autres liens vers par exemple : comment connecter et déboguer Firefox pour Android, comment étendre les outils de développement, et comment déboguer le navigateur lui-même.</p>
<p>Nous vous encourageons à explorer les liens de la barre latérale, et ceux dans la page, pour en apprendre plus sur les outils de développement. Si vous avez des retours ou des problèmes sur ces outils, vous pouvez nous envoyer des messages sur notre mailing-list ou notre canal IRC (Voir les <a href="/fr/docs/Tools#Join_the_Developer_tools_community">liens communauté, vers la fin de la page</a>). Si vous avez des questions ou des retours spécifiquement sur la documentation, <a href="https://discourse.mozilla.org/c/mdn">MDN discourse</a> est l'endroit parfait.</p>
<div class="note">
<p><strong>Note</strong>: Si vous débutez dans le développement web et/ou l'utilisation des outils de développement, la page <a href="/fr/docs/Learn">apprendre le développement web</a> peut vous aider. Vous pouvez également consulter <a href="/fr/docs/Learn/Getting_started_with_the_web">Commencer avec le web</a> et <a href="/fr/docs/Learn/Common_questions/What_are_browser_developer_tools">Découvrir les outils de développement des navigateurs</a>.</p>
</div>
<h2 id="Outils_principaux"><a id="The_Core_Tools" name="The_Core_Tools">Outils principaux</a></h2>
<p>Les outils de développement peuvent être ouverts avec <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>I</kbd> ou <kbd>F12</kbd> sous Windows et Linux, et <kbd>Cmd</kbd> + <kbd>Opt</kbd> + <kbd>I</kbd> sous macOS.</p>
<p>La partie droite de la barre d'outils contient plusieurs boutons qui permettent d'effectuer des actions, ou de changer certaines options des outils.</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/16087/DevTools_LayoutMenu.png" style="height: 290px; width: 225px;"></p>
<table class="standard-table" style="height: 178px; width: 840px;">
<tbody>
<tr>
<td><img alt="" src="https://mdn.mozillademos.org/files/16092/iframe_button.png" style="height: 69px; width: 69px;"></td>
<td>Ce bouton apparait lorsqu'il y a plusieurs iframe dans la page. Cliquer dessus affiche la liste des iframes sur la page actuelle, et permet de sélectionner celle ciblée par les outils.</td>
</tr>
<tr>
<td><img alt="" src="https://mdn.mozillademos.org/files/16088/camera_button.png" style="height: 69px; width: 69px;"></td>
<td>Ce bouton permet de prendre une capture d'écran de la page. (<strong>Note:</strong> Cette fonctionnalité n'est pas activée par défaut, et doit être activée dans les paramètres avant).</td>
</tr>
<tr>
<td><img alt="" src="https://mdn.mozillademos.org/files/16089/responsive_button.png" style="height: 69px; width: 69px;"></td>
<td>Active le mode Vue Adaptative.</td>
</tr>
<tr>
<td><img alt="" src="https://mdn.mozillademos.org/files/16090/menu_button.png" style="height: 69px; width: 69px;"></td>
<td>Ouvre le menu qui inclut les options d'ancrage, la possibilités d'activer la console scindée, et d'afficher les options des outils de développement. Ce menu inclut également des liens vers la documentation des outils de développement de Firefox et vers la communauté Mozilla.</td>
</tr>
<tr>
<td><img alt="" src="https://mdn.mozillademos.org/files/16091/close_button.png" style="height: 69px; width: 69px;"></td>
<td>Ferme les outils de développement.</td>
</tr>
</tbody>
</table>
<div class="column-container">
<div class="column-half">
<h3 id="Inspecteur">Inspecteur</h3>
<p><a href="/fr/docs/Tools/Page_Inspector"><img alt="The all-new Inspector panel in Firefox 57." src="https://mdn.mozillademos.org/files/16371/landingPage_PageInspector.png" style="border: 1px solid black; display: block; height: 171px; margin-left: auto; margin-right: auto; width: 425px;"></a></p>
<p>Permet de voir et modifier une page en HTML et en CSS. Permet de visualiser différents aspects de la page y compris les animations, l'agencement de la grille.</p>
</div>
<div class="column-half">
<h3 id="Console_Web">Console Web</h3>
<p><a href="/fr/docs/Tools/Web_Console"><img alt="The all-new Console in Firefox 57." src="https://mdn.mozillademos.org/files/16368/landingPage_Console.png" style="border: 1px solid black; display: block; height: 403px; margin-left: auto; margin-right: auto; width: 425px;"></a></p>
<p>Affiche les messages émis par la page web. Permet également d'interagir avec la page via JavaScript.</p>
</div>
</div>
<hr>
<div class="column-container">
<div class="column-half">
<h3 id="Débogueur_JavaScript">Débogueur JavaScript</h3>
<p><a href="/fr/docs/Tools/Debugger"><img alt="The all-new Firefox 57 Debugger.html" src="https://mdn.mozillademos.org/files/16369/landingPage_Debugger.png" style="border: 1px solid black; display: block; height: 403px; margin-left: auto; margin-right: auto; width: 425px;"></a></p>
<p>Permet de parcourir, stopper, examiner et modifier le code JavaScript s’exécutant dans une page</p>
</div>
<div class="column-half">
<h3 id="Réseau">Réseau</h3>
<p><a href="/fr/docs/Tools/Network_Monitor"><img alt="The Network panel in Firefox 57 DevTools." src="https://mdn.mozillademos.org/files/16370/landingPage_Network.png" style="border: 1px solid black; display: block; height: 403px; margin-left: auto; margin-right: auto; width: 425px;"></a></p>
<p>Permet d'inspecter les requêtes réseau lors du chargement de la page.</p>
</div>
</div>
<hr>
<div class="column-container">
<div class="column-half">
<h3 id="Performances">Performances</h3>
<p><a href="/fr/docs/Tools/Performance"><img alt="Performance Tools in Firefox 57 Developer Tools" src="https://mdn.mozillademos.org/files/16372/landingPage_Performance.png" style="border: 1px solid black; display: block; height: 403px; margin-left: auto; margin-right: auto; width: 425px;"></a></p>
<p>Permet d'analyser les performances de la réactivité globale, du JavaScript et, de l'agencement des sites.</p>
</div>
<div class="column-half">
<h3 id="Vue_Adaptative">Vue Adaptative</h3>
<p><a href="/fr/docs/Tools/Responsive_Design_Mode"><img alt="Responsive Design mode in Firefox 57." src="https://mdn.mozillademos.org/files/16373/landingPage_ResponsiveDesign.png" style="border-style: solid; border-width: 1px; display: block; height: 865px; margin-left: auto; margin-right: auto; width: 425px;"></a></p>
<p>Permet de voir comment un site web ou une application se comporte avec différents types d'appareils et de connexions.</p>
</div>
</div>
<div class="column-container">
<div class="column-half">
<h3 id="Inspecteur_d'Accessibilité">Inspecteur d'Accessibilité</h3>
<p><a href="/fr/docs/Tools/Accessibility_inspector"><img alt="Performance Tools in Firefox 57 Developer Tools" src="https://mdn.mozillademos.org/files/16367/landingPage_Accessibility.png" style="border-style: solid; border-width: 1px; border: 1px solid black; display: block; height: 403px; margin-left: auto; margin-right: auto; width: 425px;"></a></p>
<p>Permet d’examiner l’arborescence d’accessibilité de la page courante, qui est utilisée par les lecteurs d’écran et d’autres technologies d’assistance, afin de pouvoir savoir ce qui manque ou ce qui peut être amélioré.</p>
</div>
<div class="column-half"></div>
</div>
<div class="note">
<p><strong>Note</strong>: Le terme utilisé pour designer l'interface qui contient tout les outils de dévelopement est: <a href="/fr/docs/Tools/Tools_Toolbox">La boîte à outils</a>.</p>
</div>
<h2 id="Outils_supplémentaires"><a id="More_Tools" name="More_Tools">Outils supplémentaires</a></h2>
<p>Ces outils sont également inclus dans Firefox. Mais, contrairement aux « Outils principaux », il est possible qu'ils soient utilisés moins régulièrement.</p>
<div class="twocolumns">
<dl>
<dt><a href="/fr/docs/Tools/Memory">Mémoire</a></dt>
<dd>Déterminer quels objets prennent de la place en mémoire.</dd>
<dt><a href="/fr/docs/Tools/Storage_Inspector">Inspecteur de Stockage</a></dt>
<dd>Inspecter les cookies, le stockage local, l'indexedDB, et le stockage de session présent dans une page.</dd>
<dt><a href="/fr/docs/Tools/DOM_Property_Viewer">DOM Property Viewer</a></dt>
<dd>Inspecter les propriétés DOM d'une page (fonctions, etc.)</dd>
<dt><a href="/fr/docs/Tools/Eyedropper">Pipette</a></dt>
<dd>Sélectionner une couleur de la page.</dd>
<dt><a href="/fr/docs/Tools/Scratchpad">Ardoise JavaScript</a></dt>
<dd>Un éditeur de texte intégré à Firefox qui permet d'écrire et d'exécuter du JavaScript..</dd>
<dt><a href="/fr/docs/Outils/Style_Editor">Éditeur de Styles</a></dt>
<dd>Voir et modifier les styles CSS de la page affichée.</dd>
<dt><a href="/fr/docs/Outils/Shader_Editor">Éditeur de Shaders</a></dt>
<dd>Voir et éditer les <em>vertex shaders</em> et les <em>fragment shaders</em> utilisés par <a href="/fr/docs/WebGL">WebGL</a>.</dd>
<dt><a href="/fr/docs/Outils/Web_Audio_Editor">Éditeur Web Audio</a></dt>
<dd>Examiner les nœuds audio dans un contexte audio, et modifier leurs paramètres.</dd>
<dt><a href="/fr/docs/Tools/Screenshot_tool">Capture d'écran</a></dt>
<dd>Prendre une capture d'écran de la page entière ou d'un seul élément</dd>
<dt><a href="https://developer.mozilla.org/fr/docs/Tools/Measure_a_portion_of_the_page">Mesurer une portion de la page</a></dt>
<dd>Mesurer une zone spécifique de la page web</dd>
<dt><a href="https://developer.mozilla.org/fr/docs/Tools/Rulers">Règles</a></dt>
<dd>Afficher des règles verticales et horizontales sur une page web</dd>
</dl>
</div>
<hr>
<div class="column-container">
<div class="column-third">
<p><img alt="" src="https://mdn.mozillademos.org/files/15588/logo-developer-quantum.png" style="display: block; margin: 0px auto;"></p>
<p style="text-align: center;">Pour avoir la dernière version des outils de développement, il y a : Firefox Developer Edition</p>
<p><a href="https://www.mozilla.org/fr/firefox/developer/" style="width: 280px; display: block; margin-left: auto; margin-right: auto; padding: 10px; text-align: center; border-radius: 4px; background-color: #81BC2E; white-space: nowrap; color: white; text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.25); box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.2), 0px -1px 0px 0px rgba(0, 0, 0, 0.3) inset;">Télécharger Firefox Developer Edition</a></p>
</div>
</div>
<h2 id="Connecter_les_outils_de_développement"><a id="Connecting_the_Developer_Tools" name="Connecting_the_Developer_Tools">Connecter les outils de développement</a></h2>
<p>Si vous ouvrez les outils de développent avec des <a href="https://developer.mozilla.org/en-US/docs/Tools/Keyboard_shortcuts#Opening_and_closing_tools">raccourcis clavier</a> ou les éléments équivalents du menu, ils cibleront la page actuellement ouverte dans l'onglet actif. Il est cependant possible également d'attacher ces outils à diverses autres cibles, à la fois dans le navigateur ouvert et dans d'autres navigateurs et même dans d'autres appareils.</p>
<div class="twocolumns">
<dl>
<dt><a href="/fr/docs/Tools/about:debugging">about:debugging</a></dt>
<dd>Déboguer des modules complémentaires, des onglets de contenu et ceux qui travaillent dans l'explorateur.</dd>
<dt><a href="/fr/docs/Tools/Remote_Debugging/Debugging_Firefox_for_Android_over_Wifi">Se connecter à Firefox pour Android</a></dt>
<dd>Connecter les outils de développement à une instance de Firefox s'exécutant sur un appareil Android.</dd>
<dt><a href="/fr/docs/Tools/Working_with_iframes">Se connecter aux iframes</a></dt>
<dd>Connecter les outils de développement sur un iframe donné dans la page en cours.</dd>
<dt><a href="/fr/docs/Tools/Valence">Se connecter aux autres navigateurs</a></dt>
<dd>Connecter les outils de développement à Chrome pour Android et Safari pour IOS.</dd>
</dl>
</div>
<hr>
<h2 id="Déboguer_le_navigateur"><a id="Debugging_the_browser" name="Debugging_the_browser">Déboguer le navigateur</a></h2>
<p>Par défaut, les outils de développement sont attachés à une page ou une application Web. Il est cependant possible de les connecter au navigateur en lui même. C'est utile lors de développements portant sur le navigateur ou sur un module complémentaire.</p>
<div class="twocolumns">
<dl>
<dt><a href="/fr/docs/Tools/Browser_Console">Console du navigateur</a></dt>
<dd>Voir les messages issus du navigateur lui-même et des modules, et exécuter du code JavaScript dans le contexte du navigateur.</dd>
<dt><a href="/fr/docs/Outils/Browser_Toolbox">Boîte à outils du navigateur</a></dt>
<dd>Attacher les outils de développement au navigateur lui-même.</dd>
</dl>
</div>
<hr>
<h2 id="Étendre_les_outils_de_développement"><a id="Extending_the_devtools" name="Extending_the_devtools">Étendre les outils de développement</a></h2>
<p>Pour en savoir plus sur l'extension des outils de développement de Firefox, voir <a href="/fr/docs/Mozilla/Add-ons/WebExtensions/Extending_the_developer_tools">Extension des outils de développement</a> dans la section <a href="/fr/docs/Mozilla/Add-ons/WebExtensions">WebExtensions</a> de MDN.</p>
<h2 id="Migrer_de_Firebug"><a id="Migrating_from_Firebug" name="Migrating_from_Firebug">Migrer de Firebug</a></h2>
<p>Firebug est arrivé en fin de vie (voir <a href="https://hacks.mozilla.org/2016/12/firebug-lives-on-in-firefox-devtools/">Firebug, présent en esprit dans les outils de Firefox</a> sur le pourquoi du comment), et nous sommes conscients que certains peuvent avoir du mal à faire la transition. Pour faciliter celle-ci, nous avons écrit un guide pratique : <a href="/fr/docs/Tools/Migrating_from_Firebug">Migrer depuis Firebug</a>.</p>
<hr>
<h2 id="Contribuer"><a id="Contribute" name="Contribute">Contribuer</a></h2>
<p>Si vous voulez aider à améliorer les outils de développement, voici les ressources qui vous mettront le pied à l'étrier :</p>
<div class="twocolumns">
<dl>
<dt><a href="https://devtools-html.github.io/#getting-in-touch">S'impliquer</a></dt>
<dd>La page de documentation expliquant comment s'impliquer.</dd>
<dt><a href="http://firefox-dev.tools/">firefox-dev.tools</a></dt>
<dd>Un outil pour aider à trouver des bugs sur lesquels travailler.</dd>
</dl>
</div>
|
