Cómo depurar el color en HD con el panel Styles
¡Pronto habrá nuevos tipos y espacios de color CSS en la Web! También es emocionante que DevTools 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 y 7 gamas nuevos, como se describe en la especificación CSS Color Level 4. Consulta la Guía de colores CSS de alta definición para comprender mejor las opciones de color disponibles en la Web.
A continuación, se muestran ejemplos de definiciones de color en CSS con color(), lch(), oklab() y color-mix().
Cuando usas la función color-mix(), puedes ver el resultado final del color en el panel Calculado.
El selector de color admite todos los nuevos espacios de color con más funciones. Por ejemplo, haz clic en la muestra de color de color(display-p3 1 0 1). También se agregó una línea de límite de la gama, que distingue entre las gamas sRGB y display-p3 para que comprendas mejor la gama del color seleccionado.
Las Herramientas para desarrolladores admiten la conversión de colores entre formatos de color. Usa el ícono Cambiar formato de color para acceder a la ventana emergente de conversión o simplemente usa Shift y haz clic en una muestra de color en el panel Estilos.
Cuando se realiza la conversión, es importante saber si se recortó para que quepa en el espacio. Las Herramientas para desarrolladores colocan un ícono de advertencia junto al color convertido que te alerta sobre este recorte.
Además, puedes elegir colores de la pantalla con el nuevo acceso directo. Presiona "C" para activar el cuentagotas y Escape para desactivarlo. La herramienta de cuentagotas solo toma muestras de colores en el espacio de color sRGB. Por ejemplo, si intentas tomar una muestra del color color(display-p3 1 0 1), que está fuera del espacio de color sRGB, la herramienta Cuentagotas recortará el color al color más cercano en el espacio sRGB, que es el magenta color(display-p3 0.92 0.2 0.97).
Por último, el parámetro de configuración Formato de color dejó de estar disponible para dar lugar al nuevo formato de color HD.
Problemas de Chromium: 1073895, 1395782, 1408777, 1395782, 1392717, 1382409, 1392054
UX mejorada para los puntos de interrupción
El panel Breakpoints rediseñado te permite acceder rápidamente a las funciones que se usan con frecuencia, en particular, desactivar, editar y quitar puntos de interrupción.
Estos son algunos aspectos destacados:
- Ambas opciones de excepción de pausa se trasladaron al panel Breakpoints y se etiquetaron con texto para que sean más autoexplicativas.
Los puntos de interrupción se agrupan por archivo, se ordenan por números de línea o columna, y se pueden contraer.
Hay nuevas opciones para desactivar, quitar y editar puntos de interrupción cuando se coloca el cursor sobre un punto de interrupción o un archivo.
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.
Consulta la referencia de depuración de JavaScript para obtener información sobre cómo depurar con DevTools.
Problemas de Chromium: 1407586, 1402891, 1402893
Combinaciones de teclas personalizables del Grabador
Usa combinaciones de teclas para grabar y volver a reproducir flujos de usuarios más rápido.
La Grabadora presenta algunos atajos de teclado convenientes 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 todos los atajos en cualquier momento.
Incluso puedes personalizar estos atajos a través del menú Configuración.
Si estás trabajando en otro panel y quieres iniciar una grabación de flujo de usuarios, usa el comando Crear una nueva grabación del menú de comandos en Herramientas para desarrolladores para comenzar.
Problema de Chromium: 1339771
Mejor resaltado de sintaxis para Angular
Las Herramientas para desarrolladores mejoraron el resaltado de sintaxis para las plantillas HTML de Angular, lo que facilita la lectura del código y el reconocimiento de su estructura.
Problemas de Chromium: 1385374 y 1385678
Reorganiza las cachés en el panel Application
Ahora, el panel Cache Storage se encuentra en la sección Storage del panel Application, mientras que el panel Back/forward cache se trasladó a la sección Background Services.
Error de Chromium: 1407166
Otros aspectos destacados
Estas son algunas correcciones destacadas en esta versión:
- Se actualizaron las Herramientas para desarrolladores para que respeten el parámetro de configuración Inhabilitar caché cuando se cargan mapas de fuentes. (1407084)
- El panel Elements ahora enfoca automáticamente el primer elemento coincidente en los resultados de la búsqueda. (1381853)
- Se realizaron varias correcciones para mejorar la confiabilidad de los mapas de origen y los puntos de interrupción. (508270, 1403362, 1403432, 1396298, 1395337, 1405134)
- Para facilitar la depuración, las Herramientas para desarrolladores ahora admiten la evaluación de expresiones con miembros de clases privadas. (1381806)
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 hablar sobre las funciones nuevas, las actualizaciones o cualquier otro tema relacionado con Herramientas para desarrolladores.
- Envíanos tus comentarios y solicitudes de funciones a crbug.com.
- Informa un problema de Herramientas para desarrolladores con 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 las Herramientas para desarrolladores de YouTube o en los videos de Sugerencias sobre las Herramientas para desarrolladores de YouTube.
Novedades de Herramientas para desarrolladores
Una lista de todo lo que se abordó en la serie Novedades de DevTools
- Actualizaciones del servidor de MCP de las Herramientas para desarrolladores
- Mejoras en el uso compartido de rutas
- Compatibilidad con @starting-style
- Widget del editor para la visualización: mampostería
- Lighthouse 13
- Sugerencias de código de Gemini
- Mejoras en el servidor de MCP de Herramientas para desarrolladores
- Acceso más rápido a la asistencia de IA
- Cómo depurar el registro de rendimiento completo con Gemini
- Activar o desactivar la orientación del panel lateral
- Programa para desarrolladores de Google
- Otros aspectos destacados
- Herramientas para desarrolladores de Chrome (MCP) para tu agente de IA
- Cómo depurar el árbol de dependencias de red con Gemini
- Cómo exportar tus chats con Gemini
- Configuración de seguimiento persistente en el panel Rendimiento
- Cómo filtrar solicitudes de red protegidas por IP
- La pestaña Elements > Layout agrega compatibilidad con el diseño de mampostería
- Lighthouse 12.8.2
- Otros aspectos destacados
- Depura más estadísticas con Gemini
- Emula el encabezado "Save-Data" en "Condiciones de red"
- Cómo ver el estado de Baseline en la información sobre herramientas de una propiedad de CSS
- Cómo anular los factores de forma en las sugerencias de clientes de usuario-agente
- Lighthouse 12.8.0
- Otros aspectos destacados
- Herramientas para desarrolladores de Chrome más confiables y productivas
- Cómo subir imágenes en la asistencia de IA para el diseño
- Cómo agregar encabezados de solicitud a la tabla en Red
- Consulta los momentos destacados de Google I/O 2025
- Otros aspectos destacados
- Mejoras en el panel Rendimiento
- Orígenes conectados previamente en la estadística "Árbol de dependencias de red"
- Tiempos de respuesta y redireccionamiento del servidor en la estadística "Latencia de solicitud de documento"
- Redireccionamientos en el resumen de solicitudes de red
- Se redujo el ruido en el registro de rendimiento
- Se dejó de usar "Inhabilitar las muestras de JavaScript"
- Parámetro de precisión de la ubicación geográfica en Sensors
- Mejoras en el panel Elementos
- Depura valores de CSS complejos con mayor facilidad
- Compatibilidad con@function en Elements > Styles
- Mejoras en el panel de red
- Filtro has-request-header
- Sockets directos en apps web aisladas
- Otros aspectos destacados
- Accesibilidad
- Edición de Google I/O 2025
- Cómo modificar y guardar cambios de CSS en tu espacio de trabajo con Gemini
- Conecta una carpeta del espacio de trabajo y guarda los cambios en tus archivos fuente
- Pregúntale a Gemini sobre las estadísticas de rendimiento
- Anota los resultados del rendimiento con Gemini
- Agrega capturas de pantalla a tus chats con Gemini
- Nuevos análisis en el panel Rendimiento
- JavaScript duplicado
- JavaScript heredado
- Las especulaciones ahora admiten etiquetas de reglas
- Lighthouse 12.6.0
- Otros aspectos destacados
- Accesibilidad
- Mejoras en el panel Rendimiento
- Nuevos estadísticas de rendimiento
- Haz clic para destacar
- Tiempos del servidor en el resumen de solicitudes de red
- Cómo filtrar cookies en "Privacidad y seguridad"
- Tamaños en unidades de kB en tablas de todos los paneles
- La función de autocompletar admite corner-shape y corner-*-shape en Elements > Styles
- Experimental: Destaca problemas con elementos y atributos en el DOM
- Lighthouse 12.5.0
- Otros aspectos destacados
- Mejoras en el panel Rendimiento
- Vínculos de origen y de secuencia de comandos para las llamadas a perfiles y funciones en Rendimiento
- Compatibilidad con datos de campo de LCP por fase
- Estadística del árbol de dependencias de red
- Duración en lugar de tiempo total y propio en Resumen
- Destacado de la pila más pesada
- Se mejoraron los estados vacíos de varios paneles
- Vista de árbol de accesibilidad en Elements
- Lighthouse 12.4.0
- Otros aspectos destacados
- Panel de privacidad y seguridad
- Mejoras en el panel Rendimiento
- Ajustes predeterminados de limitación de la CPU calibrados
- Selecciona diferentes eventos de rendimiento en el mismo chat de IA
- Destacado de datos propios y de terceros en Rendimiento
- Datos de campo en las sugerencias y las estadísticas de la herramienta de marcadores
- Estadística de reprocesamiento forzado
- Estadística "Optimiza el tamaño del DOM"
- Extiende el registro de rendimiento con console.timeStamp
- Mejoras en el panel Elementos
- Valores en tiempo real de los estilos animados
- Compatibilidad con la seudoclase :open y varios seudoelementos
- Copiar todos los mensajes de la consola
- Unidades de bytes en el panel Memoria
- Otros aspectos destacados
- Historial de chat persistente de IA
- Mejoras en el panel Rendimiento
- Estadística de publicación de imágenes
- Navegación con teclado clásica y moderna
- Cómo ignorar los lenguajes de secuencias de comandos irrelevantes en el gráfico de llamas
- Marcador de línea de tiempo y resaltado de rango al colocar el cursor
- Configuración de limitación recomendada
- Marcadores de tiempos en una superposición
- Seguimiento de pila de llamadas de JS en Summary
- Se movió la configuración de insignias al menú en Elementos
- Nuevo panel "Novedades"
- Lighthouse 12.3.0
- Otros aspectos destacados
- Cómo depurar solicitudes de red, archivos fuente y registros de rendimiento con Gemini
- Cómo ver el historial de chat de IA
- Administra el almacenamiento de extensiones en Application > Storage
- Mejoras en el rendimiento
- Fases de interacción en las métricas en vivo
- Información de bloqueo de la renderización en la pestaña Resumen
- Compatibilidad con los eventos de scheduler.postTask y sus flechas de iniciador
- Mejoras en el panel Animations y en la pestaña Elements > Styles
- Cómo saltar de Elements > Styles a Animations
- Actualizaciones en tiempo real en la pestaña Calculado
- Emulación de la presión de procesamiento en Sensors
- Objetos JS con el mismo nombre agrupados por fuente en el panel Memoria
- Nuevo aspecto de la configuración
- El panel Estadísticas de rendimiento está obsoleto y se quitó de Herramientas para desarrolladores
- Otros aspectos destacados
- Depura CSS con Gemini
- Controla las funciones potenciadas por IA en una pestaña de configuración dedicada
- Mejoras en el panel Rendimiento