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.
Nota: En tamaƱos de pantalla mas reducidos, las pestaƱas apareceran bajo el panel de Reglas CSS.
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.
Nota: El inspector de 3 paneles esta disponible en la edicion Nightly/Developer desde Firefox 62.