Novedades de Herramientas para desarrolladores (Chrome 111)

Jecelyn Yeen

Cómo depurar el color HD con el panel Estilos

Pronto habrá nuevos tipos de color y espacios de CSS en la Web. Es igualmente emocionante que Herramientas para desarrolladores haya presentado nuevas herramientas para ayudar a los desarrolladores a crear, convertir y depurar colores de alta definición.

El panel Estilos ahora admite 12 espacios de color nuevos y 7 gamuts nuevos, como se describe en la especificación del Nivel de color de CSS 4. Consulta la Guía de colores de CSS de alta definición para comprender de manera integral las opciones de colores disponibles en la Web.

Estos son ejemplos de las definiciones de color de CSS con color(), lch(), oklab() y color-mix(). Ejemplos de definiciones de colores de CSS.

Cuando usas la función color-mix(), puedes ver el resultado final del color en el panel Computed. resultado de la combinación de colores en el panel Computed.

El selector de color admite todos los nuevos espacios de color con más funciones. Por ejemplo, haz clic en la muestra de colores de color(display-p3 1 0 1). También se agregó una línea de límite de la gama, que distingue entre los gamuts sRGB y display-p3, para comprender mejor la gama de colores que seleccionaste. Es una línea de límite de la gama.

Las Herramientas para desarrolladores admiten la conversión de colores entre formatos de color. Usa el ícono Change Color Format para acceder a la ventana emergente de conversión, o simplemente usa Shift y haz clic en una muestra de color en el panel Styles. Convertir colores entre formatos de color.

Cuando generes una conversión, es importante saber si esta se recortó para adaptarse al espacio. Herramientas para desarrolladores coloca un ícono de advertencia junto al color convertido que te alerta sobre este recorte. Advertencia de recorte de color.

Además, puedes elegir colores de la pantalla con la nueva combinación de teclas. Presiona "c" para activar el cuentagotas y presiona Escape para desactivarlo. La herramienta de cuentagotas solo realiza un muestreo de los colores en el espacio de color sRGB. Por ejemplo, si intentas muestrear el color color(display-p3 1 0 1), que está fuera del espacio de color sRGB, la herramienta de cuentagotas recortará el color al más cercano en el espacio sRGB, que es color(display-p3 0.92 0.2 0.97) magenta.

Activa el cuentagotas.

Por último, el parámetro de configuración Formato de color dejó de estar disponible para hacer lugar al nuevo formato de color HD. Baja de la configuración de formato de color.

Problemas de Chromium: 1073895, 1395782, 1408777, 1395782, 1392717, 1382409 y 1392054

UX de puntos de interrupción mejorada

El panel Breakpoints rediseñado te permite tener acceso rápido a las funciones de uso general, en particular, desactivar, editar y quitar puntos de interrupción.

Estos son algunos aspectos destacados: - Ambas opciones de excepción de pausa se movieron al panel Breakpoints y se etiquetaron con texto para que sean más claras. Opciones de pausa de excepciones.

  • Los puntos de interrupción se agrupan por archivo, se ordenan por número de línea o columna y son contraíbles. Agrupa los puntos de interrupción por archivo.

  • Hay nuevas opciones para desactivar, quitar y editar los puntos de interrupción cuando te desplazas sobre un punto de interrupción o un archivo. Nuevas opciones para desactivar los puntos de interrupción.

  • Haz clic en el botón de edición del punto de interrupción para abrir el editor de puntos de interrupción. Desde aquí, puedes ingresar la condición del punto de interrupción o cambiar a un punto de registro. Cuadro de diálogo de edición de punto de interrupción

Consulta la referencia de depuración de JavaScript para aprender a realizar depuraciones con Herramientas para desarrolladores.

Problemas de Chromium: 1407586, 1402891, 1402893

Accesos directos personalizables de la Grabadora

Usa combinaciones de teclas para grabar y volver a reproducir los flujos del usuario más rápido.

La Grabadora presenta algunas combinaciones de teclas prácticas para grabar y volver a reproducir flujos de usuarios más rápido.

¿No recuerdas los atajos? No hay problema. Haz clic en el botón ? para ver todas las combinaciones de teclas en cualquier momento. Las combinaciones de teclas de la grabadora.

Incluso puedes personalizar estas combinaciones de teclas en el menú Configuración. Personaliza las combinaciones de teclas de la grabadora.

Si estás trabajando en un panel diferente y quieres iniciar un registro de flujo de usuarios, usa el comando Create a new recording en el menú de comandos de las Herramientas para desarrolladores para comenzar. Crea un nuevo comando de grabación.

Problema de Chromium: 1339771

Mejor sintaxis destacada para Angular

Las Herramientas para desarrolladores mejoraron la sintaxis destacada para las plantillas HTML de Angular, lo que te facilita la lectura del código y el reconocimiento de su estructura. Resaltado de sintaxis para las plantillas HTML de Angular.

Problemas de Chromium: 1385374, 1385678

Reorganiza las memorias caché en el panel Aplicación

El panel Almacenamiento en caché ahora se puede encontrar en la sección Almacenamiento del panel Aplicación, mientras que el panel Memoria caché atrás/adelante se movió a la sección Servicios en segundo plano. Cachés en el panel Aplicación.

Problema de Chromium: 1407166

Otros aspectos destacados

Estas son algunas correcciones notables en esta versión:

  • Se actualizaron las Herramientas para desarrolladores para respetar la configuración de Inhabilitar caché cuando se cargan mapas de origen. (1407084).
  • El panel Elements ahora se enfoca automáticamente en el primer elemento coincidente de los resultados de la búsqueda al instante. (1381853).
  • Se implementaron varias correcciones para mejorar la confiabilidad del mapa de fuentes y los puntos de interrupción. (508270, 1403362, 1403432, 1396298, 1395337, 1405134).
  • Para facilitar mejor la depuración, Herramientas para desarrolladores ahora admite la evaluación de expresiones con miembros de clases privadas. (1381806). Evaluar expresiones con miembros de clases privadas

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   Más > 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.