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 de visión para obtener una mejor acerca de cómo experimentan tu sitio las personas con diferentes tipos de deficiencias visuales.

Emulando 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 color:

• Protanopia: incapacidad para percibir el color rojo.
• Deuteranopia: incapacidad para percibir el luz verde.
• Tritanopia: incapacidad para percibir la luz azul.
• Acromatopsia: incapacidad para 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 (en contraposición a la protanopia, que es la incapacidad total de percibir la luz roja). Sin embargo, estos valores “-omalía” las deficiencias en la visión son definidas con claridad: cada persona con este tipo de deficiencia de la visión es diferente y es posible que vea algo de forma diferente (poder percibir más o menos colores relevantes).

Gracias al diseño para simulaciones más extremas en Herramientas para desarrolladores, se garantiza que las aplicaciones web accesible también a personas con protanomalía, deuteranomalía, tritanomalía y acromatomalía.

Envíe sus comentarios al problema 1003700 de Chromium o obtenga más información sobre la implementación.

Emular configuraciones regionales

Ahora puedes emular configuraciones regionales configurando una ubicación en Sensores > Ubicación. Abre el Comando Menú y escribe Sensors para acceder a la pestaña Sensores. Después de realizar estas acciones, Herramientas para desarrolladores 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 con reconocimiento de 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 tus comentarios al problema 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 la solicitud y realizar más depuraciones:

La sección Encabezados de respuesta de la pestaña Encabezados proporciona más orientación sobre cómo resolver el problemas:

Envía tus comentarios al problema 1051466 de Chromium.

Nuevos íconos 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:

• Puntos de interrupción están representados por círculos rojos.
• Puntos de interrupción condicionales están representados por círculos semiblancos y rojos.
• Puntos de registro están representados mediante círculos rojos con íconos de Console.

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 generalmente los puntos de interrupción de color rojo) y para facilitar la distinción entre los 3 atributos en de un vistazo.

Envía tus comentarios al problema 1041830 de Chromium.

Visualiza las solicitudes de red que establecen una ruta de acceso de cookies específica

Usa la nueva palabra clave de filtro cookie-path en el panel Red para enfocarte en las solicitudes de red que establecen una ruta de acceso a las cookies 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 las Herramientas para desarrolladores a la izquierda de viewport.

Envía tus comentarios al problema 1011679 de Chromium.

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

La opción para abrir la Configuración desde el Menú principal ahora se puede encontrar en Más herramientas.

Envía tus comentarios al problema 1050855 de Chromium.

El panel Audits ahora es el panel Lighthouse

Los equipos de Herramientas para desarrolladores y Lighthouse a menudo recibían comentarios de desarrolladores web que escucharían que es posible ejecutar Lighthouse en Herramientas para desarrolladores, pero cuando lo probaron, no se pudo encontrar "Lighthouse" por lo que el panel Audits ahora es el panel Lighthouse.

Borrar todas las anulaciones locales de una carpeta

Luego de configurar Local Overrides, ahora puedes hacer clic con el botón derecho en una carpeta y seleccionar la nueva opción Delete todas las anulaciones para borrar todas las anulaciones locales en esa carpeta.

Envía tus comentarios al problema 1016501 de Chromium.

Se actualizó la IU de tareas largas

Una Tarea larga es un código JavaScript que monopoliza el subproceso principal durante mucho tiempo, lo que genera un error esta página se inmovilizará.

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

Envía tus comentarios al problema 1054447 de Chromium.

Compatibilidad con íconos enmascarables en el panel del manifiesto

Android Oreo introdujo los iconos adaptables, que muestran los iconos de las aplicaciones en una variedad de formas en diferentes modelos de dispositivos. Los íconos enmascarables son un nuevo formato de íconos que admiten íconos adaptables. que te permiten asegurarte de que el ícono de la PWA se vea bien en los dispositivos compatibles con la función enmascarable estándar de íconos.

Habilita la nueva casilla de verificación Mostrar solo el área segura mínima para los íconos enmascarables en el Manifiesto. para comprobar que el ícono adaptable se vea bien en dispositivos Android Oreo. Consulta Are my ¿están listos los íconos actuales? para obtener más información.

Descarga los canales de vista previa

Considera usar Chrome Canary, Dev o Beta como navegadores de desarrollo predeterminados. Estos canales de vista previa te brindan acceso a las funciones más recientes de Herramientas para desarrolladores, prueban API de plataformas web de vanguardia y detectan problemas en tu sitio antes que los usuarios.

Comunicarse con el equipo de Herramientas para desarrolladores de Chrome

Usa las siguientes opciones para hablar sobre las nuevas funciones y los cambios en la publicación, o cualquier otra cosa relacionada con Herramientas para desarrolladores.

• Para enviarnos sugerencias o comentarios, accede a crbug.com.
• Informa un problema en Herramientas para desarrolladores con Más opciones   > Ayuda > Informa problemas de Herramientas para desarrolladores en Herramientas para desarrolladores.
• Twittea a @ChromeDevTools.
• Deja comentarios en nuestros videos de YouTube de Herramientas para desarrolladores o en videos de YouTube de las Sugerencias de las Herramientas para desarrolladores.

Novedades de Herramientas para desarrolladores

Una lista de todo lo que se ha abordado en la serie Novedades de Herramientas para desarrolladores.