El 3er panel del modo inspector

Este articulo explica como usar el 3er panel del modo inspector.

Feature summary

Desde Firefox 62 en adelante, el Inspector de página tieen un nuevo modo disponible— modo 3er-Panel. cuando este es activado, te permitira ver en simultaneo lo siguiente:

• El panel HTML al costado izquierdo, como es usual.
• Las reglas CSS en un panel diferente en la partecentral, es mas como una pestaña.
• Las otras caracteristicas relacionadas a CSS — como la vista de estilos computados, vista de animaciones, y vista de fuentes — en la pstaña derecha, como es usual.

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.

A brief walkthrough

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.

presionando el toggle podras cambiar de la vista de  2 a 3 paneles.

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 Rejilla CSS y ver inmediatamente los cambios en el Inspector de rejilla.

Habilitando el  inspector de 3 paneles en versiones anteriores a Firefox 62

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  true:

devtools.inspector.split-rule-enabled — esto cambia el modo de 3 paneles de on a off.

devtools.inspector.split-sidebar-toggle — esto añade el boton a la UI.

en Firefox 61, estas preferencias se renombran como:

• devtools.inspector.three-pane-enabled
• devtools.inspector.three-pane-toggle

debes pasar estas dos a true en el Beta para probar las caracteristicas enFirefox 61.