Referencia de insignias

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

Cómo 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 anula la selección de 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.

Cuadrícula

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 las columnas, las filas, sus números y los espacios.

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

Subred

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 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 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 de CSS display se establece 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 posiciones de elementos secundarios.

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

Anuncio

DevTools puede 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 los marcos de los anuncios en rojo.

Ajuste de desplazamiento

Un elemento HTML es un contenedor de desplazamiento si su propiedad CSS overflow está configurada en scroll o auto cuando hay suficiente contenido para causar un desbordamiento. Los contenedores de desplazamiento pueden tener propiedades 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.

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.

Para obtener información sobre cómo 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 del DOM separados y presentarlos juntos. Los elementos de contenido de ranuras tienen insignias ink_selectionslot junto a ellos que funcionan como vínculos a los espacios correspondientes.

Descubre la insignia ink_selectionslot en la siguiente vista previa:

1. Inspecciona el elemento en la vista previa.
2. En el árbol del DOM, haz clic en la insignia ink_selectionslot junto al elemento para ubicar el espacio correspondiente.
3. Para volver al contenido del espacio, haz clic en la insignia ink_selectionreveal.

Capa superior

Esta insignia te ayuda a comprender el concepto de la capa superior y a visualizarla. 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 insignias ink_selectiontop-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 ink_selectiontop-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 ink_selectiontop-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.
4. Para volver al elemento <dialog>, haz clic en la insignia ink_selectionreveal que se encuentra junto al elemento o su ::backdrop.

Medios

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 Media y depurar tu contenido multimedia.

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