---
title: El 3er panel del modo inspector
slug: Tools/Page_Inspector/3-pane_mode
tags:
  - 3 paneles
  - CSS
  - Guía
  - Herramientas
  - Inspectord
translation_of: Tools/Page_Inspector/3-pane_mode
original_slug: Tools/Page_Inspector/3er-panel_modo
---
<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>