Aplica otros efectos: habilita el tema oscuro automático, emula el enfoque y mucho más

Sofia Emelianova
Sofia Emelianova

Descubre efectos útiles para aplicar a tu página con esta referencia de las opciones de la pestaña Renderización.

Destacar los marcos de los anuncios

Para verificar si los fotogramas están etiquetados como anuncios, sigue estos pasos:

  1. Abre la pestaña Rendering en esta demo y marca Highlight ad frames.
  2. Observa el marco del anuncio destacado en rojo.

Anuncio destacado en rojo

Emular una página enfocada

Si cambias el enfoque de la página a Herramientas para desarrolladores, algunos elementos superpuestos se ocultan automáticamente si se activan por el enfoque. Por ejemplo, listas desplegables, menús o selectores de fecha. La opción Emulate a focused page te permite depurar un elemento como si estuviera enfocado.

Para emular una página enfocada, haz lo siguiente:

  1. Abre una página con el elemento que deseas depurar, por ejemplo, el sitio web de YouTube con su barra de búsqueda.
  2. En la página, abre la pestaña Rendering y, luego, marca y borra la opción Emulate a focused page.

    Emular una página enfocada

También puedes encontrar la misma opción debajo del botón :hov de la barra de acciones en Elementos > Estilos.

Inhabilita las fuentes locales

Comprueba si las alternativas de fuentes locales funcionan como se espera. Para ello, inhabilita las fuentes local() en las reglas @font-face.

A menudo, los desarrolladores y diseñadores usan dos copias diferentes de la misma fuente durante el desarrollo:

  • Una fuente local para tus herramientas de diseño
  • Una fuente web para tu código

Si inhabilitas las fuentes locales, podrás hacer lo siguiente más fácilmente:

  • Depurar y medir el rendimiento y la optimización de la carga de fuentes web
  • Verifica la precisión de tus reglas de CSS @font-face
  • Descubre si hay diferencias entre las fuentes web y sus versiones locales
Chrome renderiza esta oración en Courier New si encuentra esta fuente en tu dispositivo.

Emula las fuentes de local() faltantes en las reglas @font-face:

  1. Inspecciona la oración anterior, abre Elements > Computed, desplázate hasta el final y, en Rendered Fonts, descubre que Chrome encontró Courier New en los archivos locales.

    Fuentes renderizadas: locales

  2. Abre la pestaña Renderización, marca Inhabilitar fuentes locales y vuelve a cargar la página.

  3. Observa la oración en Roboto que se encuentra en la Web.

    Fuentes renderizadas: recurso de red

Habilita el modo oscuro automático

Consulta cómo se puede ver tu sitio en modo oscuro, incluso si no lo implementaste.

Chrome 96 introdujo una prueba de origen para el Tema oscuro automático en Android. Con esta función, el navegador aplica un tema oscuro generado automáticamente a los sitios con tema claro si el usuario habilitó los temas oscuros en el sistema operativo.

Para habilitar el modo oscuro automático, haz lo siguiente:

  1. En esta página, abre la pestaña Renderización y marca la opción Habilitar el modo oscuro automático.
  2. Observa esta página en modo oscuro.

Se habilitó el modo oscuro automático

Emular deficiencias de visión

Todos deberían poder acceder a la Web y disfrutarla. Google se compromete a hacer que esto se convierta en realidad.

Con las Herramientas para desarrolladores de Chrome, puedes ver cómo las personas con deficiencias visuales ven tu sitio para mejorarlo. Para obtener más información, consulta Simula deficiencias en la visión de colores.

Para emular las deficiencias de visión, haz lo siguiente:

  1. Abre la pestaña Renderización.
  2. En Emulate vision deficiencias, selecciona una de las siguientes opciones de la lista desplegable:

    • Sin emulación.
    • Visión borrosa:
    • Contraste reducido:
    • Protanopia (sin rojo). Baja percepción del rojo; confusión de los colores verde, rojo y amarillo.
    • Deuteranopia (sin verde): Baja percepción del verde; confusión de verdes, rojos y amarillos.
    • Tritanopia (sin azul): Baja percepción del azul; confusión de verdes y azules.
    • Acromatopsia (sin color). Ausencia parcial o total de visión en color.

Se seleccionó Tritanopia (sin azul).

Inhabilita los formatos de imagen AVIF y WebP

Estas emulaciones permiten que los desarrolladores prueben diferentes situaciones de carga de imágenes sin tener que cambiar de navegador.

Supongamos que tienes el siguiente código HTML para publicar una imagen en los formatos AVIF y WebP para navegadores más nuevos, con una imagen PNG de resguardo para navegadores anteriores.

<picture>
  <source srcset="test.avif" type="image/avif">
  <source srcset="test.webp" type="image/webp">
  <img src="test.png" alt="A test image">
</picture>

Para inhabilitar todas las imágenes AVIF en una página (o, de manera similar, las imágenes WebP), haz lo siguiente:

  1. Abre la pestaña Renderización y marca Inhabilitar el formato de imagen AVIF.
  2. Vuelve a cargar la página y coloca el cursor sobre img src. El src de la imagen actual (currentSrc) ahora es la imagen WebP de resguardo.

Emular tipos de imágenes

De manera similar, puedes inhabilitar imágenes WebP.