Novedades de DevTools en Chrome 131

Sofia Emelianova
Sofia Emelianova
GitHub

Depura CSS con Gemini

Las Herramientas para desarrolladores de Chrome cuentan con el nuevo panel experimental de asistencia de IA, en el que puedes chatear con Gemini y obtener ayuda para depurar tu CSS.

Pruébalo ahora. En el panel Elementos, haz clic con el botón derecho en un elemento y selecciona Ask AI o haz clic en el botón correspondiente junto al elemento. DevTools abrirá el nuevo panel Asistencia de IA.

La opción del menú “Preguntar a la IA” y el botón correspondiente.

El nuevo panel te pedirá que actives el parámetro de configuración correspondiente. Asegúrate de cumplir con los Requisitos, activa el botón de configuración y vuelve al panel Asistencia de IA. Se tomará el elemento que seleccionaste como contexto. Escribe tu pregunta sobre el elemento.

El nuevo panel de asistencia de IA responde una instrucción.

Para obtener más información sobre cómo usar mejor el nuevo panel, consulta 5 funciones geniales que puedes hacer con la asistencia de IA de DevTools y Asistencia de IA para aplicar diseño.

El equipo de Herramientas para desarrolladores espera recibir tus comentarios. Puedes dejarla en crbug.com/364805393.

Controla las funciones basadas en IA en una pestaña de configuración dedicada

Ahora puedes administrar todas las funciones de IA en un solo lugar: la nueva Configuración > Innovaciones de la IA. Además, enumera consideraciones importantes, describe las funciones basadas en IA y te permite activarlas y desactivarlas de forma individual.

La nueva pestaña Innovaciones de IA.

Para obtener más información, consulta Configuración > Innovaciones de IA.

Las estadísticas de la consola están a un clic de distancia

DevTools ya no requiere que la sincronización de configuración esté activada para las funciones de IA. De este modo, puedes acceder a las Estadísticas de Console lanzadas anteriormente, junto con la asistencia de IA para diseñar, a solo un clic.

Si accediste a tu cuenta en Chrome, activa estas funciones en Configuración > Innovaciones de IA y listo.

Mejoras en el panel de rendimiento

Esta versión incluye varias mejoras en el panel Rendimiento.

Anota y comparte los resultados del rendimiento

El panel Rendimiento tiene la nueva pestaña Anotaciones en una barra lateral expandible a la izquierda que optimiza el proceso de creación de notas para la exploración de seguimiento y la colaboración cuando se comparten los resultados de rendimiento.

Ahora puedes etiquetar y conectar eventos con flechas y destacar intervalos de tiempo directamente en el registro. Luego, puedes guardar, compartir y subir los seguimientos con anotaciones al panel Rendimiento.

La nueva pestaña de anotaciones en la barra lateral izquierda y el evento, el rango y la conexión anotados

Obtén estadísticas de rendimiento directamente en el panel Rendimiento

Ahora puedes descubrir estadísticas prácticas en la nueva pestaña Estadísticas de la barra lateral izquierda del panel Rendimiento. Las estadísticas se consolidan a partir del informe de Lighthouse y del panel Estadísticas de rendimiento que está a punto de dar de baja.

El objetivo de la pestaña Estadísticas es proporcionar un análisis guiado y sugerir estadísticas prácticas sobre problemas de rendimiento que podrían ralentizar tu sitio web. Para aprovechar las estadísticas, abre la pestaña ubicada en la barra lateral izquierda del panel Rendimiento, expande diferentes categorías y, luego, coloca el cursor sobre los elementos y haz clic en ellos. El panel Rendimiento destacará los eventos correspondientes en el seguimiento.

El equipo de Herramientas para desarrolladores espera recibir tus comentarios sobre la utilidad de las estadísticas, las formas de mejorarlas y tu experiencia de uso con otras herramientas, como PageSpeed Insights y Lighthouse. No dudes en dejar tus comentarios en crbug.com/371170842.

Detecta con mayor facilidad los cambios excesivos de diseño

El segmento Cambios de diseño tiene un nuevo aspecto. Los cambios de diseño ahora están marcados con diamantes de color púrpura (más visibles) y se agrupan en clústeres según su proximidad en el cronograma. Tanto los turnos como sus clústeres obtienen una tabla organizada con los tiempos, las puntuaciones, los elementos y los posibles culpables en la pestaña Resumen.

Antes y después de una actualización del segmento "Cambios de diseño" y la pestaña "Resumen" reorganizada.

Además, la vista de métricas en vivo obtiene el registro Cambios de diseño con puntuaciones y elementos junto a la pestaña Interacciones.

El antes y el después de agregar el registro "Cambios de diseño" a la vista de métricas en vivo.

Error de Chromium: 369100729.

Cómo detectar animaciones no compuestas

La pista Animaciones ahora muestra información útil sobre las animaciones no compuestas:

  • Asigna nombres a las animaciones según la propiedad CSS correspondiente, si la hay.
  • Marca las animaciones no compuestas con triángulos rojos en el recorrido.
  • Te muestra el motivo del error de composición en la pestaña Resumen.

Las animaciones de nombres antes y después en la pista, que marcan las que no se combinaron y muestran el motivo de la falla

Para obtener más información, consulta Limítate solo a las propiedades del compositor y administra el recuento de capas.

Problema de Chromium: 41006273.

La simultaneidad del hardware se traslada a los sensores

La configuración de Hardware concurrency se mueve del panel Performance a un lugar más apropiado: el panel Sensors.

El antes y el después de mover la configuración “Simultaneidad de hardware” al panel Sensors.

Problema de Chromium: 371463665.

Ignora las secuencias de comandos anónimas y enfócate en tu código en los seguimientos de pila

Los seguimientos de pila en la consola ahora detectan, ignoran, contraen y inhabilitan (si se expanden) correctamente los marcos que provienen de archivos de la lista de elementos ignorados. Anteriormente, el nombre de la función no estaba inhabilitado en el seguimiento expandido.

También puedes activar la nueva Configuración > Lista de elementos ignorados > Secuencias de comandos anónimas de eval o console para establecer DevTools de modo que ignore las secuencias de comandos anónimas sin URL de origen.

Antes y después de mejorar la lista de elementos ignorados en los seguimientos de pila.

Además, cuando haces clic con el botón derecho en el registro de la consola y en Guardar como..., no se guarda el texto Mostrar más/menos.

Problemas de Chromium: 40279542, 40945570, 345248263.

Elementos > Estilos: Compatibilidad con los modos de escritura sideways-* para superposiciones de cuadrículas y palabras clave de CSS

La pestaña Elementos > Estilos ahora admite lo siguiente:

  • La superposición de cuadrícula en el viewport ahora muestra cuadrículas para los modos de escritura sideways-rl y sideways-lr.
  • Resuelve las palabras clave de CSS. En la práctica, esto significa que, por ejemplo, si inherit es un color, la pestaña Styles muestra un selector de color junto a él. El antes y el después de resolver las palabras clave de todo el CSS.

Problemas de Chromium: 40280717, 40706051, 40501131.

Auditorías de Lighthouse para páginas que no son HTTP en los modos de instantáneas y períodos

Lighthouse ahora puede generar informes para páginas que no son HTTP en los modos de período y de instantánea.

Antes y después de habilitar la auditoría de páginas que no son HTTP en los modos de período y de instantánea

Accesibilidad

Esta versión incluye las siguientes mejoras de accesibilidad:

  • En Sources > Editor, ahora puedes cerrar las pestañas con archivos abiertos enfocándote en el botón X y presionando Intro o Espacio.
  • En Rendimiento, ahora puedes seleccionar una entrada en el seguimiento y presionar la barra espaciadora para abrir el menú contextual.
  • En Rendimiento, se puede acceder a la pestaña Estadísticas de la barra lateral izquierda con el teclado y es posible acceder a ella mediante pestañas.

Error de Chromium: 372411090.

Otros aspectos destacados

Estas son algunas correcciones y mejoras notables en esta versión:

  • La configuración de limitación ahora se sincroniza correctamente entre los paneles Rendimiento y Red (370332090).
  • Aplicación > Servicios en segundo plano > Cargas especulativas > Reglas ahora tiene un botón de impresión {} similar a Fuentes > Editor (40279147).
  • Expresiones en vivo: Ahora, presionar Tab después de seleccionar una opción de autocompletado sale del campo de edición en lugar de indentar el texto (349939551).
  • Elementos > Estilos: anchor() y anchor-size() admiten una nueva sintaxis en la que puedes reordenar los argumentos y omitir la dirección anchor-size() (343516786). Además, se corrigió la renderización de resguardo (365802559).
  • Red: Se corrigieron las vistas previas de GraphQL (369931288).
  • Rendimiento: Ahora se informa el progreso incremental de la carga y el procesamiento de los seguimientos.
  • WebAuthn: Ahora, actualiza de forma dinámica las credenciales modificadas por los métodos signal* (368467199).
  • WebAssembly: Ahora, una advertencia en Console te informa si hay varios símbolos de depuración disponibles para un módulo de WebAssembly y cuál se está usando (40879198, 369515221).
  • Se quita la superposición de Métricas web esenciales de la pestaña Renderización 328487897.
  • Las funciones basadas en IA generativa ahora no requieren la sincronización de la configuración de Chrome.

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, te permiten probar API de plataformas web de vanguardia y te ayudan a encontrar problemas en tu sitio antes que los usuarios.

Comunícate con el equipo de Chrome DevTools

Usa las siguientes opciones para hablar sobre las nuevas funciones, actualizaciones o cualquier otro aspecto relacionado con Herramientas para desarrolladores.

Novedades de DevTools

Una lista de todo lo que se analizó en la serie Novedades de DevTools.