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

Sofia Emelianova

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

Destacar marcos de anuncios

Para comprobar si los marcos están etiquetados como anuncios, haz lo siguiente:

1. Abre la pestaña Renderización en esta demostración y marca la opción Destacar marcos de anuncios.
2. Observa el marco del anuncio destacado en rojo.

Emular una página enfocada

Si cambias el enfoque de la página a Herramientas para desarrolladores, algunos elementos de superposición se ocultan automáticamente si se activan por el foco. Por ejemplo, listas desplegables, menús o selectores de fecha. La opción check_box Emular una página enfocada te permite depurar un elemento de este tipo como si estuviera enfocado.

Precaución: Si activas esta opción, document.visibilityState se establecerá en visible y no se activará el evento visibilitychange. Para obtener más información, consulta API de Page Visibility.

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 Renderización y, luego, marca y desmarca la opción 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.

Inhabilitar 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 utilizan dos copias diferentes de la misma fuente durante el desarrollo:

• una fuente local para tus herramientas de diseño y
• 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 las diferencias entre las fuentes web y sus versiones locales

Chrome procesa 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 hacia abajo y, en Rendered Fonts, descubre que Chrome encontró Courier New en archivos 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.

   

Habilitar el modo oscuro automático

Descubre cómo se vería 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.

Punto clave: Con la opción Tema oscuro automático habilitado, se inhabilita la lista desplegable Emula contenido multimedia de CSS prefers-color-scheme y se establece automáticamente en prefers-color-scheme: dark.

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 de visión ven tu sitio, para que puedas 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 verdes, rojos y amarillos.
   • 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.

Inhabilitar los formatos de imagen AVIF y WebP

Estas emulaciones permiten que los desarrolladores prueben con mayor facilidad 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 de una página (o, de manera similar, las imágenes WebP):

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

De manera similar, puedes inhabilitar imágenes WebP.

Punto clave: Estas opciones inhabilitan el almacenamiento en caché de imágenes automáticamente.