We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

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

The all-new Inspector panel in Firefox 57.

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

This is the button in Firefox 57 Inspector you can use to select elements on a web page.

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:

These are the tasty new HTML and CSS panes in Firefox 57.

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 rules view within the Inspector.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:

The Computed view within the Inspector.

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.

The all-new Inspector panel in Firefox 57.

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

 

This is the Animations pane in the Firefox 57 Inspector.

Ver Trabajar con animaciones para más detalles.

Etiquetas y colaboradores del documento

Colaboradores en esta página: amaiafilo
Última actualización por: amaiafilo,