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
|
---
title: Options
slug: Outils/Settings
translation_of: Tools/Settings
---
<div>{{ToolsSidebar}}</div>
<h2 id="Ouvrir_les_options">Ouvrir les options</h2>
<p>À partir de Firefox 62, l'icône pour afficher les options des outils de développement a été déplacé dans un menu accessible en cliquant sur les "..." tout à droite de la fenêtre :</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/16085/DevTools_LayoutMenu.png" style="height: 290px; width: 225px;"></p>
<p>Ce menu inclut les options d'emplacement des outils. Il est possible de les afficher en bas, à droite, à gauche, ou bien dans une fenêtre séparée.</p>
<p>Le menu inclut également l'option "Afficher la console scindée" qui permet d'ajouter la Console Web en bas de n'importe quel autre outil. Cela permet d'afficher une ou deux lignes de messages, et surtout de rendre disponible la ligne de commande.</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/16086/split_console.png" style="height: 352px; width: 902px;"></p>
<p>La dernière option, l'option "paramètres" affiche les autres options des outils de développement. Cela ressemble à ceci :</p>
<p><img alt="Depicts the Toolbox options" src="https://mdn.mozillademos.org/files/16081/dev_tools_settings.png"></p>
<h2 id="Catégories">Catégories</h2>
<h3 id="Outils_de_développement_par_défaut">Outils de développement par défaut</h3>
<p>Ce groupe de cases à cocher détermine quels outils sont activés dans la boit à outils. Les nouveaux outils sont souvent inclus dans Firefox, mais ne sont pas activés par défaut.</p>
<h3 id="Boutons_de_la_boite_à_outils">Boutons de la boite à outils</h3>
<p>Ce groupe de cases à cocher détermine quels outils possèdent <a href="/fr/docs/Tools/Tools_Toolbox#Extra_tools">une icône dans la barre d'outils</a>.</p>
<p>Depuis Firefox 62, si l'option "Sélectionner un iframe en tant que document cible" est activée, l'icône apparaitra dans la barre d'outils, et ce même si la page ne contient aucun iframe.</p>
<p>Il est à noter que depuis Firefox 52 l'option "<a href="/fr/docs/Tools/Page_Inspector/UI_Tour#Select_element_button">Sélectionner un élément"</a> a été supprimée. Le bouton "Sélectionner un élément" est maintenant toujours présent.</p>
<h3 id="Thèmes">Thèmes</h3>
<p>Cette option permet de choisir un des deux thèmes :</p>
<ul>
<li>
<p>Le thème "clair", par défaut :</p>
<p><img alt="Light theme for DevTools" src="https://mdn.mozillademos.org/files/16083/theme-light.png" style="border: 1px solid #cccccc; display: block; height: 430px; margin-left: auto; margin-right: auto; width: 1920px;"></p>
</li>
<li>
<p>Le thème "sombre" par défaut dans <a href="/fr/docs/Mozilla/Firefox/Developer_Edition">Firefox Developer Edition</a>):</p>
<p><img alt="Dark theme for DevTools" src="https://mdn.mozillademos.org/files/16084/theme-dark.png" style="border: 1px solid #cccccc; display: block; height: 430px; margin-left: auto; margin-right: auto; width: 1920px;"></p>
</li>
</ul>
<h3 id="Préférences_générales">Préférences générales</h3>
<p>Ce sont les options qui s'appliquent à plusieurs outils. Il n'y a qu'une seule option :</p>
<dl>
<dt><em>Activer les journaux persistants</em></dt>
<dd>Elle sert à contrôler si les outils Console et Réseau vident leur contenu lors d'un changement de page.</dd>
</dl>
<div class="note">
<p>Si les préférences générales ne sont pas incluses dans les options, les journaux persistants peuvent être activés en utilisant l'url 'about:config' du navigateur et passer la clé 'devtools.webconsole.persistlog' à <code>true</code></p>
</div>
<h3 id="Inspecteur">Inspecteur</h3>
<dl>
<dt><em>Afficher les styles du navigateur</em></dt>
<dd>Contrôle les styles appliqués par le navigateur (<a href="/fr/docs/Web/CSS/Cascade">user-agent styles</a>) doivent être affichées dans la <a href="/fr/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#Examine_CSS_rules">vue des Règles</a>. Il est à noter que cette option est indépendante de l'option "Styles navigateur" dans la <a href="/fr/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#Examine_computed_CSS">vue "Calculé"</a>.</dd>
<dt><em>Tronquer les attributs DOM</em></dt>
<dd>Par défaut, l'Inspecteur tronque les attributs DOM de plus de 120 caractères. Décocher cette case empêche ce comportement. Cette option fonctionne en activant/désactivant la préférence "devtools.markup.collapseAttributes dans la page about:config. Pour changer la limite de caractères, il est possible d'éditer la préférence "devtools.markup.collapseAttributeLength", toujours dans la page about:config.</dd>
<dt><em>Unité par défaut pour les couleurs</em></dt>
<dd>Cette option permet de contrôler l'unité des couleurs représentées dans l'Inspecteur. Les différentes valeurs sont :
<ul>
<li>Hex</li>
<li>HSL(A)</li>
<li>RGB(A)</li>
<li>noms de couleur</li>
<li>unité d'origine</li>
</ul>
</dd>
</dl>
<h3 id="Console_web">Console web</h3>
<dl>
<dt><em>Activer l'horodatage</em></dt>
<dd>Contrôle si la Console affiche les timestamp. Par défaut cette option n'est pas activée.</dd>
<dt><em>Enable new console frontend (l'option n'est pas traduite dans les outils de développement)</em></dt>
<dd>Active la nouvelle Console expérimentale. Cette option n'est disponible que dans Firefox Nightly</dd>
</dl>
<h3 id="Débogueur">Débogueur</h3>
<dl>
<dt><em>Afficher les sources originales</em></dt>
<dd>Activer le <a href="/fr/docs/Tools/Debugger/How_to/Use_a_source_map">support des source map</a> dans le Débogueur.</dd>
<dt><em>Enable new debugger frontend (l'option n'est pas traduite dans les outils de développement)</em></dt>
<dd>Active le nouveau Débogueur. Enable the new debugger. Cette option n'est disponible que dans Firefox Nightly</dd>
</dl>
<h3 id="Éditeur_de_style">Éditeur de style</h3>
<dl>
<dt><em>Afficher les sources originales</em></dt>
<dd>Lorsqu'un préprocesseur supportant les sources maps est utilisé, cette option permet à l'Éditeur de style d'afficher les sources originales du préprocesseur plutôt que le CSS généré. <a href="/fr/docs/Tools/Style_Editor#Source_map_support">Vous pouvez en apprendre plus sur le support des sources maps CSS ici.</a>. Lorsque cette option est activée la <a href="/fr/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#Link_to_CSS_file">vue des règles de l'Inspecteur affichera également un lien vers les sources originales</a>.</dd>
<dt><em>Compléter automatiquement le CSS</em></dt>
<dd>Autorise l'Éditeur de style à offrir des suggestions d'autocomplétion.</dd>
<dt>
<h3 id="Comportement_pour_les_captures_d'écran">Comportement pour les captures d'écran</h3>
</dt>
<dt><em>Enregistrer dans le presse-papiers</em></dt>
<dd>Copie l'image dans le presse papier lors d'un clic sur l'outil <a href="/fr/docs/Tools/Screenshot_tool">Capture d'écran</a> (l'image sera également enregistrée dans le dossier Téléchargement). Nouveau dans Firefox 53.</dd>
<dt><em>Jouer un son d'obturateur d'appareil photo</em></dt>
<dd>Lors d'un clic sur l'outil <a href="/fr/docs/Tools/Screenshot_tool">Capture d'écran</a>, un son sera joué. Nouveau dans Firefox 53.</dd>
</dl>
<h3 id="Préférences_de_l'éditeur">Préférences de l'éditeur</h3>
<p>Préférences de l'éditeur de code source <a href="http://codemirror.net/">CodeMirror</a>, qui est inclut dans Firefox et utilisé dans plusieurs outils de développement (incluant <a href="/fr/docs/Tools/Scratchpad">l'Ardoise JavaScript</a> et <a href="/fr/docs/Tools/Style_Editor">l'Éditeur de style</a>.</p>
<dl>
<dt><em>Détecter l'indentation</em></dt>
<dd>indenter automatiquement les nouvelles lignes en se basant sur l'indentation actuelle..</dd>
<dt><em>Fermer automatiquement les parenthèses et les accolades</em></dt>
<dd>Détermine si rentrer un caractère ouvrant comme <code>[</code> ou <code>{</code> causera l'éditeur à insérer automatiquement un caractère fermant comme <code>]</code> ou <code>}</code>.</dd>
<dt><em>Indenter à l'aide d'espaces</em></dt>
<dd>Si coché, l'indentation sera faite en utilisant des espaces, si désactivé, l'indentation sera faite en utilisant des tabulations.</dd>
<dt><em>Taille des tabulations</em></dt>
<dd>La taille des tabulations dans l'éditeur. Les options possibles sont 2, 4, ou 8.</dd>
<dt><em>Raccourcis clavier</em></dt>
<dd>Permet de choisir les raccourcis clavier par défaut de CodeMirror, il y a le choix entre :
<ul>
<li>Vim</li>
<li>Emacs</li>
<li>Sublime Text</li>
</ul>
</dd>
</dl>
<h3 id="Paramètres_avancés">Paramètres avancés</h3>
<dl>
<dt><em>Afficher les données de la plate-forme Gecko</em></dt>
<dd>Cette option sert à contrôler si les profils doivent inclure des symboles de la plateforme Gecko ou non.</dd>
</dl>
<dl>
<dt><em>Désactiver le cache HTTP</em></dt>
<dd>Désactive le cache HTTP pour simuler les performances du premier chargement. Cela s'applique à tout les onglets qui ont la boite à outils ouverte. Cette option est persistante, cela veut dire que si elle est activée, la mise en cache sera désactivée à chaque réouverture des outils de développement. La mise en cache est automatiquement réactivée lorsque les outils de développement sont fermés. Il est à noter que les service workers ne sont pas affectés par cette option.
<div class="note">Note : Cette option était appelée "Désactiver le cache" dans les versions antérieures à Firefox 49. Elle a été renommée afin de rendre plus explicite le fait que cette option n'affecte que le cache HTTP et pas les <a href="/fr/docs/Web/API/Service_Worker_API">Service Workers</a> ou le <a href="/fr/docs/Web/API/Cache">Cache API</a>.</div>
</dd>
<dt><em>Désactiver le JavaScript</em></dt>
<dd>Recharge la page actuelle avec le JavaScript désactivé.</dd>
<dt><em>Activer les Service Workers via HTTP</em></dt>
<dd>Autorise les enregistrements de Service Worker depuis des sites web non sécurisés.</dd>
<dt><em>Activer le débogage du chrome du navigateur et des modules</em></dt>
<dd>Permet d'utiliser les outils de développement dans le contexte du navigateur lui-même au lieu du contenu web uniquement.</dd>
<dt><em>Activer le débogage distant</em></dt>
<dd>Autorise le <a href="/fr/docs/Tools/Remote_Debugging">débogage des instances de Firefox distantes</a>.</dd>
<dt><em>Activer le débogage des workers</em></dt>
<dd>Active un panneau dans le Débogueur pour déboguer les workers.
<p class="note">Note: Cette option a été supprimée de l'interface utilisateur dans Firefox 56, car cette version contient une <a href="/fr/docs/Tools/Debugger">nouvelle interface utilisateur du Débogueur</a>, l'option peut toujours être activée pour l'ancienne interface en passant la préférence <code>devtools.debugger.workers</code> à <code>true</code> dans (about:config).</p>
</dd>
</dl>
|
