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:
- Abra Herramientas para desarrolladores.
- Haz clic con el botón derecho en un elemento del árbol del DOM y selecciona Badge settings....
- 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:
- Inspecciona el elemento en la vista previa.
- 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:
- Inspecciona el elemento en la vista previa.
- 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:
- Inspecciona el elemento en la vista previa.
- 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:
- Inspecciona el elemento en la vista previa.
- 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:
- Inspecciona el elemento en la vista previa.
- En el árbol del DOM, haz clic en la insignia
scroll-snap
junto al elemento. - 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:
- Inspecciona el elemento en la vista previa.
- En el árbol del DOM, haz clic en la insignia
container
junto al elemento. - 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:
- Inspecciona el elemento en la vista previa.
- En el árbol del DOM, haz clic en la insignia
slot
que se encuentra junto al elemento para ubicar el slot correspondiente. - 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:
- En la vista previa, haz clic en Abrir diálogo.
- Inspecciona el diálogo.
- 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>
. - Para volver al elemento
<dialog>
, haz clic en la insigniareveal
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.