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.

Cómo ocultar o mostrar insignias

Para ocultar o mostrar 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 selecciona Configuración de insignias….
3. Selecciona o anula la selección de las casillas de verificación junto a las insignias elegidas.

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.

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 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 obtener información sobre cómo 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 segmentos que su cuadrícula superior. Un elemento es un contenedor de subcuadrícula si una o ambas de sus propiedades grid-template-columns, grid-template-rows están configuradas 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 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 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 las posiciones de los elementos secundarios.

Para obtener información sobre cómo depurar diseños flexibles, consulta Cómo inspeccionar y depurar flexbox de CSS.

Anuncio

DevTools puede 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 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.

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. Estos elementos tienen insignias scroll junto a ellos.

Ajustar el desplazamiento

Los contenedores de desplazamiento pueden tener propiedades CSS que configuran 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 CSS container-type. Estos elementos tienen insignias container junto a ellos que activan o desactivan las superposiciones correspondientes.

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

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.

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 DOM separados y presentarlos juntos. Los elementos de contenido de los espacios 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.
   Punto clave: La insignia ink_selectionslot tiene una insignia ink_selectionreveal vinculada que te lleva atrás.
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 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 </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 Elementos te dirige al elemento correspondiente en el contenedor #top-layer después de la etiqueta de cierre </html>.
   Punto clave: La insignia ink_selectiontop-layer (N) tiene una insignia ink_selectionreveal vinculada que te lleva atrás.
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 está activado, 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.