From 1109132f09d75da9a28b649c7677bb6ce07c40c0 Mon Sep 17 00:00:00 2001
From: Peter Bengtsson <mail@peterbe.com>
Date: Tue, 8 Dec 2020 14:41:45 -0500
Subject: initial commit

---
 .../tools/page_inspector/3er-panel_modo/index.html | 69 ++++++++++++++++++++++
 1 file changed, 69 insertions(+)
 create mode 100644 files/es/tools/page_inspector/3er-panel_modo/index.html

(limited to 'files/es/tools/page_inspector/3er-panel_modo')

diff --git a/files/es/tools/page_inspector/3er-panel_modo/index.html b/files/es/tools/page_inspector/3er-panel_modo/index.html
new file mode 100644
index 0000000000..7165d90a4d
--- /dev/null
+++ b/files/es/tools/page_inspector/3er-panel_modo/index.html
@@ -0,0 +1,69 @@
+---
+title: El 3er panel del modo inspector
+slug: Tools/Page_Inspector/3er-panel_modo
+tags:
+  - 3 paneles
+  - CSS
+  - Guía
+  - Herramientas
+  - Inspectord
+translation_of: Tools/Page_Inspector/3-pane_mode
+---
+<div>{{ToolsSidebar}}</div>
+
+<p class="summary">Este articulo explica como usar el 3er panel del modo inspector.</p>
+
+<h2 id="Feature_summary">Feature summary</h2>
+
+<p>Desde Firefox 62 en adelante, el <a href="/en-US/docs/Tools/Page_Inspector">Inspector de página</a> tieen un nuevo modo disponible— <strong>modo 3er-Panel</strong>. cuando este es activado, te permitira ver en simultaneo lo siguiente:</p>
+
+<ul>
+ <li>El <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML">panel HTML</a> al costado izquierdo, como es usual.</li>
+ <li>Las <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#Examine_CSS_rules">reglas CSS</a> en un panel diferente en la partecentral, es mas como una pestaña.</li>
+ <li>Las otras caracteristicas relacionadas a CSS — como la <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#Examine_computed_CSS">vista de estilos computados</a>, <a href="/en-US/docs/Tools/Page_Inspector/How_to/Work_with_animations">vista de animaciones</a>, y <a href="/en-US/docs/Tools/Page_Inspector/How_to/View_fonts">vista de fuentes</a> — en la pstaña derecha, como es usual.</li>
+</ul>
+
+<p><img alt="The firefox page inspector in 3 pane mode, with HTML pane on left, CSS rules pane in center, and CSS tool tabs on right" src="https://mdn.mozillademos.org/files/15935/3-pane-view-final.png" style="border-style: solid; border-width: 1px; display: block; height: 259px; margin: 0px auto; width: 1195px;"></p>
+
+<div class="note">
+<p><strong>Nota</strong>: En tamaños de pantalla mas reducidos, las pestañas apareceran bajo el panel de Reglas CSS.</p>
+</div>
+
+<p>Tener las reglas de CCS en su propio panel es muy util ya que no solo te permite revisar el HTML y editar el CSS que esta aplicado a este, si no que tambien puedes ver en tiempo real como afectan tus caracteristicas CSS afectan a los estilos computados. solo necesitas tener la pestaña abierta para ver el efecto.</p>
+
+<h2 id="A_brief_walkthrough">A brief walkthrough</h2>
+
+<p>El inspector de 3 paneles esta desactivado por defecto. este se activa con el  toggle que se encuentra el parte superior izquierda de la pestaña.</p>
+
+<p><img alt="a view of the tabs panel, showing the 2 to 3 pane toggle icon" src="https://mdn.mozillademos.org/files/15937/toggle-icon-final.png" style="display: block; height: 241px; margin: 0px auto; width: 410px;"></p>
+
+<p>presionando el toggle podras cambiar de la vista de  2 a 3 paneles.</p>
+
+<p><img alt="The firefox page inspector in 2 pane mode, with HTML pane on left and CSS tool tabs on right" src="https://mdn.mozillademos.org/files/15936/2-pane-view-final.png" style="border-style: solid; border-width: 1px; display: block; height: 262px; margin: 0px auto; width: 1195px;"></p>
+
+<p><img alt="The firefox page inspector in 3 pane mode, with HTML pane on left, CSS rules pane in center, and CSS tool tabs on right" src="https://mdn.mozillademos.org/files/15935/3-pane-view-final.png" style="border-style: solid; border-width: 1px; display: block; height: 259px; margin: 0px auto; width: 1195px;"></p>
+
+<p>Con el modo de 3 paneles activado, podras ver los cambios en vivo realizados a las reglas de CSS en tu página. Por ejemplo, puedes editar las propiedades de una <a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">Rejilla CSS </a>y ver inmediatamente los cambios en el <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">Inspector de rejilla</a>.</p>
+
+<p>{{EmbedYouTube("ELS2OOUvxIw")}}</p>
+
+<h2 id="Habilitando_el_inspector_de_3_paneles_en_versiones_anteriores_a_Firefox_62">Habilitando el  inspector de 3 paneles en versiones anteriores a Firefox 62</h2>
+
+<p>en anteriores versiones de Firefox (desde Firefox 59/60), puedes activar el modo de 3 paneles en su version Beta para esto vas a about:config y pasando las siguientes  <code>true</code>:</p>
+
+<p><code>devtools.inspector.split-rule-enabled</code> — esto cambia el modo de 3 paneles de on a off.</p>
+
+<p><code>devtools.inspector.split-sidebar-toggle</code> — esto añade el boton a la UI.</p>
+
+<p>en Firefox 61, estas preferencias se renombran como:</p>
+
+<ul>
+ <li><code>devtools.inspector.three-pane-enabled</code></li>
+ <li><code>devtools.inspector.three-pane-toggle</code></li>
+</ul>
+
+<p>debes pasar estas dos a <code>true</code> en el Beta para probar las caracteristicas enFirefox 61.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: El inspector de 3 paneles esta disponible en la edicion Nightly/Developer desde Firefox 62.</p>
+</div>
-- 
cgit v1.2.3-54-g00ecf