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:
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.
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.
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.
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:
Para cambiar de vista utiliza las pestañas que hay en la parte superior de la página
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.
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.
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.
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.