Referencia de insignias

Sofia Emelianova
Sofia Emelianova
GitHub

Activa o desactiva varias superposiciones y acelera la navegación por el árbol del DOM con esta referencia integral de insignias en el panel Elements.

Cómo ocultar o mostrar insignias

Para mostrar u ocultar ciertas insignias, haz lo siguiente:

  1. Abre las Herramientas para desarrolladores.
  2. Haz clic con el botón derecho en un elemento del árbol del DOM y marca una o varias insignias en el submenú Configuración de insignias.

El menú "Configuración de insignias".

En el panel Elements, se muestran las insignias seleccionadas junto a los elementos correspondientes en el árbol del DOM. En las siguientes secciones, se explica cada insignia.

Ver fuente

La insignia view-source se encuentra junto a la etiqueta <html> en la raíz de la página HTML. Haz clic en él para ver el código fuente de tu página en el panel Fuentes.

La insignia &quot;Ver fuente&quot;.

Esta insignia proporciona un flujo de trabajo alternativo a la opción Ver código fuente de la página en el menú contextual (clic con el botón derecho) de la página de Chrome:

  1. En Chrome, haz clic con el botón derecho > Inspeccionar una página.
  2. En el panel Elements, haz clic en el código view-source junto a la etiqueta <html>.
  3. Inspecciona el código fuente de la página en el panel Fuentes.

Cuadrícula

Un elemento HTML es un contenedor de cuadrícula si su propiedad CSS display se establece en grid o inline-grid. Estos elementos tienen insignias grid junto a ellos que activan las superposiciones correspondientes.

Activa o desactiva la superposición en la siguiente vista previa:

  1. Inspecciona el elemento en la vista previa.
  2. En el árbol del DOM, haz clic en la insignia grid junto al elemento y observa la superposición.

Superposición de cuadrícula.

La superposición muestra columnas, filas, sus números y espacios.

Para obtener información sobre cómo depurar el diseño de cuadrícula, consulta Cómo inspeccionar la cuadrícula de CSS.

Subgrid

Una subcuadrícula es una cuadrícula anidada que usa los mismos segmentos que su cuadrícula principal. Un elemento es un contenedor de subcuadrícula si una o ambas de sus propiedades grid-template-columns y grid-template-rows están establecidas en subgrid. Estos elementos tienen insignias subgrid junto a ellos que activan las superposiciones correspondientes.

Activa o desactiva la superposición en la siguiente vista previa:

  1. Inspecciona el elemento en la vista previa.
  2. En el árbol del DOM, haz clic en la insignia subgrid junto al elemento y observa la superposición.

Superposición de subcuadrícula.

La superposición muestra las columnas, las filas, sus números y los espacios de una subcuadrícula.

Flexible

Un elemento HTML es un contenedor flexible si su propiedad CSS display se establece en flex o inline-flex. Estos elementos tienen insignias flex junto a ellos que activan las superposiciones correspondientes.

Activa o desactiva la superposición en la siguiente vista previa:

  1. Inspecciona el elemento en la vista previa.
  2. En el árbol del DOM, haz clic en la insignia flex junto al elemento y observa la superposición.

Es una superposición flexible.

La superposición muestra las posiciones de los elementos secundarios.

Para obtener información sobre cómo depurar diseños flexibles, consulta Inspecciona y depura Flexbox de CSS.

Las Herramientas para desarrolladores pueden detectar algunos marcos de anuncios y etiquetarlos. Estos marcos tienen insignias de ad junto a ellos.

Descubre un anuncio en la siguiente vista previa:

  1. Inspecciona el elemento en la vista previa.
  2. En el árbol del DOM, busca un elemento que tenga el distintivo ad junto a él.

Es la insignia del anuncio.

No se puede hacer clic en la insignia ad, pero, si colocas el cursor sobre ella, verás una información sobre la herramienta que proporciona contexto sobre por qué se identificó el elemento como anuncio, por ejemplo:

Es el cuadro de información de la insignia del anuncio.

  • Script ancestry: Indica qué secuencias de comandos participaron en la creación del elemento.
  • Reglas de la lista de filtros: Es la regla específica de una lista de filtros (por ejemplo, EasyList) que coincidió con el elemento o el recurso que cargó.

También puedes usar la pestaña Renderización para destacar los marcos de anuncios en rojo.

Desplazamiento

Un elemento HTML es un contenedor de desplazamiento si su propiedad CSS overflow está establecida en scroll o auto cuando hay suficiente contenido para provocar un desbordamiento. Estos elementos tienen insignias de scroll junto a ellos.

Es una insignia de desplazamiento en un nodo del árbol del DOM.

Ajuste de desplazamiento

Los contenedores de desplazamiento pueden tener propiedades de CSS que configuran puntos de ajuste. Estos elementos tienen insignias scroll-snap junto a ellos que activan las superposiciones correspondientes.

Activa o desactiva la superposición en la siguiente vista previa:

  1. Inspecciona el elemento en la vista previa.
  2. En el árbol del DOM, haz clic en la insignia scroll-snap junto al elemento.
  3. Intenta desplazarte por el elemento hacia la derecha y observa la superposición.

Superposición de ajuste de desplazamiento.

La superposición muestra las posiciones de los elementos y los puntos de ajuste.

Contenedor

Un elemento HTML es un contenedor si tiene la propiedad CSS container-type. Estos elementos tienen insignias container junto a ellos que activan las superposiciones correspondientes.

Activa o desactiva la superposición en la siguiente vista previa:

  1. Inspecciona el elemento en la vista previa.
  2. En el árbol del DOM, haz clic en la insignia container junto al elemento.
  3. Intenta cambiar el tamaño del elemento arrastrando su esquina inferior derecha y observa el cambio de diseño y la superposición.

Superposición de contenedores

La superposición muestra las posiciones de los elementos secundarios.

Para obtener información sobre cómo depurar consultas de contenedor, consulta Cómo inspeccionar y depurar consultas de contenedor de CSS.

Espacio

El elemento HTML <slot> es un marcador de posición que puedes completar con tu propio contenido. Junto con el elemento <template>, <slot> te permite crear árboles del DOM separados y presentarlos juntos. Los elementos de contenido de la ranura tienen insignias de slot junto a ellos que funcionan como vínculos a las ranuras correspondientes.

Descubre la insignia slot en la siguiente vista previa:

  1. Inspecciona el elemento en la vista previa.
  2. En el árbol del DOM, haz clic en la insignia slot junto al elemento para ubicar la ranura correspondiente. Asigna y revela insignias.
  3. Para volver al contenido de la ranura, haz clic en la insignia reveal.

Capa superior

Esta insignia te ayuda a comprender el concepto de la capa superior y visualizarlo. La capa superior renderiza el contenido sobre todas las demás capas, independientemente de z-index. Cuando abres un elemento <dialog> con el método .showModal(), el navegador lo coloca en la capa superior.

Para ayudarte a visualizar los elementos de la capa superior, el panel Elements agrega un contenedor #top-layer al árbol del DOM después de la etiqueta de cierre </html>.

Los elementos de la capa superior tienen insignias de top-layer (N) junto a ellos, donde N es el número de índice del elemento. Las insignias son vínculos a los elementos correspondientes en el contenedor #top-layer.

Descubre la insignia top-layer (N) en la siguiente vista previa:

  1. En la vista previa, haz clic en Abrir diálogo.
  2. Inspecciona el diálogo.
  3. En el árbol del DOM, haz clic en la insignia top-layer (1) junto al elemento <dialog>. El panel Elements te lleva al elemento correspondiente en el contenedor #top-layer después de la etiqueta de cierre </html>. El contenedor y la insignia de la capa superior.
  4. Para volver al elemento <dialog>, haz clic en la insignia reveal junto al elemento o su ::backdrop.

Medios

La insignia de media está desactivada de forma predeterminada. Cuando está activada, aparece junto a los elementos <audio> y <video>. Haz clic en esta insignia para abrir el panel Media y depurar tu contenido multimedia.

Es la insignia de medios activada en la configuración de insignias y que se muestra junto al elemento de video.

Para obtener más información, consulta Cómo depurar reproductores multimedia con el panel Media.

Notificación emergente

Un elemento emergente es cualquier elemento con un atributo popover y es útil para una amplia variedad de patrones interactivos, como sugerencias, alertas, mensajes emergentes y mucho más. Estos elementos tienen insignias de popover junto a ellos.

Esta insignia activa una insignia top-layer junto a ella que vincula a los elementos correspondientes en el contenedor #top-layer.

Descubre la insignia popover en la siguiente vista previa:

  1. En la vista previa, haz clic en TOGGLE POPOVER.
  2. Inspecciona la ventana emergente que aparece.

  3. En el árbol del DOM, haz clic en la insignia popover junto al elemento <div popover>. En el panel Elements, se muestra la insignia de top-layer.

    Es la insignia de ventana emergente junto al elemento con un atributo de ventana emergente.

  4. Sigue los pasos de la sección Capa superior.

Para obtener más información, consulta https://web.dev/learn/css/popover-and-dialog.

Starting-style

Laregla@starting-style define los estilos iniciales de un elemento antes de que se renderice en la página. Esto es obligatorio para los elementos que aparecen con una animación desde display: none, ya que necesitan un estado desde el cual aparecer con una animación. Estos elementos tienen insignias de starting-style junto a ellos.

Esta insignia activa o desactiva los estilos en la regla @starting-style, por lo que puedes ver la animación en acción.

Descubre la insignia starting-style en la siguiente vista previa:

  1. En la vista previa, haz clic en ABRIR VENTANA EMERGENTE.
  2. Inspecciona la ventana emergente que aparece.

  3. En el árbol del DOM, activa el distintivo starting-style junto al elemento <div popover>.

    La insignia de estilo inicial junto al elemento con la regla @starting-style.

  4. Observa la animación en acción y los estilos que se aplican en la pestaña Elements > Styles.

Para obtener más información, consulta también Cómo animar ventanas emergentes.