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
|
---
title: Boite à Outils
slug: Tools/Tools_Toolbox
tags:
- Toolbox
- Tools
translation_of: Tools/Tools_Toolbox
original_slug: Outils/Outils_boite_à_outils
---
<div>{{ToolsSidebar}}</div>
<p>La boîte à outils réunit la plupart des outils de développement intégrés à Firefox dans un seul endroit.</p>
<p>Vous pouvez l'ouvrir de plusieurs façons :</p>
<ul>
<li>Sélectionner "Outils de développement" dans le menu "Développement" (dans "Outils" pour OS X et Linux, ou dans "Firefox" sous Windows),</li>
<li>Cliquer sur l'icône en forme de clé à mollette (<img alt="" src="https://mdn.mozillademos.org/files/12710/wrench-icon.png" style="height: 21px; width: 21px;">), dans la barre d'outils principale ou dans le menu (<img alt="" src="https://mdn.mozillademos.org/files/12712/hamburger.png" style="height: 20px; width: 22px;">), puis sélectionner "Afficher les outils"</li>
<li>Activer l'un des outils, par exemple le débogueur JavaScript ou l'inspecteur web).</li>
<li>Utiliser le raccourci <kbd>Ctrl</kbd>+ <kbd>Maj</kbd>+ <kbd>I</kbd> sous Windows ou Linux, ou bien <kbd>Cmd</kbd>+ <kbd>Opt</kbd> +<kbd>i</kbd> pour OS X. Ou bien même utiliser la touche <kbd>F12</kbd>. Voir aussi les <a href="/fr/docs/Tools/Keyboard_shortcuts">raccourcis clavier</a>.</li>
</ul>
<p>Par défaut, la fenêtre apparait en bas de la fenêtre de navigation, mais il est possible de la détacher. Voici à quoi ressemble la fenêtre en mode attaché :</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/6923/toolbox.png" style="display: block; margin-left: auto; margin-right: auto;">Cette fenêtre est séparée en deux parties : la barre d'outils en haut et la partie principale en dessous :</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/6925/toolbox-annotated-29.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
<h2 id="Mode_d'ancrage">Mode d'ancrage</h2>
<p>Par défaut, la boîte à outils apparait ancrée en bas de la fenêtre du navigateur. Mais il est possible de l'ancrer sur la droite du navigateur, ou de la faire apparaitre dans sa propre fenêtre. Pour cela il faut utiliser les <a href="/fr/docs/Tools/Tools_Toolbox#Toolbox_controls">boutons de la barre d'outils</a>.</p>
<h2 id="Barre_d'outils">Barre d'outils</h2>
<p>La barre d'outils contient les boutons pour activer les outils, pour attacher, détacher ou fermer la boîte à outils.</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/7913/toolbox-toolbar-annotated.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
<h3 id="Le_sélecteur_d'élément">Le sélecteur d'élément</h3>
<p>Le bouton à gauche sert à activer le sélecteur. Il permet de sélectionner un élément de la page pour l'inspecter. Voir <a href="/fr/docs/Tools/Page_Inspector/How_to/Select_an_element" title="/fr/docs/Tools/Page_Inspector/How_to/Select_an_element">"Sélectionner un élément"</a>.</p>
<h3 id="Outils_de_la_boîte_à_outils">Outils de la boîte à outils</h3>
<p>Il y a ensuite plusieurs boutons vous permettant de naviguer entre les différents outils de la Boîte à outils. La barre peut contenir les boutons suivants :</p>
<ul>
<li><a href="/fr/docs/Tools/Web_Console" title="/fr/docs/Tools/Web_Console">Console Web</a></li>
<li><a href="/fr/docs/Tools/Debugger" title="/fr/docs/Tools/Debugger">Débogueur</a></li>
<li><a href="/fr/docs/Tools/Page_Inspector" title="/fr/docs/Tools/Page_Inspector">Inspecteur</a></li>
<li><a href="/fr/docs/Tools/Style_Editor" title="/fr/docs/Tools/Style_Editor">Éditeur de style </a></li>
<li><a href="/fr/docs/Tools/Profiler" title="/fr/docs/Tools/Profiler">Profileur</a></li>
<li><a href="/fr/docs/Tools/Network_Monitor" title="/fr/docs/Tools/Network_Monitor">Moniteur Réseau</a></li>
</ul>
<p>Il est à noter que tous les outils n'apparaitront pas forcément dans la barre : uniquement les outils disponibles sont visibles (par exemple : tous les outils ne prennent pas encore en charge le débogage à distance, donc si la cible du débogage n'est pas la fenêtre active, tous les outils ne seront pas disponibles).</p>
<h3 id="Outils_supplémentaires">Outils supplémentaires</h3>
<p>La barre de boutons à gauche de la barre d'outils peut être personnalisée dans les <a href="#Settings">options de développement</a>. Par défaut, elle inclut :</p>
<ul>
<li><a href="/fr/docs/Tools/Web_Console#The_split_console" title="/fr/docs/Tools/Web_Console#The_split_console">Console scindée</a></li>
<li><a href="/fr/docs/Tools/Responsive_Design_View">Vue adaptative</a></li>
<li><a href="/fr/docs/tools/Working_with_iframes">Sélectionner une iframe en tant que document cible </a>(présent par défaut uniquement depuis Firefox 41).</li>
</ul>
<p>Les outils suivants ne sont pas affichés par défaut mais peuvent être activés via les <a href="#Settings">options </a>:</p>
<ul>
<li><a href="/fr/docs/Tools/Paint_Flashing_Tool">Afficher en surbrillance les zones repeintes</a></li>
<li><a href="/fr/docs/Tools/3D_View">Vue 3D</a></li>
<li><a href="/fr/docs/Tools/Web_Console/The_command_line_interpreter#le_mode_%C3%A9diteur_multiligne">L'éditeur multiligne</a></li>
<li><a href="/fr/docs/Tools/Eyedropper">Sélectionner une couleur depuis la page</a></li>
<li>Prendre une capture d'écran de la page entière : Prend une capture d'écran de la page web et l'enregistre dans le dossier "Téléchargements".</li>
<li><a href="/fr/docs/Tools/Rulers">Afficher les règles pour la page</a></li>
<li>Mesurer une portion de la page : mesure une portion du site web en sélectionnant des éléments dans la page.</li>
</ul>
<h3 id="Contrôles_de_la_boîte_à_outils">Contrôles de la boîte à outils :</h3>
<p>Grâce à ces boutons il est possible de :</p>
<ul>
<li>Fermer la fenêtre.</li>
<li>Choisir entre le mode attaché sur le côté ou en dessous.</li>
<li>Choisir entre fenêtre indépendante ou attachée</li>
<li>Acceder aux <a href="#Settings" title="#Settings">options de développement</a></li>
</ul>
<h2 id="Options"><a name="Settings">Options</a></h2>
<p><a href="/fr/docs/Tools/Settings">Voir la page sur les options des outils de développement.</a></p>
<h2 id="Panneau_principal">Panneau principal</h2>
<p>Le contenu du panneau principal dans la fenêtre est entièrement contrôlé par, et est spécifique à l'outil actuellement sélectionné.</p>
<h2 id="Raccourcis_clavier">Raccourcis clavier</h2>
<p>{{ Page ("fr/docs/tools/Keyboard_shortcuts", "toolbox-shortcuts") }}</p>
<p>{{ Page ("fr/docs/tools/Keyboard_shortcuts", "all-toolbox-tools") }}</p>
|
