Novedades de DevTools en Chrome 131

Sofia Emelianova
Sofia Emelianova

Cómo depurar CSS con Gemini

Chrome DevTools obtiene 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 Pedir a la IA o haz clic en el botón correspondiente junto al elemento. DevTools abrirá el nuevo panel Asistencia de IA.

La opción de menú "Ask AI" y el botón correspondiente

En el nuevo panel, se te pedirá que actives el parámetro de configuración correspondiente. Asegúrate de cumplir con los requisitos, activa el botón de activació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 DevTools espera recibir tus comentarios. No dudes en dejar un comentario en crbug.com/364805393.

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

Ahora puedes administrar todas las funciones de IA en un solo lugar: la nueva pestaña Configuración > Innovaciones de IA. En ella, se enumeran consideraciones importantes, se describen las funciones de IA y se 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. Por lo tanto, las estadísticas de Play Console lanzadas anteriormente, junto con la asistencia de IA para el diseño, están a un clic de distancia.

Si accediste a 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 seguimiento. 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 el panel Estadísticas de rendimiento que está a punto de quedar obsoleto.

El objetivo de la pestaña Estadísticas es proporcionar un análisis guiado y sugerir estadísticas prácticas sobre los problemas de rendimiento que pueden ralentizar tu sitio web. Para utilizar las estadísticas, abre la pestaña en la barra lateral izquierda del panel Rendimiento, expande las diferentes categorías y 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 con ellas en relación con otras herramientas, como PageSpeed Insights y Lighthouse. No dudes en dejar tus comentarios en crbug.com/371170842.

Detecta los cambios de diseño excesivos con mayor facilidad

El segmento Cambios de diseño tiene un nuevo aspecto. Los cambios de diseño ahora se marcan con diamantes púrpura (más visibles) y se agrupan en grupos 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 la pista.
  • 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.

Error de Chromium: 41006273.

La simultaneidad del hardware se traslada a los sensores

El parámetro de configuración Hardware concurrency se mueve del panel Rendimiento a un lugar más apropiado: el panel Sensores.

Antes y después de mover el parámetro de configuración "Hardware concurrency" al panel Sensores.

Error 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 Console ahora detectan, ignoran, contraen y (si se expanden) anulan en gris correctamente los fotogramas que provienen de archivos de la lista de elementos ignorados. Anteriormente, no se atenuaba el nombre de la función 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 y Guardar como… el registro de la consola, 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 CSS.

Problemas de Chromium: 40280717, 40706051, 40501131.

Auditorías de Lighthouse para páginas que no son HTTP en los modos período y resumen

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 tiene 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 Espacio para abrir el menú contextual.
  • En Rendimiento, la pestaña Estadísticas de la barra lateral izquierda es accesible con el teclado y se puede recorrer con las teclas de tabulación.

Error de Chromium: 372411090.

Otros aspectos destacados

Estas son algunas de las correcciones y mejoras más importantes de esta versión:

  • La configuración de limitación ahora se sincroniza correctamente entre los paneles Rendimiento y Red (370332090).
  • Application > Background services > Speculative loads > Rules ahora tiene un botón de formato {} similar al de Sources > 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 de 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 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 plataformas web de vanguardia y te ayudan a encontrar problemas en tu sitio antes que tus usuarios.

Comunícate con el equipo de Chrome DevTools

Usa las siguientes opciones para hablar sobre las funciones nuevas, las actualizaciones o cualquier otro tema relacionado con DevTools.

Novedades de DevTools

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