Novedades de DevTools en Chrome 131

Sofia Emelianova
Sofia Emelianova
GitHub

Cómo depurar 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.

La opción del menú "Pregúntale a la IA" 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 configuración y vuelve al panel de Asistencia de IA. Tomará el elemento que seleccionaste como contexto. Escribe tu pregunta sobre el elemento.

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

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 Asistencia de IA para aplicar diseño.

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 > 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.

La nueva pestaña de innovaciones en IA

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.

La nueva pestaña de anotaciones en la barra lateral de la 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 Insights 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.

El antes y el después de una actualización en el segmento "Cambios de diseño" y la pestaña "Resumen" reorganizada.

Además, la vista de métricas en vivo incluye 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 las animaciones no compuestas

El segmento 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.

Las animaciones de nombres antes y después en el segmento, que marcan los que no se compusieron y muestran el motivo del error.

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.

El antes y el después de mover el parámetro de configuración "Simultaneidad de hardware" al panel Sensores.

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

También puedes activar la nueva Configuración > Lista de ignorados > 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.

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

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 superposiciones de cuadrícula y 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. Las palabras clave de CSS antes y después de la resolución.

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.

El antes y el después de habilitar la auditoría para una página que no es HTTP en los modos de período 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 destacadas 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 {} 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 se 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, en la consola, se muestra una advertencia 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 analizar las nuevas funciones, las actualizaciones o cualquier otro tema relacionado con las Herramientas para desarrolladores.

Novedades de Herramientas para desarrolladores

Una lista de todo lo que se abordó en la serie Novedades de las Herramientas para desarrolladores