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
|
---
title: Configuración
slug: Tools/Settings
translation_of: Tools/Settings
---
<h2 id="Configuraciones"><a name="Settings">Configuraciones</a></h2>
<p>Al hacer clic en el botón "Configuraciones" le permite acceder a la configuración de la propia caja de herramientas y de las herramientas que alberga:</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/6353/toolbox-settings.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
<h3 id="Por_defecto_Firefox_Herramientas_de_Desarrollo">Por defecto Firefox Herramientas de Desarrollo</h3>
<p>Este grupo de casillas de verificación determina qué herramientas están habilitadas en la caja de herramientas. Las nuevas herramientas se incluyen con frecuencia en Firefox, pero no está activado de forma predeterminada.</p>
<h3 id="Elija_DevTools_tema"><span class="short_text" id="result_box" lang="es">Elija DevTools tema</span></h3>
<p>Esto le permite cambiar entre tema claro u oscuro:</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/6355/inspector-light-theme.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
<h3 id="sect1"><img alt="" src="https://mdn.mozillademos.org/files/6357/inspector-dark-theme.png" style="display: block; margin-left: auto; margin-right: auto;"></h3>
<h3 id="Inspector">Inspector</h3>
<div class="geckoVersionNote">
<p>Este ajuste está disponible en Firefox 27 en adelante</p>
</div>
<p><em>Unidad de color por defecto</em>: un valor para controlar cómo se representan los colores de la inspección: Hex, HSL(A), RGB(A), <span class="short_text" id="result_box" lang="es">y por su nombre.</span></p>
<h3 id="Consola_Web">Consola Web</h3>
<p><em>Habilitar registros persistentes</em>: una configuración para controlar si la consola borra la salida cuando se navega a una página nueva..</p>
<h3 id="Analizador_JavaScript">Analizador JavaScript</h3>
<p><em>Mostrar datos de la plataforma Gecko:</em> una opción para controlar si los perfiles deben incluir Gecko símbolos de plataforma.</p>
<h3 id="Configuraciones_avanzadas">Configuraciones avanzadas</h3>
<ul>
<li><em>Desactivar JavaScript</em>: recargar la pestaña actual con JavaScript desactivado</li>
<li><em>Activar depurador chrome:</em> le permiten utilizar herramientas de desarrollo en el contexto del navegador en sí, y no sólo el contenido web</li>
<li><em>Activar depuración remota</em>: permitir a las herramientas de desarrollo <a href="/en-US/docs/Tools/Remote_Debugging">depurar instancias de Firefox remotas</a></li>
</ul>
<h2 id="Opening_Settings">Opening Settings</h2>
<p>To see the Developer Tools Settings pane, open any of the Developer Tools, and then:</p>
<ul>
<li>either click the "Settings" button (<img alt="" src="https://mdn.mozillademos.org/files/13158/settings-icon.png" style="display: inline-block; height: 25px; margin-bottom: -7px; width: 24px;">) in the Toolbox toolbar:<img alt="" src="https://mdn.mozillademos.org/files/13176/settings-show-icon.png" style="display: block; height: 632px; margin-left: auto; margin-right: auto; width: 890px;"></li>
<li>or press <kbd>F1</kbd> to toggle between the active tool and the Settings pane</li>
<li>or press <kbd>Ctrl/Cmd</kbd>+<kbd>Shift</kbd>+<kbd>O</kbd> to toggle between the active tool and the Settings pane</li>
</ul>
<p>The Settings pane looks something like this:</p>
<p><img alt="Depicts the Toolbox options" src="https://mdn.mozillademos.org/files/14703/devtool-settings-squashed.png" style=""></p>
<h2 id="Categories">Categories</h2>
<h3 id="Default_Firefox_Developer_Tools">Default Firefox Developer Tools</h3>
<p>This group of checkboxes determines which tools are enabled in the toolbox. New tools are often included in Firefox but not enabled by default.</p>
<h3 id="Available_Toolbox_Buttons">Available Toolbox Buttons</h3>
<p>This group of checkboxes determines which tools get <a href="https://developer.mozilla.org/en-US/docs/Tools/Tools_Toolbox#Extra_tools">an icon in the Toolbox's toolbar</a>.</p>
<p>Note that in Firefox 52 we removed the checkbox to toggle the <a href="/en-US/docs/Tools/Page_Inspector/UI_Tour#Select_element_button">"Select element" button</a>. The "Select element" button is now always shown.</p>
<h3 id="Themes">Themes</h3>
<p>This enables you to choose one of three different themes.</p>
<p>There's a light theme, which is the default:</p>
<p><img alt="Light theme for DevTools" src="https://mdn.mozillademos.org/files/13172/theme-light-shadowed.png" style="display: block; height: 317px; margin-left: auto; margin-right: auto; width: 890px;"></p>
<p>A dark theme (the default on <a href="/en-US/docs/Mozilla/Firefox/Developer_Edition">Firefox Developer Edition</a>):</p>
<p><img alt="Dark theme for DevTools" src="https://mdn.mozillademos.org/files/13168/theme-dark.png" style="display: block; height: 306px; margin-left: auto; margin-right: auto; width: 875px;"></p>
<p>There's also a Firebug theme that looks like the <a href="https://getfirebug.com/">Firebug extension</a>, letting you feel at home if you're used to Firebug:</p>
<p><img alt="Firebug theme for DevTools" src="https://mdn.mozillademos.org/files/13170/theme-firebug-shadowed.png" style="display: block; height: 318px; margin-left: auto; margin-right: auto; width: 890px;"></p>
<h3 id="Common_preferences">Common preferences</h3>
<p>Settings that apply to more than one tool. There's just one of these:</p>
<dl>
<dt><em>Enable persistent logs</em></dt>
<dd>A setting to control whether or not the Web Console and Network Monitor clear their output when you navigate to a new page.</dd>
</dl>
<h3 id="Inspector_2">Inspector</h3>
<dl>
<dt><em>Show browser styles</em></dt>
<dd>A setting to control whether styles applied by the browser (<a href="/en-US/docs/Web/CSS/Cascade">user-agent styles</a>) should be displayed in the Inspector's <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#Examine_CSS_rules">Rules view</a>. Note that this setting is independent of the "Browser styles" checkbox in the Inspector's <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#Examine_computed_CSS">Computed view</a>.</dd>
<dt><em>Truncate DOM attributes</em></dt>
<dd>By default, the Inspector truncates DOM attributes that are more than 120 characters long. Uncheck this box to prevent this behavior. This setting works by toggling the about:config preference "devtools.markup.collapseAttributes". To change the threshold at which attributes are truncated, you can edit the about:config preference "devtools.markup.collapseAttributeLength".</dd>
<dt><em>Default color unit</em></dt>
<dd>A setting to control how colors are represented in the inspector:
<ul>
<li>Hex</li>
<li>HSL(A)</li>
<li>RGB(A)</li>
<li>color name</li>
<li>As authored.</li>
</ul>
</dd>
<dt><em>Enable layout panel</em></dt>
<dd>Enable the experimental layout panel. This setting only exists in Firefox Nightly.</dd>
</dl>
<h3 id="Web_Console">Web Console</h3>
<dl>
<dt><em>Enable timestamps</em></dt>
<dd>Controls whether the Web Console displays timestamps. The Web Console defaults to hiding timestamps.</dd>
<dt><em>Enable new console frontend</em></dt>
<dd>Switch to the experimental new console. This setting only exists in Firefox Nightly.</dd>
</dl>
<h3 id="Debugger">Debugger</h3>
<dl>
<dt><em>Enable Source Maps</em></dt>
<dd>Enable <a href="/en-US/docs/Tools/Debugger/How_to/Use_a_source_map">source map support</a> in the debugger.</dd>
<dt><em>Enable new debugger frontend</em></dt>
<dd>Enable the new debugger. This setting only exists in Firefox Nightly.</dd>
</dl>
<h3 id="Style_Editor">Style Editor</h3>
<dl>
<dt><em>Show original sources</em></dt>
<dd>When a CSS preprocessor supporting source maps is used, this enables the Style Editor to display the original, preprocessor, sources rather than the generated CSS. <a href="/en-US/docs/Tools/Style_Editor#Source_map_support">Learn more about Style Editor support for CSS source maps</a>. With this setting checked, the <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#Link_to_CSS_file">Page Inspector Rules view will also provide links to the original sources</a>.</dd>
<dt><em>Autocomplete CSS</em></dt>
<dd>Enable the Style Editor to offer autocomplete suggestions.</dd>
</dl>
<h3 id="Screenshot_Behavior">Screenshot Behavior</h3>
<dl>
<dt><em>Screenshot to clipboard</em></dt>
<dd>When you click the icon for the <a href="/en-US/docs/Tools/Screenshot_tool">Screenshot tool</a>, copy the screenshot image to the clipboard (the image will still be saved to your Downloads directory). New in Firefox 53.</dd>
<dt><em>Play camera shutter sound</em></dt>
<dd>When you click the icon for the <a href="/en-US/docs/Tools/Screenshot_tool">Screenshot tool</a>, play a shutter sound. New in Firefox 53.</dd>
</dl>
<h3 id="Editor_Preferences">Editor Preferences</h3>
<p>Preferences for the <a href="http://codemirror.net/">CodeMirror</a> source editor, which is included in Firefox and used by several developer tools, including <a href="/en-US/docs/Tools/Scratchpad">Scratchpad</a> and the <a href="/en-US/docs/Tools/Style_Editor">Style Editor</a>.</p>
<dl>
<dt><em>Detect indentation</em></dt>
<dd>Auto-indent new lines based on the current indentation.</dd>
<dt><em>Autoclose brackets</em></dt>
<dt> </dt>
<dt><em>Indent using spaces</em></dt>
<dt> </dt>
<dt><em>Tab size</em></dt>
<dt> </dt>
<dt><em>Keybindings</em></dt>
<dd>Choose the default CodeMirror keybindings or keybindings from one of several popular editors:
<ul>
<li>Vim</li>
<li>Emacs</li>
<li>Sublime Text</li>
</ul>
</dd>
</dl>
<h3 id="Advanced_settings">Advanced settings</h3>
<dl>
<dt><em>Show Gecko platform data</em></dt>
<dd>A setting to control whether or not profiles should include Gecko platform symbols.</dd>
</dl>
<dl>
<dt><em>Disable HTTP Cache</em></dt>
<dd>Disable the browser HTTP cache to simulate first-load performance in all tabs that have the Toolbox open. This setting persists, meaning that if it is set, caching will be disabled whenever you reopen the devtools. Caching is re-enabled when the devtools are closed. Note that service workers are not affected by this option.
<div class="note">Note that this option was called "Disable Cache" in Firefox versions previous to 49, but it was renamed to make it clearer that this affects the HTTP cache, and not <a href="/en-US/docs/Web/API/Service_Worker_API">Service Workers</a>/the <a href="/en-US/docs/Web/API/Cache">Cache API</a>.</div>
</dd>
<dt><em>Disable JavaScript</em></dt>
<dd>Reload the current tab with JavaScript disabled.</dd>
<dt><em>Enable Service Workers over HTTP</em></dt>
<dd>Enable Service Worker registrations from insecure websites.</dd>
<dt><em>Enable browser chrome and add-on debugging toolboxes</em></dt>
<dd>Enable you to use developer tools in the context of the browser itself, and not only web content.</dd>
<dt><em>Enable remote debugging</em></dt>
<dd>Enable the developer tools to <a href="/en-US/docs/Tools/Remote_Debugging">debug remote Firefox instances</a>.</dd>
<dt><em>Enable worker debugging</em></dt>
<dd>Enable a panel within the debugger to debug workers.
<p class="note">Note: This option got removed from the UI in Firefox 56, because this version ships with a <a href="/en-US/docs/Tools/Debugger">new Debugger UI</a>, but it can still be enabled for the old UI by setting the preference <code>devtools.debugger.workers</code> to <code>true</code>.</p>
</dd>
</dl>
|
