Referencia de insignias

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

Cómo ocultar o mostrar insignias

Para ocultar o mostrar las insignias, sigue estos pasos:

1. Abra Herramientas para desarrolladores.
2. Haz clic con el botón derecho en un elemento del árbol del DOM y selecciona Badge settings....
3. Selecciona o desmarca las casillas de verificación junto a las insignias elegidas.

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

Cuadrícula

Un elemento HTML es un contenedor de cuadrícula si su propiedad display de CSS está configurada en grid o inline-grid. Estos elementos tienen insignias grid junto a ellos que activan o desactivan 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.

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

Si deseas aprender a depurar el diseño de la cuadrícula, consulta Cómo inspeccionar la cuadrícula de CSS.

Subcuadrícula

Una subcuadrícula es una cuadrícula anidada que usa los mismos segmentos que su cuadrícula superior. Un elemento es un contenedor de subcuadrícula si una o ambas propiedades grid-template-columns y grid-template-rows se establecen en subgrid. Estos elementos tienen insignias subgrid junto a ellos que activan o desactivan 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.

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

Flex

Un elemento HTML es un contenedor flexible si su propiedad display de CSS está configurada en flex o inline-flex. Estos elementos tienen insignias flex junto a ellos que activan o desactivan 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.

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

Si deseas aprender a depurar diseños flexibles, consulta Cómo inspeccionar y depurar diseños flexibles de CSS.

Anuncio

Las Herramientas para desarrolladores pueden detectar algunos marcos de anuncios y etiquetarlos. Estos marcos tienen insignias 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 la insignia ad al lado.

No se puede hacer clic en la insignia ad, pero puedes usar la pestaña Renderización para destacar los marcos de anuncios en rojo.

Ajuste de desplazamiento

Un elemento HTML es un contenedor de desplazamiento si su propiedad overflow de CSS está configurada en scroll o en auto cuando hay suficiente contenido para causar un desbordamiento. Los contenedores de desplazamiento pueden tener propiedades de CSS que configuren puntos de ajuste. Estos elementos tienen insignias scroll-snap junto a ellos que activan o desactivan 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 desplazar el elemento hacia la derecha y observa la superposición.

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 container-type de CSS. Estos elementos tienen insignias container junto a ellos que activan o desactivan 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.

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

Si deseas obtener información para depurar consultas de contenedores, consulta Cómo inspeccionar y depurar consultas de contenedores de CSS.

Ranura

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 DOM separados y presentarlos juntos. Los elementos de contenido de ranuras tienen insignias slot junto a ellos que sirven como vínculos a los espacios 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 que se encuentra junto al elemento para ubicar el slot correspondiente.
3. Haz clic en la insignia reveal para volver al contenido del horario disponible.

Capa superior

Esta insignia te ayuda a comprender el concepto de capa superior y a visualizarlo. La capa superior renderiza contenido por encima de todas las demás capas, sin importar la 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 </html> de cierre.

Los elementos de la capa superior tienen insignias top-layer (N) junto a ellos, en las que N es el número de índice del elemento. Las insignias son vínculos a los elementos correspondientes del 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>.
4. Para volver al elemento <dialog>, haz clic en la insignia reveal que se encuentra junto al elemento o su ::backdrop.

Medios

La insignia 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 Contenido multimedia y depurar tu contenido multimedia.

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