Novedades de Herramientas para desarrolladores (Chrome 83)

Kayce Basques
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 idea de cómo experimentan tu sitio las personas con diferentes tipos de deficiencias visuales.

Emulación de visión borrosa

Emulación de visión borrosa

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

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

Existen versiones menos extremas de estas deficiencias para la visión de los colores y, de hecho, son más comunes. Por ejemplo, protanomalía es una sensibilidad reducida a la luz roja (a diferencia de la protanopia, que es la incapacidad total de percibir la luz roja). Sin embargo, estas deficiencias de visión de "-omalía" no están tan claramente definidas: cada persona con esta deficiencia de visión es diferente y podría ver las cosas de manera diferente (poder percibir más o menos los colores relevantes).

Si diseñas para las simulaciones más extremas en Herramientas para desarrolladores, 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 tus comentarios sobre el error #1003700 de Chromium 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, 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 configuración regional, como String.prototype.localeCompare y *.prototype.toLocaleString, p.ej., 123_456..toLocaleString()
  • APIs de DOM, como navigator.language y navigator.languages
  • el encabezado de la solicitud HTTP Accept-Language

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

Envía tus comentarios sobre el problema #1051822 de Chromium.

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

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

En la columna Estado, ahora se 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 a fin de realizar una depuración más detallada:

Solicitudes bloqueadas en la columna Estado

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

Más información en la sección Encabezados de respuesta

Envía tus comentarios sobre el problema #1051466 de Chromium.

Í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:

La motivación para crear íconos nuevos fue hacer que la IU sea más coherente con otras herramientas de depuración de la 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 sobre el error #1041830 de Chromium.

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

Consulta Filtrar solicitudes por propiedad para descubrir más palabras clave especiales, como cookie-path.

Estación de carga a la izquierda desde el menú Comandos

Abre el Menú de comandos y ejecuta el comando Dock to left para mover las Herramientas para desarrolladores a la izquierda de la viewport.

Herramientas para desarrolladores ancladas a la izquierda del viewport

Envía tus comentarios sobre el problema #1011679 de Chromium.

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

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

"Menú principal" abierto con "Más herramientas" enfocado en "Configuración"

Envía tus comentarios sobre el problema #1050855 de Chromium.

El panel Audits (Audits) ahora es el panel Lighthouse.

Con frecuencia, los equipos de Herramientas para desarrolladores y Lighthouse recibían comentarios de los desarrolladores web que indicaban que era posible ejecutar Lighthouse desde Herramientas para desarrolladores, pero cuando lo probaron no encontraban el panel "Lighthouse", por lo que el panel Audits ahora es el panel Lighthouse.

El panel de Lighthouse

Borra todas las anulaciones locales de una carpeta

Después de configurar las Anulaciones locales, 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.

Borrar todas las anulaciones

Envía tus comentarios sobre el problema #1016501 de Chromium.

Se actualizó la IU de tareas largas.

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

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

Nueva IU de Long Task

Envía tus comentarios sobre el problema 1054447 de Chromium.

Compatibilidad con íconos enmascarables en el panel Manifest

Android Oreo introdujo íconos adaptables, que muestran los íconos de las apps 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 tu ícono de AWP se vea bien en dispositivos que admiten el estándar de íconos enmascarables.

Habilita la nueva casilla de verificación Muestra solo el área segura mínima para los íconos enmascarables en el panel Manifiesto para verificar que el ícono enmascarable se verá bien en dispositivos Android Oreo. Consulta ¿Mis íconos actuales están listos? para obtener más información.

Casilla de verificación "Mostrar solo el área segura mínima para los íconos enmascarables"

Descarga los canales de vista previa

Considera usar Canary, Dev o Beta de Chrome como tu navegador de desarrollo predeterminado. Estos canales de vista previa te brindan acceso a las funciones más recientes de Herramientas para desarrolladores, prueba APIs de plataformas web de vanguardia y encuentra problemas en tu sitio antes que tus usuarios.

Cómo comunicarse con el equipo de Herramientas para desarrolladores de Chrome

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

  • Envíanos tus sugerencias o comentarios a través de crbug.com.
  • Informa un problema en Herramientas para desarrolladores mediante Más opciones   Más   > Ayuda > Informar problemas con Herramientas para desarrolladores en Herramientas para desarrolladores.
  • Envía un tweet a @ChromeDevTools.
  • Deja comentarios en los videos de YouTube de las Novedades de las Herramientas para desarrolladores o en las sugerencias de Herramientas para desarrolladores (videos de YouTube).

Novedades de Herramientas para desarrolladores

Una lista de todos los temas abordados en la serie Novedades de Herramientas para desarrolladores.

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome 103

Chrome 102

Chrome 101

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

Se canceló Chrome 82.

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59