Este artículo es un breve recorrido por las principales secciones de la interfaz de usuario del Inspector de páginas.
Recorre los tres componentes de máximo nivel de la interfaz de usuario del Inspector:
- el botón "Seleccionar elemento
- el panel HTML
- el panel CSS
Esta guía pretende mantenerse tan breve como sea posible, y lo hace enlazando a otras guías más específicas para profundizar en el trabajo con el Inspector.
Botón seleccionar elemento
El Inspector ofrece información detallada sobre el elemento actualmente seleccionado. El botón Seleccionar Elemento es una de las maneras para seleccionar el elemento que queremos inspeccionar:
Este botón forma parte de la barra de herramientas principal, por tanto es accesible desde cualquier herramienta, no sólo desde el Inspector.
Para aprender a seleccionar un elemento ver la guía seleccionar un elemento.
Panel HTML
El Inspector está dividido en dos mitades. La mitad izquierda está ocupada por el panel HTML:
Para aprender más sobre la estructura del panel HTML, ver a la guía examinar y editar HTML.
Panel CSS
La mitad derecha del Inspector la ocupa el panel CSS:
The CSS pane is divided into 4 views:
El panel CSS está dividido en 5 vistas:
- Vista reglas
- Vista Calculado
- Vista Disposición
- Vista animaciones
- Vista tipografía
Para cambiar de vista utiliza las pestañas que hay en la parte superior de la página
Vista reglas
La vista Reglas muestra la lista de todas las reglas que se aplican al elemento seleccionado ordenadas desde la más específica a la menos específica
Ver Examinar y editar CSS para más detalles.
Vista calculado
La vista Calculada muestra el cálculo completo de CSS para el elemento seleccionado, y una representación visual editable del modelo de caja para el elemento:
Para aprender más sobre la vista modelo de cajas ver Examinar y editar el modelo de caja. Ten en cuenta que antes de Firefox 50, la vista modelo de caja no estaba en la pestaña "Vista calculada", sino que tenía su propia pestaña.
Para aprender más sobre las declaraciones CSS listadas en esta vista ver Examinar CSS calculado.
Vista tipografía
En Firefox 47 únicamente, la vista Tipografía está desactivada por defecto. Si quieres verla en Firefox 47, visita about:config, busca la opción devtools.fontinspector.enabled, y seleccionala como true.
Antes y después de Firefox 47, la vista Tipografía está habilitada por defecto.
La vista Tipografía muestra todas las fuentes de la página con muestras editables.
Ver Vista tipografía para más detalles.
Vista animaciones
La Vista Animaciones ofrece los detalles de cualquier animación aplicada al elemento seleccionado, y un controlador para pausarlas
Ver Trabajar con animaciones para más detalles.