Novedades de Herramientas para desarrolladores (Chrome 83)

Emular deficiencias de visión

Abre la pestaña Rendering y usa la nueva función Emulate vision deficiencies para tener una mejor idea de cómo las personas con diferentes tipos de deficiencias visuales experimentan tu sitio.

Emular la 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 protanomalía es una sensibilidad reducida a la luz roja (a diferencia de la protanopia, que es la incapacidad completa para percibir la luz roja). Sin embargo, estas deficiencias visuales "-ómalas" no están tan claramente definidas: cada persona con tal deficiencia visual es diferente y puede ver las cosas de manera diferente (pudiendo 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 también serán accesibles para las personas con protanomalía, deuteranomalía, tritanomalía y acromatomalía.

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

Cómo 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, las Herramientas para desarrolladores modifican 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 tienen en cuenta la configuración regional, como String.prototype.localeCompare y *.prototype.toLocaleString, p.ej., 123_456..toLocaleString()
• APIs del DOM, como navigator.language y navigator.languages
• El encabezado de la solicitud HTTP Accept-Language

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

Envía comentarios al problema núm. 1051822 de Chromium.

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

El panel Network 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 adicional:

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

Envía comentarios al problema #1051466 de Chromium.

Nuevos íconos para los puntos de interrupción, los puntos de interrupción condicionales y los puntos de registro

El panel Fuentes tiene íconos nuevos para los puntos de interrupción, los puntos de interrupción condicionales y los 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 que incluyen íconos de la consola.

La motivación para los nuevos íconos fue hacer que la IU fuera más coherente con otras herramientas de depuración de GUI (que suelen colorear los puntos de interrupción en rojo) y facilitar la distinción entre las 3 funciones de un vistazo.

Envía comentarios al problema #1041830 de Chromium.

Cómo ver las solicitudes de red que establecen una ruta de acceso 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.

Acoplar a la izquierda en el menú de comandos

Abre el menú de comandos y ejecuta el comando Dock to left para mover Herramientas para desarrolladores a la izquierda de tu ventana gráfica.

Envía comentarios al problema 1011679 de Chromium.

Se movió la opción Settings del menú principal

Ahora, la opción para abrir Configuración desde el Menú principal se encuentra en Más herramientas.

Envía comentarios al problema #1050855 de Chromium.

El panel Audits ahora es el panel Lighthouse

Los equipos de DevTools y Lighthouse recibían comentarios con frecuencia de los desarrolladores web que decían que sabían que era posible ejecutar Lighthouse desde DevTools, pero que, cuando intentaban hacerlo, 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 Invalidaciones locales, ahora puedes hacer clic con el botón derecho en una carpeta y seleccionar la nueva opción Borrar todas las invalidaciones para borrar todas las invalidaciones locales de esa carpeta.

Envía comentarios al problema #1016501 de Chromium.

Se actualizó la IU de las tareas largas

Una tarea larga es un código JavaScript que monopoliza el subproceso principal durante un período prolongado, lo que provoca que una página web se inmovilice.

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

Envía comentarios al problema #1054447 de Chromium.

Compatibilidad con íconos enmascarables en el panel Manifest

Android Oreo introdujo los íconos adaptables, que muestran los íconos de la app en una variedad de formas en diferentes modelos de dispositivos. Los íconos enmascarables son un nuevo formato de ícono que admite íconos adaptables, lo que te permite garantizar 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 Manifest para verificar que tu ícono enmascarable se vea bien en dispositivos Android Oreo. Consulta ¿Están listos mis íconos actuales? 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 vanguardia de la plataforma web y te ayudan a encontrar problemas en tu sitio antes de que lo hagan tus usuarios.

Comunícate con el equipo de Herramientas para desarrolladores de Chrome

Usa las siguientes opciones para analizar las nuevas funciones, las actualizaciones o cualquier otro tema relacionado con las Herramientas para desarrolladores.

• Envíanos tus comentarios y solicitudes de funciones a crbug.com.
• Informa un problema de Herramientas para desarrolladores con more_vert Más opciones > Ayuda > Informar un problema de Herramientas para desarrolladores en Herramientas para desarrolladores.
• Envía un tuit a @ChromeDevTools.
• Deja comentarios en los videos de Novedades de DevTools de YouTube o en los videos de Sugerencias de DevTools de YouTube.

Novedades de Herramientas para desarrolladores

Una lista de todo lo que se abordó en la serie Novedades de las Herramientas para desarrolladores