Novedades de DevTools en Chrome 137

Sofia Emelianova
Sofia Emelianova
GitHub

Edición de Google I/O 2025

Las Herramientas para desarrolladores de Chrome tendrán una gran presencia en el Google I/O de este año. Habrá una combinación de sesiones en vivo y grabadas.

Para obtener información sobre las nuevas y emocionantes funciones, sintoniza los siguientes eventos:

Además, no olvides sintonizar la sesión de novedades en la Web de Rachel Andrew el 20 de mayo de 2025 a las 4:30 p.m. (PT).

Mira nuestro video más reciente para obtener una descripción general rápida de los momentos destacados más recientes:

Modifica y guarda los cambios de CSS en tu espacio de trabajo con Gemini

Con unos pocos clics, ahora puedes hacer que Gemini modifique y corrija el CSS por ti y, con una carpeta de espacio de trabajo conectada, guardar los cambios en los archivos fuente de tu computadora.

Los espacios de trabajo automáticos son una función experimental. Puedes conectar tu carpeta de origen existente o probar una demostración.

Con una carpeta de espacio de trabajo conectada, en el panel Elements, haz clic en Ask AI, pídele a Gemini que modifique el CSS, haz clic en Continue para probar los cambios en vivo, luego expande Unsaved changes, haz clic en Apply to workspace, revisa la diferencia y haz clic en Save all.

Conecta una carpeta del espacio de trabajo y guarda los cambios en tus archivos fuente

Ahora puedes conectar automáticamente una carpeta del espacio de trabajo (o de forma manual) para permitir que las Herramientas para desarrolladores guarden los cambios de JavaScript, HTML y CSS en los archivos fuente almacenados en tu computadora.

Consulta cómo funciona con JavaScript:

Error de Chromium: 404170628.

Pregúntale a Gemini sobre las estadísticas de rendimiento

Con un solo clic, ahora puedes iniciar un chat con Gemini para investigar las siguientes estadísticas de rendimiento y tomar medidas en función de ellas:

  • LCP por fase
  • Descubrimiento de solicitudes de LCP
  • Solicitudes de bloqueo de renderización
  • Causantes del cambio de diseño
  • Latencia de solicitud de documentos

Antes y después de agregar el botón "Pregúntale a la IA" a una estadística en el panel de rendimiento.

No dudes en dejar tus comentarios sobre la función en crbug.com/371170842.

Anota los hallazgos de rendimiento con Gemini

Ahora puedes pedirle a Gemini que genere anotaciones sobre los eventos en el registro de rendimiento.

Haz doble clic en un evento en la pista Principal y, luego, haz clic en Generar etiqueta junto al campo de entrada. Gemini puede sugerir una etiqueta según el registro de seguimiento de pila y el contexto.

Agrega capturas de pantalla a tus chats con Gemini

En el panel Asistencia de IA, ahora puedes hacer clic en el botón Tomar captura de pantalla para capturar una captura de pantalla de la página y enviarla a tu chat con Gemini.

Puedes usar capturas de pantalla para proporcionar contexto visual adicional a tus instrucciones, por ejemplo, para verificar si todos los botones visibles tienen el mismo espaciado.

Antes y después de agregar el botón "Hacer captura de pantalla" al panel "Asistencia de IA".

Nuevas estadísticas en el panel Rendimiento

Esta versión incorpora dos estadísticas nuevas al panel Rendimiento: JavaScript duplicado y JavaScript heredado.

JavaScript duplicado

La nueva sección Rendimiento > Estadísticas > JavaScript duplicado destacará en el registro de Red las solicitudes de módulos grandes de JavaScript duplicados en tus paquetes si están presentes en tu página.

La estadística "JavaScript duplicado" en el panel Rendimiento

También puedes hacer clic en Ver mapa de árbol en la estadística para explorar las dependencias de JavaScript.

JavaScript heredado

La nueva sección Rendimiento > Estadísticas > JavaScript heredado destacará en el segmento Red las solicitudes de JavaScript heredado si están presentes en tu página, por ejemplo, los polyfills y las transformaciones que permiten que los navegadores más antiguos utilicen nuevas funciones de JavaScript. Sin embargo, la mayoría no es necesaria en los navegadores modernos.

La estadística "JavaScript heredado" en el panel Rendimiento

Las especulaciones ahora admiten etiquetas de reglas

Ahora, en Aplicación > Cargas especulativas, se muestran etiquetas en lugar de URLs para los conjuntos de reglas, si hay etiquetas presentes.

Antes y después de reemplazar la URL del conjunto de reglas por una etiqueta.

Error de Chromium: 393408589.

Lighthouse 12.6.0

El panel Lighthouse ahora ejecuta Lighthouse 12.6.0.

En particular, en esta versión, Lighthouse se traslada a las auditorías de estadísticas de rendimiento. En la categoría Rendimiento del informe de Lighthouse, ahora puedes Probar estadísticas.

Antes y después de agregar la opción para cambiar a estadísticas en un informe de Lighthouse.

Consulta también la lista completa de cambios.

Para conocer los conceptos básicos del uso del panel Lighthouse en las Herramientas para desarrolladores, consulta Lighthouse: Optimiza la velocidad del sitio web.

Error de Chromium: 40543651.

Otros aspectos destacados

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

  • Red: Se agregó el análisis de formatos conocidos de tiempos del servidor.
  • Ahora puedes anular la selección de filas en tablas con Cmd/Ctrl + clic (problema de Chromium: 409474445).
  • Rendimiento > Estadísticas > Usa tiempos de vida de caché eficientes ahora ignora los recursos con un TTL igual o superior a 30 días.

Accesibilidad

Esta versión incluye las siguientes mejoras de accesibilidad:

  • Rendimiento: Las flechas del iniciador en el registro ahora son más visibles.
  • Elementos: Ahora puedes activar o desactivar la vista del árbol de accesibilidad de página completa con el acceso directo A (problema de Chromium: 40888478).

  • Ahora, los lectores de pantalla anuncian, entre otras cosas, lo siguiente:

    • Aparece el mensaje "Se copió en el portapapeles" cuando copias desde bloques de código.
    • "Aplicando al espacio de trabajo" cuando aplicas cambios a tu espacio de trabajo en el chat de asistencia de IA
    • "Generando etiqueta" cuando le pides a la IA que la genere en Rendimiento > Anotaciones
    • Ten en cuenta que hay instrucciones sugeridas en el chat de asistencia de IA.
    • Lee los ahorros estimados para las estadísticas pertinentes en Rendimiento > Estadísticas.

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.

Novedades de Herramientas para desarrolladores

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