Referencia de insignias

Activa y desactiva varias superposiciones, y acelera la navegación por el árbol del DOM con esta referencia completa de insignias en el panel Elementos.

Cómo ocultar o mostrar insignias

Para ocultar o mostrar ciertas 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 marca una o varias insignias en el submenú Configuración de insignias.

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

Ver código fuente

La insignia view-source se encuentra junto a la etiqueta <html> en la raíz de la página HTML. Haz clic en ella para ver el código fuente de tu página en el panel Fuentes.

Esta insignia proporciona un flujo de trabajo alternativo a la opción Ver código fuente de la página en el menú contextual (clic con el botón derecho) de la página de Chrome:

1. En Chrome, haz clic con el botón derecho en una página > Inspeccionar.
2. En el panel Elementos, haz clic en la insignia view-source junto a la etiqueta <html>.
3. Inspecciona el código fuente de la página en el panel Fuentes.

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

Para obtener información sobre cómo depurar el diseño de cuadrícula, consulta Inspecciona la cuadrícula de CSS.

Subcuadrícula

Una subcuadrícula es una cuadrícula anidada que usa las mismas pistas 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 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 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 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.

Para obtener información sobre cómo depurar diseños flexibles, consulta Inspecciona y depura flexbox 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 con la insignia ad junto a él.

No se puede hacer clic en la insignia ad, pero, si colocas el cursor sobre ella, verás una sugerencia que proporciona contexto sobre por qué se identificó el elemento como un anuncio, por ejemplo:

• Script ancestry: Indica qué secuencias de comandos participaron en la creación del elemento.
• Reglas de la lista de filtros: Indica la regla específica de una lista de filtros (por ejemplo, EasyList) que coincidió con el elemento o el recurso que cargó.

También puedes usar la pestaña Renderización para destacar los marcos de anuncios en rojo.

Desplazamiento

Un elemento HTML es un contenedor de desplazamiento si su propiedad CSS overflow se establece en scroll o auto cuando hay suficiente contenido para provocar un desbordamiento. Estos elementos tienen insignias scroll junto a ellos.

Scroll-snap

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.

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.

Para obtener información sobre cómo depurar consultas de contenedores, consulta Inspecciona y depura 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 del DOM separados y presentarlos juntos. Los elementos de contenido de espacio tienen ink_selectionslot insignias junto a ellos que sirven 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 visualizarlo. La capa superior renderiza el contenido sobre todas las demás capas, independientemente de z-index. Cuando abres un <dialog> elemento con el .showModal() método, el navegador lo coloca en la capa superior.

Para ayudarte a visualizar los elementos de la capa superior, el panel Elementos agrega un contenedor #top-layer al árbol del DOM después de la etiqueta de cierre </html>.

Los elementos de la capa superior tienen ink_selectiontop-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 ink_selectiontop-layer (N) insignia 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 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 ink_selectionreveal 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 Medios y depurar tus medios.

Para obtener más información, consulta Depura reproductores de contenido multimedia con el panel Medios.

Notificación emergente

Una notificación emergente es cualquier elemento con un atributo popover y es útil para una amplia variedad de patrones interactivos, incluidas sugerencias, alertas, notificaciones y mucho más. Estos elementos tienen insignias popover junto a ellos.

Esta insignia activa o desactiva una insignia top-layer junto a ella que se vincula a los elementos correspondientes en el contenedor #top-layer.

Descubre la insignia popover en la siguiente vista previa:

1. En la vista previa, haz clic en TOGGLE POPOVER.
2. Inspecciona la notificación emergente que aparece.

3. En el árbol del DOM, haz clic en la insignia popover junto al elemento <div popover>. El panel Elementos te muestra la insignia top-layer.

   

4. Sigue los pasos de la sección `Top layer.

Para obtener más información, consulta también https://web.dev/learn/css/popover-and-dialog.

Starting-style

La@starting-style regla define los estilos iniciales en un elemento antes de que se renderice en la página. Esto es obligatorio para los elementos que se animan desde display: none, ya que necesitan un estado desde el cual animarse. Estos elementos tienen insignias starting-style junto a ellos.

Esta insignia activa o desactiva los estilos en la regla @starting-style, de modo que puedas ver la animación en acción.

Descubre la insignia starting-style en la siguiente vista previa:

1. En la vista previa, haz clic en OPEN POPOVER.
2. Inspecciona la notificación emergente que aparece.

3. En el árbol del DOM, activa o desactiva la insignia starting-style junto al elemento <div popover>.

   

4. Observa la animación en acción y los estilos que se aplican en la pestaña Elementos > Estilos.

Para obtener más información, consulta también Animación de notificaciones emergentes.

Custom-element

Los elementos HTML personalizados identificados por nombres de etiquetas con guion o is="..." atributos para elementos integrados personalizados tienen custom-element insignias junto a ellos en el árbol del DOM.

Haz clic en la insignia para ir al código pertinente en el panel Fuentes.