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 de las opciones de la pestaña Renderización.

Destacar marcos de anuncios

Para comprobar si los marcos están etiquetados como anuncios, sigue estos pasos:

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 la superposición se ocultarán automáticamente si se activan con foco. Por ejemplo, listas desplegables, menús o selectores de fecha. La opción check_box Emular una página enfocada te permite depurar este elemento como si estuviera enfocado.

Precaución: Si esta opción está activada, document.visibilityState se establece en visible y no se activa el evento visibilitychange. Para obtener más información, consulta API de visibilidad de páginas.

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

1. Abre una página con el elemento que se 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, 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 en la barra de acciones en Elementos > Estilos.

Inhabilitar las fuentes locales

Para comprobar si las alternativas de fuentes locales funcionan como se espera, 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, y
• Una fuente web para el código

Si inhabilitas las fuentes locales, podrás realizar las siguientes acciones con mayor facilidad:

• Depurar y medir el rendimiento y la optimización de carga de fuentes web
• Verifica que tus reglas @font-face de CSS sean correctas
• 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 los orígenes local() faltantes en las reglas @font-face:

1. Inspecciona la oración anterior, abre Elementos > Compute, desplázate hacia abajo y, en Fuentes renderizadas, descubre que Chrome encontró Courier New en los 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 que se encuentra en la Web en Roboto.

   

Cómo habilitar el modo oscuro automático

Descubre cómo puede verse tu sitio en el 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ó el uso de 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: Cuando se habilita el Tema oscuro automático, se inhabilita la lista desplegable Emular CSS media feature 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 hacerlo realidad.

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

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

1. Abre la pestaña Renderización.

2. En Emular deficiencias de visión, selecciona una de las siguientes opciones de la lista desplegable:

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

Cómo inhabilitar los formatos de imagen AVIF y WebP

Estas emulaciones facilitan a los desarrolladores probar 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 formatos AVIF y WebP en navegadores más nuevos, con una imagen PNG de resguardo para los navegadores más antiguos.

<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), sigue estos pasos:

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

De manera similar, puedes inhabilitar las imágenes WebP.

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