Novedades de Herramientas para desarrolladores (Chrome 83)

Kayce Basques

Emular deficiencias de visión

Abre la pestaña Renderización y usa la nueva función Emular deficiencias visuales para obtener una mejor idea de cómo las personas con diferentes tipos de deficiencias visuales experimentan tu sitio.

Emulación de visión borrosa

Las Herramientas para desarrolladores pueden emular la visión borrosa y los siguientes tipos de deficiencias en la visión de colores:

• Protanopia: incapacidad para percibir el color rojo.
• Deuteranopia: incapacidad para percibir el color verde.
• Tritanopia: incapacidad para percibir el color azul.
• Acromatopsia: incapacidad de percibir cualquier color, excepto los tonos de gris (extremadamente inusual).

Existen versiones menos extremas de estas deficiencias en la percepción del color y, de hecho, son más comunes. Por ejemplo, la protanomaly es una sensibilidad reducida a la luz roja (a diferencia de la protanopia, que es la incapacidad total para percibir la luz roja). Sin embargo, estas deficiencias visuales "anormales" no están definidas con tanta claridad: cada persona con una deficiencia visual de este tipo es diferente y puede ver las cosas de manera diferente (puede percibir más o menos de los colores relevantes).

Si diseñas para las simulaciones más extremas en DevTools, se garantiza que tus apps web sean accesibles para las personas con protanomía, deuteranomía, tritanomía y acromatomía.

Envía comentarios al problema de Chromium #1003700 o obtén más información sobre la implementación.

Emular configuraciones regionales

Ahora puedes emular configuraciones regionales estableciendo una ubicación en Sensores > Ubicación. Abre el menú de comandos y escribe Sensors para acceder a la pestaña Sensores. Después de realizar estas acciones, DevTools modifica la configuración regional predeterminada actual, lo que afecta lo siguiente:

• APIs de Intl.*, p.ej., new Intl.NumberFormat().resolvedOptions().locale
• otras APIs de JavaScript que admiten configuraciones regionales, como String.prototype.localeCompare y *.prototype.toLocaleString, p.ej., 123_456..toLocaleString()
• APIs de DOM, como navigator.language y navigator.languages
• el encabezado de solicitud HTTP Accept-Language

Consulta el ejemplo de código dependiente de la configuración regional para probarlo.

Envía comentarios al problema de Chromium #1051822.

Depuración de la política de incorporaciones de origen cruzado (COEP)

El panel de red ahora proporciona información de depuración de la política de incorporaciones de origen cruzado.

La columna Estado ahora proporciona una explicación rápida de por qué se bloqueó una solicitud, así como un vínculo para ver los encabezados de esa solicitud y realizar una depuración más detallada:

En la sección Encabezados de respuesta de la pestaña Encabezados, se proporciona más orientación para resolver los problemas:

Envía comentarios al problema de Chromium #1051466.

Íconos nuevos para puntos de interrupción, puntos de interrupción condicionales y puntos de registro

El panel Sources tiene íconos nuevos para puntos de interrupción, puntos de interrupción condicionales y puntos de registro:

• Los puntos de interrupción se representan con círculos rojos.
• Los puntos de interrupción condicionales se representan con círculos mitad rojos y mitad blancos.
• Los puntos de registro se representan con círculos rojos con íconos de Play Console.

El motivo de los nuevos íconos fue hacer que la IU sea más coherente con otras herramientas de depuración de GUI (que suelen colorear los puntos de interrupción de color rojo) y facilitar la distinción entre las 3 funciones a simple vista.

Envía comentarios al problema #1041830 de Chromium.

Cómo ver las solicitudes de red que establecen una ruta de cookie específica

Usa la nueva palabra clave de filtro cookie-path en el panel Network para enfocarte en las solicitudes de red que establecen una ruta de cookie específica.

Consulta Cómo filtrar solicitudes por propiedades para descubrir más palabras clave especiales como cookie-path.

Acopla a la izquierda en el menú de comandos

Abre el menú de comandos y ejecuta el comando Dock to left para mover DevTools a la izquierda del viewport.

Envía comentarios al problema de Chromium #1011679.

La opción Settings del menú principal se movió

La opción para abrir Configuración desde el menú principal ahora se encuentra en Más herramientas.

Envía comentarios al problema de Chromium #1050855.

El panel Auditas ahora es el panel Lighthouse.

Los equipos de DevTools y Lighthouse recibían con frecuencia comentarios de los desarrolladores web que decían que era posible ejecutar Lighthouse desde DevTools, pero cuando iban a probarlo, no podían encontrar el panel "Lighthouse", por lo que el panel Audits ahora es el panel Lighthouse.

Cómo borrar todas las anulaciones locales de una carpeta

Después de configurar las Anulaciones locales, ahora puedes hacer clic con el botón derecho en una carpeta y seleccionar la nueva opción Borrar todas las anulaciones para borrar todas las anulaciones locales de esa carpeta.

Envía comentarios al problema de Chromium #1016501.

IU actualizada de tareas largas

Una tarea larga es un código JavaScript que monopoliza el subproceso principal durante mucho tiempo, lo que hace que una página web se inmovilice.

Hace tiempo que puedes visualizar tareas de larga duración en el panel Rendimiento, pero en Chrome 83, se actualizó la IU de visualización de tareas de larga duración en el panel Rendimiento. La parte de tarea larga de una tarea ahora tiene un fondo rojo a rayas.

Envía comentarios al problema de Chromium #1054447.

Compatibilidad con íconos enmascarables en el panel Manifiesto

Android Oreo presentó íconos adaptables, que muestran íconos de apps en diferentes formas en distintos modelos de dispositivos. Los íconos enmascarables son un nuevo formato de ícono que admite íconos adaptables, lo que te permite asegurarte de que el ícono de tu PWA se vea bien en los dispositivos que admiten el estándar de íconos enmascarables.

Habilita la nueva casilla de verificación Show only the minimum safe area for maskable icons en el panel Manifiesto para verificar que tu ícono enmascarable se vea bien en dispositivos Android Oreo. Consulta ¿Mis íconos actuales están listos? para obtener más información.

Descarga los canales de vista previa

Considera usar Chrome Canary, Dev o Beta como tu navegador de desarrollo predeterminado. Estos canales de versión preliminar te brindan acceso a las funciones más recientes de DevTools, te permiten probar las APIs de plataformas web de vanguardia y te ayudan a encontrar problemas en tu sitio antes que tus usuarios.

Comunícate con el equipo de Chrome DevTools

Usa las siguientes opciones para hablar sobre las funciones nuevas, las actualizaciones o cualquier otro tema relacionado con DevTools.

• Envíanos tus comentarios y solicitudes de funciones a crbug.com.
• Informa un problema de DevTools con more_vert Más opciones > Ayuda > Informar un problema de DevTools en DevTools.
• Twittea a @ChromeDevTools.
• Deja comentarios en los videos de YouTube sobre las novedades de DevTools o en los videos de YouTube sobre sugerencias de DevTools.

Novedades de DevTools

Una lista de todo lo que se analizó en la serie Novedades de DevTools.