Referencia de insignias

Sofia Emelianova
Sofia Emelianova
GitHub

Activa o desactiva varias superposiciones y acelera la navegación por el árbol del DOM con esta referencia integral 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.

El menú "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 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 la fuente de tu página en el panel Fuentes.

La insignia &quot;Ver fuente&quot;.

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 la fuente de la página en el panel Fuentes.

Cuadrícula

Un elemento HTML es un contenedor de cuadrícula si su display propiedad CSS está establecida 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.

Superposición de cuadrícula.

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 están establecidas 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.

Superposición de subcuadrícula.

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 está establecida 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.

Superposición flexible.

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.

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.

Es la insignia del anuncio.

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.

Desplazamiento

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

Es una insignia de desplazamiento en un nodo del árbol del DOM.

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.

Superposición de ajuste de desplazamiento.

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.

Superposición de contenedores

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 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 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 junto al elemento para ubicar el espacio correspondiente. Asigna y revela insignias.
  3. Para volver al contenido del espacio, haz clic en la insignia reveal.

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 </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 top-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 top-layer (1) junto al elemento <dialog>. El panel Elementos te lleva al elemento correspondiente en el contenedor #top-layer después de la etiqueta </html> de cierre. El contenedor y la insignia de la capa superior.
  4. Para volver al elemento <dialog>, haz clic en la insignia reveal 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.

Es la insignia de medios activada en la configuración de insignias y que se muestra junto al elemento de video.

Para obtener más información, consulta Depura reproductores 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 las sugerencias, las alertas, las 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.

    La insignia de ventana emergente junto al elemento con un atributo de ventana emergente.

  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 necesario 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>.

    La insignia de estilo inicial junto al elemento con la regla @starting-style.

  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 Cómo animar notificaciones emergentes.