delete pages that were never translated from en-US (es, part 2) (#1550)

4 files changed, 0 insertions, 444 deletions

diff --git a/files/es/tools/3d_view/index.html b/files/es/tools/3d_view/index.html
deleted file mode 100644
index d394e5de81..0000000000
--- a/files/es/tools/3d_view/index.html
+++ /dev/null
@@ -1,82 +0,0 @@
----
-title: 3D view
-slug: Tools/3D_View
-translation_of: Tools/3D_View
----
-<p>Cuando das click sobre el botón ver 3D view, la página entra en modo de vista 3D; en este modo, usted puede ver su página en vista 3D en la cual se anidan bloques de HTML que van sobreponiendose, se proyecta desde la parte inferior de la página. Esta vista hace fácil de visualizar como se anida su contenido.</p>
-<p><img alt="" class="internal default" src="/files/3625/3dview.png"></p>
-<p>By clicking and dragging the view, you can rotate and re-orient the 3D presentation of the DOM hierarchy of your page to see it from different angles, to better examine its structure. Off-screen elements become visible, so that you can see where your elements are located in relation to the visible content. You can click on elements to see their HTML in the HTML panel or or <a href="/en/Tools/Page_Inspector/Style_panel" title="Style panel">Style panel</a>. Conversely, you can click on elements in the breadcrumb bar to change which element is selected in the 3D view.</p>
-<p>If you do not see the 3D button in the page inspector, it is possible that your graphics driver needs to be updated. See the <a class="link-https" href="https://wiki.mozilla.org/Blocklisting/Blocked_Graphics_Drivers" title="https://wiki.mozilla.org/Blocklisting/Blocked_Graphics_Drivers">blocklisted drivers page</a> for more information.</p>
-<h2 id="Controlling_the_3D_view">Controlling the 3D view</h2>
-<p>There are keyboard shortcuts and mouse controls available for the 3D view.</p>
-<table class="standard-table" style="width: auto;">
- <tbody>
-  <tr>
-   <td class="header">Function</td>
-   <td class="header">Keyboard</td>
-   <td class="header">Mouse</td>
-  </tr>
-  <tr>
-   <td>Zoom in/out</td>
-   <td>+ / -</td>
-   <td>Scroll wheel up/down</td>
-  </tr>
-  <tr>
-   <td>Rotate left/right</td>
-   <td>a / d</td>
-   <td>Mouse left/right</td>
-  </tr>
-  <tr>
-   <td>Rotate up/down</td>
-   <td>w / s</td>
-   <td>Mouse up/down</td>
-  </tr>
-  <tr>
-   <td>Pan left/right</td>
-   <td>← / →</td>
-   <td>Mouse left/right</td>
-  </tr>
-  <tr>
-   <td>Pan up/down</td>
-   <td>↑ / ↓</td>
-   <td>Mouse up/down</td>
-  </tr>
-  <tr>
-   <td>Reset zoom level</td>
-   <td>0</td>
-   <td>Resets the zoom level to the default</td>
-  </tr>
-  <tr>
-   <td>Focus on selected node</td>
-   <td>f</td>
-   <td>Makes sure the currently selected node is visible</td>
-  </tr>
-  <tr>
-   <td>Reset view</td>
-   <td>r</td>
-   <td>Resets zoom, rotation, and panning to the default</td>
-  </tr>
-  <tr>
-   <td>Hide current node</td>
-   <td>x</td>
-   <td>Makes the currently selected node invisible; this can be helpful if you need to get at a node that's obscured</td>
-  </tr>
- </tbody>
-</table>
-<h2 id="Use_cases_for_the_3D_view">Use cases for the 3D view</h2>
-<p>There are a variety of ways the 3D view is useful:</p>
-<ul>
- <li>If you have broken HTML causing layout problems, looking at the 3D view can help find where you've gone wrong. Often, layout problems are caused by improper nesting of content. This can become much more obvious when looking at the 3D view and seeing where your elements are nested wrong.</li>
- <li>If content isn't displaying, you may be able to figure out why; since the 3D view lets you zoom out to see elements that are rendering outside the visible area of the page, you can find stray content this way.</li>
- <li>You can get a look at how your page is structured to see if there may be ways to optimize your layout.</li>
- <li>And, of course, it looks <strong>awesome</strong>.</li>
-</ul>
-<h2 id="See_also">See also</h2>
-<ul>
- <li><a href="/en/Tools/Page_Inspector" title="Page Inspector">Page Inspector</a></li>
- <li><a href="/en/Tools/Page_Inspector/HTML_panel" title="HTML panel">HTML panel</a></li>
- <li><a href="/en/Tools/Page_Inspector/Style_panel" title="en/Tools/Page_Inspector/Style panel">Style panel</a></li>
- <li><a href="/en/Tools" title="Tools">Tools</a></li>
- <li><a class="external" href="http://hacks.mozilla.org/2011/12/new-developer-tools-in-firefox-11-aurora/" title="http://hacks.mozilla.org/2011/12/new-developer-tools-in-firefox-11-aurora/">New Developer Tools in Firefox 11 Aurora</a> (blog post)</li>
-</ul>
-<p>{{ languages( { "ja": "ja/Tools/Page_Inspector/3D_view", "zh-cn": "zh-cn/Tools/Page_Inspector/3D_view"} ) }}</p>
diff --git a/files/es/tools/debugger/how_to/set_a_breakpoint/index.html b/files/es/tools/debugger/how_to/set_a_breakpoint/index.html
deleted file mode 100644
index 49376ffc9e..0000000000
--- a/files/es/tools/debugger/how_to/set_a_breakpoint/index.html
+++ /dev/null
@@ -1,44 +0,0 @@
----
-title: Set a breakpoint
-slug: Tools/Debugger/How_to/Set_a_breakpoint
-translation_of: Tools/Debugger/How_to/Set_a_breakpoint
----
-<div>{{ToolsSidebar}}</div>
-
-<p>Puedes establecer una interrupción incondicional en una de las siguientes maneras:</p>
-
-<ul>
- <li>en el <a href="/en-US/docs/Tools/Debugger/UI_Tour#Source_pane">panel de fuente</a>, haz clic en el número de línea para la línea que deseas la interrupción</li>
- <li>in the <a href="/en-US/docs/Tools/Debugger/UI_Tour#Source_pane">source pane</a>, activate the context menu while on the line you want to break at, and select "Add breakpoint"</li>
- <li>in the <a href="/en-US/docs/Tools/Debugger/UI_Tour#Source_pane">source pane</a>, highlight the line you want to break at and press <kbd>Ctrl</kbd> + <kbd>B</kbd> (Windows/Linux) or <code>Cmd</code> + <kbd>B</kbd> (macOS)</li>
-</ul>
-
-<p>When you display the context menu, you have a choice of setting either a breakpoint that will pause code execution when it reaches that line, an unconditional breakpoint, or a conditional breakpoint that will only pause the code if the conditions you define are met:</p>
-
-<p><img alt="" src="https://mdn.mozillademos.org/files/16433/set_breakpoint.png" style="border: 1px solid black; display: block; height: 353px; margin: 0 auto; width: 593px;"></p>
-
-<p>If you choose to set a conditional breakpoint, you will be able to add the condition:</p>
-
-<p><img alt="" src="https://mdn.mozillademos.org/files/16436/edit_conditional_breakpoint.png" style="border: 1px solid black; display: block; height: 324px; margin: 0px auto; width: 525px;"></p>
-
-<p>Each breakpoint is shown in two places in the debugger:</p>
-
-<ul>
- <li>the <a href="/en-US/docs/Tools/Debugger/UI_Tour#Breakpoints_list">breakpoints list</a> shows the filename and line number for the breakpoint
-
-  <p><img alt="" src="https://mdn.mozillademos.org/files/16434/list_breakpoints.png" style="border: 1px solid black; display: block; height: 325px; margin: 0px auto; width: 313px;"></p>
- </li>
- <li>the line in the <a href="/en-US/docs/Tools/Debugger/UI_Tour#Source_pane">source pane</a> is marked with a blue arrow if you set an unconditional breakpoint, or an orange arrow if the breakpoint is <a href="/en-US/docs/Tools/Debugger/How_to/Set_a_conditional_breakpoint">conditional</a>. <img alt="" src="https://mdn.mozillademos.org/files/16435/breakpoints_in_code.png" style="border: 1px solid black; display: block; height: 324px; margin: 0px auto; width: 525px;"></li>
-</ul>
-
-<p>Starting in Firefox 67, you can set a column breakpoint on a complex line of code, such as one that makes multiple function calls. For example, if you try to set a breakpoint on the following line, you will have three possible locations for a breakpoint: at the point where the variable value is set, at the call to <code>parse</code>, or at the call to <code>getItem</code>.</p>
-
-<pre class="brush: js">tasks = JSON.parse(localStorage.getItem('todoList'));</pre>
-
-<p>Possible breakpoints are shown with indicators. The following image shows the line in the debugger. As soon as you click on the line, the three indicators show the possible breakpoints. The default breakpoint is set to the first column. In the image, the second column breakpoint was chosen which you can confirm in the Breakpoints section on the right where it shows that the breakpoint is on the call to <code>parse</code>.</p>
-
-<p><img alt="" src="https://mdn.mozillademos.org/files/16576/column_breakpoint.png" style="border: 1px solid black; display: block; margin: 0px auto;"></p>
-
-<p>Column breakpoints allow you to break at multiple points on the same line. In the previous example, you could have selected both the call to <code>parse </code>and the call to <code>getItem</code>, or even all three columns to break at each of the possible locations.</p>
-
-<p>In cases where you set breakpoints on multiple columns, the currently active columns breakpoint will be highlighted in the Breakpoints side panel.</p>
diff --git a/files/es/tools/page_inspector/how_to/work_with_animations/index.html b/files/es/tools/page_inspector/how_to/work_with_animations/index.html
deleted file mode 100644
index 2d855f1785..0000000000
--- a/files/es/tools/page_inspector/how_to/work_with_animations/index.html
+++ /dev/null
@@ -1,112 +0,0 @@
----
-title: Trabajar con animaciones
-slug: Tools/Page_Inspector/How_to/Work_with_animations
-tags:
-  - Guia(2)
-  - Herramientas
-  - Inspector
-translation_of: Tools/Page_Inspector/How_to/Work_with_animations
----
-<p>Este artículo cubre tres herramientas que puede usar para visualizar y editar animaciones:</p>
-
-<ul>
- <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Work_with_animations#Animation_inspector">El inspector de animación</a></li>
- <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Work_with_animations#Edit_keyframes">Editor de @keyframes</a></li>
- <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Work_with_animations#Edit_timing_functions">Editor de funciones de tiempo</a></li>
-</ul>
-
-<h2 id="Inspector_de_Animación">Inspector de Animación</h2>
-
-<div class="note">
-<p>Aunque esta herramienta se introdujo en Forefox 41, el interface de usuario se rediseñó en Forefox 43. This article describes the animation inspector as it appears in Firefox 43 and subsequent releases. If you want to see what the animation inspector looks like in Firefox 41 and 42, see <a href="/en-US/docs/Tools/Page_Inspector/How_to/Work_with_animations/Animation_inspector_(Firefox_41_and_42)">this separate page</a>.</p>
-</div>
-
-<p>Desde Firefox 41, el Inspector de Página incluye una <a href="/en-US/docs/Tools/Page_Inspector/UI_Tour#Animations_view">vista extra etiquetada "Animaciones"</a>.</p>
-
-<p>Esta vista muestra las transiciones CSS y las animaciones CSS sincronizadas en la linea de tiempo, puede usar el widget dragueable para moverse a cualquier punto en la linea de tiempo y ver la página en ese punto.</p>
-
-<p>To see how it works, we'll walk through an example. The box below contains three grayscale icons, each representing a different <a href="https://www.mozilla.org/en-US/firefox/channel/">Firefox channel</a>. If you click an icon, the icon enlarges and changes to color, and the name of the channel appears. Click the icon again to reverse the effect. These animations are made by applying transitions to several CSS properties.</p>
-
-<p>{{ EmbedLiveSample('firefox-logo-animation', 500, 250, "", "Tools/Page_Inspector/How_to/Work_with_animations/Animations_examples") }}</p>
-
-<p>Let's use the animation inspector to see what's going on in this example.</p>
-
-<ul>
- <li>Using Firefox 43 or later, right-click one of the icons and select "Inspect Element".</li>
- <li>You'll probably also want to adjust the selected node up a level, to the <code>&lt;div class="channel"&gt;</code> node.</li>
- <li>Switch over to the "Animations" tab.</li>
-</ul>
-
-<p>{{EmbedYouTube("U2eJYacf5XY")}}</p>
-
-<p>Now play the animation:</p>
-
-<p>{{EmbedYouTube("CwXXXEllB3o")}}</p>
-
-<p>Let's take a closer look at the contents of the animation inspector here:</p>
-
-<p><img alt="" src="https://mdn.mozillademos.org/files/11929/animation-inspector-44.png" style="display: block; height: 181px; margin-left: auto; margin-right: auto; width: 643px;"></p>
-
-<p>It shows a synchronized timeline for every CSS property transition involved in the animation. The timeline starts at the start of the first transition, and ends at the end of the last transition, and is labeled with markers every 100 milliseconds (this depends on the time scale of the animations currently displayed). You can see that the example above takes 735 milliseconds to run.</p>
-
-<p>Each animation or transition is shown as a horizontal bar laid across the timeline:</p>
-
-<ul>
- <li>The bar is blue if a <code><a href="/en-US/docs/Web/CSS/transition">transition</a></code> was used to animate a property, and orange if a <a href="/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations"><code>@keyframes</code> animation</a> was used.</li>
- <li>From Firefox 44 onwards, the bar contains a lightning bolt icon (<img alt="" src="https://mdn.mozillademos.org/files/11931/compositor-icon.png" style="height: 18px; width: 16px;">) if the property was animated using the compositor thread (see more about the <a href="/en-US/docs/Tools/Performance/Scenarios/Animating_CSS_properties#CSS_property_cost">cost of animating different CSS properties</a>).</li>
- <li>The bar is labeled with the name of the property being animated or the name of the <code>@keyframes</code> animation.</li>
- <li>If the animation or transition had a delay, this is shown as a cross-hatched portion of the bar.</li>
- <li>If you hover over the bar, a tooltip appears, giving you more detailed information about the animation or transition.</li>
-</ul>
-
-<p>To the left of each bar is a selector for the node that the animation applies to. If you hover over this selector, the node is highlighted in the page. Click the selector to select the node in the inspector.</p>
-
-<p>To the left of the selector is a "target" icon (<img alt="" src="https://mdn.mozillademos.org/files/11919/target-icon.png" style="height: 16px; width: 15px;">). From Firefox 44, clicking this icon will lock the highlighter on the element.</p>
-
-<p>Applying all this to our example, we can see that:</p>
-
-<ul>
- <li>The animation involved two elements, <code>span.channel-note</code> and <code>img#selected.channel-icon</code>. Hovering over these selectors, we can see that those elements are, respectively, the channel name "Firefox Nightly" and the channel icon: {{EmbedYouTube("EOUjHt0V1No")}}</li>
- <li>Each element had two properties animated:
-  <ul>
-   <li><code><a href="/en-US/docs/Web/CSS/width">width</a></code> and <code><a href="/en-US/docs/Web/CSS/opacity">opacity</a></code> for the channel name</li>
-   <li><code><a href="/en-US/docs/Web/CSS/filter">filter</a></code> and <code><a href="/en-US/docs/Web/CSS/transform">transform</a></code> for the icon.<span class="hidden"> </span><span class="hidden"> </span><span class="hidden"> </span></li>
-  </ul>
- </li>
- <li>The <code>filter</code> property had a delay of 0.25 seconds applied to it.</li>
- <li>The <code>transform</code> property transition ends after 0.5 seconds.</li>
- <li>The <code>transform</code> property was animated on the compositor thread.</li>
-</ul>
-
-<h3 id="Animation_playback">Animation playback</h3>
-
-<p>At the top of the animation inspector:</p>
-
-<ul>
- <li>there are buttons to play/pause and rewind the animation (new in Firefox 44)</li>
- <li>the current time in the animation is displayed (new in Firefox 44).</li>
-</ul>
-
-<p>Finally, if you click inside the bar at the top of the timeline, you get a scrubber that you can drag left and right to move backwards and forwards through the animation, and pinpoint exactly what's happening when:</p>
-
-<p>{{EmbedYouTube("1hqNaMsB48g")}}</p>
-
-<h2 id="Edit_keyframes">Edit @keyframes</h2>
-
-<p>Any <a href="/en-US/docs/Web/Guide/CSS/Using_CSS_animations">@keyframes rules</a> associated with the currently selected element are displayed in the <a href="/en-US/docs/Tools/Page_Inspector/UI_Tour#Rules_view">Rules view</a> and are editable:</p>
-
-<p>{{EmbedYouTube("mDHtLK88ZW4")}}</p>
-
-<h2 id="Edit_timing_functions">Edit timing functions</h2>
-
-<p>When you <a href="/en-US/docs/Web/Guide/CSS/Using_CSS_animations">create a CSS animation</a> you can specify a <a href="/en-US/docs/Web/CSS/animation-timing-function">timing function</a>: this determines the rate at which the animation progresses. One way to specify the timing function is with a cubic Bézier curve.</p>
-
-<p>Timing functions defined as cubic Bézier curves get an icon in the Rules view. If you click the icon you get a visual editor for the curve, enabling you to drag <a href="/en-US/docs/Web/CSS/timing-function#The_cubic-bezier()_class_of_timing-functions">P1 and P2</a>, and see the results in the page:</p>
-
-<p>{{EmbedYouTube("GW5-R2ewaqA")}}</p>
-
-<p>This feature uses open source code from <a href="http://cubic-bezier.com">Lea Verou’s cubic-bezier.com</a>.</p>
-
-<p>The cubic Bézier editor includes a number of presets, grouped under "Ease-in", "Ease-out", and "Ease-in-out":</p>
-
-<p>{{EmbedYouTube("Jx-J2Yy0aSg")}}</p>
diff --git a/files/es/tools/settings/index.html b/files/es/tools/settings/index.html
deleted file mode 100644
index e502957541..0000000000
--- a/files/es/tools/settings/index.html
+++ /dev/null
@@ -1,206 +0,0 @@
----
-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>