Referencia de insignias

Sofia Emelianova

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

Ocultar o mostrar insignias

Para ocultar o mostrar insignias, haz lo siguiente:

1. Abre 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.

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

GRid

Un elemento HTML es un contenedor de cuadrícula si su propiedad de CSS display se establece en grid o inline-grid. Estos elementos tienen grid insignias 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.

Para aprender a depurar el diseño de 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 recorridos que su cuadrícula superior. Un elemento es un contenedor de subcuadrícula si una o ambas de sus propiedades grid-template-columns y grid-template-rows se establecen en subgrid. Estos elementos tienen subgrid insignias 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 espacios de una subcuadrícula.

Flex

Un elemento HTML es un contenedor flexible si su propiedad de CSS display se establece en flex o inline-flex. Estos elementos tienen flex insignias 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 posiciones de elementos secundarios.

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

Anuncio

Las Herramientas para desarrolladores pueden detectar algunos marcos de anuncios y etiquetarlos. Esos marcos tienen ad insignias 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 con la insignia ad junto a él.

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

Ajustar el desplazamiento

Un elemento HTML es un contenedor de desplazamiento si su propiedad de CSS overflow se establece en scroll, o bien auto si hay suficiente contenido para causar un desbordamiento. Los contenedores de desplazamiento pueden tener propiedades de CSS que configuran puntos de ajuste. Estos elementos tienen scroll-snap insignias 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.

En la superposición, se muestran las posiciones de los elementos y los puntos de ajuste.

Contenedor

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

Nota: Las consultas de contenedores de CSS son una función experimental. Para habilitar su compatibilidad en Herramientas para desarrolladores, en chrome://flags, establece el experimento Enable CSS Container Queries en Enabled. De lo contrario, no funcionará la siguiente vista previa.

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 y la superposición del diseño.

La superposición muestra posiciones de elementos secundarios.

Si quieres aprender a depurar consultas de contenedores, visita 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 del DOM separados y presentarlos juntos. Los elementos de contenido del espacio tienen slot insignias 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 espacio correspondiente.
   Punto clave: La insignia slot tiene una insignia de reveal vinculada que te lleva de regreso.
3. Para volver al contenido del horario disponible, haz clic en la insignia reveal.

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, 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 </html> de cierre.

Los elementos de la capa superior tienen top-layer (N) insignias 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 </html> de cierre.
   Punto clave: La insignia top-layer (N) tiene una insignia de reveal vinculada que te lleva de regreso.
4. Para volver al elemento <dialog>, haz clic en la insignia reveal que se encuentra junto a él o su ::backdrop.

Contenido multimedia

La insignia media está desactivada de forma predeterminada. Cuando se activa, 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 Contenido multimedia.