Novedades de DevTools en Chrome 137

Sofia Emelianova
Sofia Emelianova

Edición de Google I/O 2025

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

Para obtener información sobre las nuevas funciones interesantes, consulta los siguientes recursos:

Además, no te olvides de sintonizar la sesión de novedades de la Web de Rachel Andrew el 20 de mayo de 2025 a las 4:30 p.m. (hora del Pacífico).

Mira nuestro video más reciente para obtener una descripción general de nuestros últimos aspectos destacados:

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 lugar de trabajo conectada, guardar los cambios en los archivos de origen de tu computadora.

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

Con una carpeta de Workspace conectada, en el panel Elementos, haz clic en Preguntar a la IA, pídele a Gemini que modifique el CSS, haz clic en Continuar para probar los cambios en vivo y, luego, expande Cambios no guardados, haz clic en Aplicar a Workspace, revisa la diferencia y haz clic en Guardar todo.

Conecta una carpeta de lugar de trabajo y guarda los cambios en tus archivos de origen

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

Descubre cómo funciona con JavaScript:

Error de Chromium: 404170628.

Preguntarle a Gemini sobre las estadísticas de rendimiento

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

  • LCP por fase
  • Descubrimiento de solicitudes de LCP
  • Cómo renderizar solicitudes de bloqueo
  • Causantes del cambio de diseño
  • Latencia de solicitud de documentos

Antes y después de agregar el botón "Ask AI" a una estadística en el panel Rendimiento.

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

Anota los resultados de rendimiento con Gemini

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

Haz doble clic en un evento de la pista Principal y, luego, haz clic en Generar etiqueta junto al campo de entrada. Gemini puede sugerir una etiqueta según el 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 Take screenshot para tomar 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 "Capturar pantalla" al panel "Asistencia de IA".

Nuevas estadísticas en el panel Rendimiento

Esta versión incluye dos estadísticas nuevas en el panel Rendimiento: JavaScript duplicado y JavaScript heredado.

JavaScript duplicado

La nueva opción Rendimiento > Estadísticas > JavaScript duplicado destacará en el seguimiento de red las solicitudes de módulos de JavaScript duplicados grandes 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 opción Rendimiento > Estadísticas > JavaScript heredado destacará en el seguimiento de Red las solicitudes de JavaScript heredado si están presentes en tu página, por ejemplo, polyfills y transformaciones que permiten que los navegadores más antiguos usen 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

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

La regla anterior y posterior al reemplazo establece la URL con una etiqueta.

Error de Chromium: 393408589.

Lighthouse 12.6.0

El panel de Lighthouse ahora ejecuta Lighthouse 12.6.0.

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

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

Consulta también la lista completa de cambios.

Para conocer los aspectos básicos del uso del panel Lighthouse en DevTools, consulta Lighthouse: Optimiza la velocidad del sitio web.

Error de Chromium: 40543651.

Contenido destacado misceláneo

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 de servidor.
  • Ahora puedes anular la selección de filas en tablas con Cmd/Ctrl + clic (problema de Chromium: 409474445).
  • La opción Rendimiento > Estadísticas > Usar tiempos de almacenamiento en 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 seguimiento ahora son más visibles.
  • Elementos: Ahora puedes activar o desactivar la vista de árbol de accesibilidad de página completa con el acceso directo A (problema de Chromium: 40888478).
  • Los lectores de pantalla ahora anuncian, entre otras cosas, lo siguiente:

    • "Se copió en el portapapeles" cuando copias de bloques de código.
    • "Aplicar a Workspace" cuando aplicas cambios a tu lugar de trabajo en el chat de asistencia de IA
    • "Generar 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.
    • Consulta los ahorros estimados para las estadísticas relevantes 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 vista previa 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 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 DevTools.

Novedades de DevTools

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