Novedades de DevTools en Chrome 131

Depura CSS con Gemini

Las Herramientas para desarrolladores de Chrome incluyen 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 Elements, 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. Las Herramientas para desarrolladores abrirán el nuevo panel de asistencia de IA.

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 configuración y vuelve al panel de Asistencia de IA. Tomará el elemento que seleccionaste como contexto. Escribe tu pregunta sobre el elemento.

Para obtener más información sobre cómo usar mejor el nuevo panel, consulta 5 Cool Things To Do with DevTools AI Assistance y AI assistance for styling.

El equipo de Herramientas para desarrolladores espera recibir tus comentarios. No dudes en dejarlo en crbug.com/364805393.

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

Ahora puedes administrar todas las funciones basadas en IA en un solo lugar: la nueva pestaña configuración Configuración > Innovaciones basadas en IA. En ella, se enumeran consideraciones importantes, se describen las funciones basadas en IA y se te permite activarlas y desactivarlas de forma individual.

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

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

Las Herramientas para desarrolladores ya no requieren que se active la sincronización de la configuración para las funciones basadas en IA. Por lo tanto, las Estadísticas de la consola 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 basadas en IA y listo.

Mejoras en el panel de rendimiento

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

Anota y comparte los hallazgos sobre el rendimiento

El panel Rendimiento incluye 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 y la colaboración de registros cuando se comparten los resultados del rendimiento.

Ahora puedes etiquetar y conectar eventos con flechas, y destacar rangos de tiempo directamente en el registro. Luego, puedes guardar, compartir y volver a subir los registros anotados al panel Rendimiento.

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 análisis guiados y sugerir estadísticas prácticas sobre los problemas de rendimiento que pueden ralentizar tu sitio web. Para aprovechar las estadísticas, abre la pestaña en la barra lateral izquierda del panel Rendimiento, expande diferentes categorías y coloca el cursor sobre los elementos y haz clic en ellos. En el panel Rendimiento, se destacarán los eventos correspondientes en el registro.

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

Identifica los cambios de diseño excesivos con mayor facilidad

El registro de Cambios de diseño tiene un nuevo aspecto. Los cambios de diseño ahora están marcados con diamantes morados (más visibles) y se agrupan en clústeres según su proximidad en la línea de tiempo. Tanto los cambios como sus clústeres obtienen una tabla organizada con tiempos, puntuaciones, elementos y posibles causas en la pestaña Resumen.

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

Error de Chromium: 369100729.

Cómo detectar las animaciones no compuestas

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

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

Para obtener más información, consulta Cómo usar solo propiedades del compositor y administrar la cantidad de capas.

Error de Chromium: 41006273.

La simultaneidad del hardware se traslada a Sensors

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

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 la consola ahora detectan, ignoran, contraen y (si se expanden) muestran en gris los marcos que provienen de archivos incluidos en la lista de ignorados. Anteriormente, no se mostraba el nombre de la función en gris en el registro expandido.

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

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

Problemas de Chromium: 40279542, 40945570, 345248263.

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

La pestaña Elements > Styles ahora admite lo siguiente:

• La superposición de cuadrícula en la ventana gráfica ahora muestra cuadrículas para los modos de escritura sideways-rl y sideways-lr.
• Resuelve palabras clave de CSS. En la práctica, significa que, por ejemplo, si inherit es un color, la pestaña Styles muestra un selector de color junto a él.

Problemas de Chromium: 40280717, 40706051, 40501131.

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

Ahora Lighthouse puede generar informes para páginas que no son HTTP en los modos de lapso y de instantánea.

Accesibilidad

Esta versión incluye las siguientes mejoras de accesibilidad:

• En Fuentes > Editor, ahora se pueden cerrar las pestañas con archivos abiertos enfocándose en el botón X y presionando Intro o Espacio.
• En Rendimiento, ahora puedes seleccionar una entrada en el registro y presionar Espacio 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 se puede navegar por ella con la tecla Tab.

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 regulación ahora se sincroniza correctamente entre los paneles Rendimiento y Red (370332090).
• Application > Background services > Speculative loads > Rules ahora tiene un botón de impresión legible {} similar a Sources > Editor (40279147).
• Expresiones en vivo: Si presionas Tab después de seleccionar una opción de autocompletar, ahora se sale del campo de edición en lugar de agregar una sangría al texto (349939551).
• Elements > Styles: anchor() y anchor-size() admiten una nueva sintaxis en la que puedes reordenar 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 informa el progreso incremental de la carga y el procesamiento de registros.
• WebAuthn: Ahora actualiza de forma dinámica las credenciales modificadas por los métodos signal* (368467199).
• WebAssembly: Ahora, una advertencia en la consola 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 quitó la superposición de Métricas web esenciales de la pestaña Rendering 328487897.
• Las funciones potenciadas por IA generativa ya 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 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 more_vert 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