Novedades de las Herramientas para desarrolladores en Chrome 139

Sofia Emelianova

Herramientas para desarrolladores de Chrome más confiables y productivas

En esta versión, las Herramientas para desarrolladores de Chrome priorizaron la excelencia del producto. Esto implicó abordar una amplia variedad de problemas conocidos, desde fallas visuales de larga data, problemas de usabilidad e incoherencias en el diseño hasta problemas de rendimiento y funcionales. En general, redujimos la cantidad de problemas abiertos en un 27%.

Finalmente, abordamos algunos problemas que existían desde hace años, pero también realizamos mejoras en funciones más nuevas, por ejemplo, en el panel de Rendimiento y la asistencia de IA. El resultado es una experiencia del desarrollador significativamente mejorada en todos los aspectos.

Entre bastidores, realizamos un gran esfuerzo para mejorar nuestra cobertura de pruebas, investigamos fallas complejas en las pruebas, migramos las pruebas a bases más sólidas y resolvimos errores que descubrimos en el camino. Logramos reducir la cantidad de problemas relacionados con las pruebas en un 54%.

Esperamos que experimentes estas numerosas correcciones y mejoras sutiles en varios paneles, lo que hará que tus flujos de trabajo diarios de depuración y desarrollo sean más fluidos, confiables y productivos.

Cómo subir imágenes en la asistencia de IA para el diseño

Para proporcionar contexto visual adicional a tus instrucciones, ahora no solo puedes tomar capturas de pantalla automáticas, sino también subir imágenes arbitrarias a tus chats con Gemini en el panel de asistencia de IA.

Inicia tu conversación desde el panel Elements. Para ello, selecciona un elemento DOM y haz clic en Ask AI, de modo que el elemento se especifique como contexto de conversación. Luego, haz clic en add_photo_alternate Agregar imagen en el campo de entrada.

Agrega encabezados de solicitud a la tabla en Red

En el panel Network, ahora puedes hacer clic con el botón derecho en el nombre de una columna de la tabla de solicitudes y seleccionar varios encabezados de solicitud para agregarlos como columnas.

Problema de Chromium: 397481040.

Consulta los temas destacados de Google I/O 2025

Si aún no lo hiciste, prueba las nuevas funciones principales de las Herramientas para desarrolladores de Chrome que se destacaron en Google I/O 2025, incluidas las siguientes:

• Fuentes: Conecta una carpeta del espacio de trabajo y guarda los cambios en tus archivos fuente.
• Potenciadas por Gemini:
  • Modifica y guarda sin problemas los cambios de CSS en tu lugar de trabajo.
  • Haz preguntas sobre las estadísticas de rendimiento.
  • Anota automáticamente los hallazgos de rendimiento.
  • Agrega capturas de pantalla a tus chats con IA.

Además, consulta las nuevas estadísticas de rendimiento: JavaScript duplicado y JavaScript heredado.

Otros aspectos destacados

Estas son algunas de las muchas correcciones y mejoras destacadas de esta versión:

• Aplicación: Ahora hay un diálogo de confirmación para borrar los almacenes de objetos de IndexedDB porque es una acción irreversible (crbug.com/326987147).
• Fuentes: Los distintivos de puntos de registro y de puntos de interrupción condicional junto a las líneas de código ahora muestran una sugerencia sobre el mensaje de registro o la condición correspondientes cuando se colocan sobre ellos (crbug.com/40266230).

• Rendimiento:

  • La estadística Causantes de cambios de diseño ahora muestra vínculos a imágenes sin tamaño (crbug.com/416449602).
  • La sugerencia de descubrimiento de solicitudes de LCP ahora muestra la demora en la carga de la imagen después del punto de partida más temprano.
  • Limitación: Se corrigió el formato desactualizado de la configuración de limitación que algunos usuarios tenían almacenada de forma local.
  • Registro de eventos: Se mejoró la velocidad del filtrado (crbug.com/40783421).

• Animaciones: Se dejaron de usar las capturas de pantalla de vista previa porque hacer clic para obtener una vista previa de un grupo de animación proporciona una experiencia similar y mejor (crbug.com/330179643).

• Accesibilidad:

  • Se agregaron etiquetas aria a la barra lateral Fuentes > Puntos de interrupción del DOM cuando está presente.
  • Se corrigió la navegación con el teclado Mayúsculas + Tab en el campo de texto Live expression de la consola (crbug.com/408398435, crbug.com/420344137).
  • Configuración ahora admite combinaciones de teclas para acercar, alejar y restablecer: Cmd/Ctrl + +/-/0 (crbug.com/41484555).
  • Elements > Styles: Los íconos de sugerencias y advertencias de CSS (crbug.com/40706851) y el reloj de ángulo ahora se pueden enfocar con el teclado (crbug.com/401212624, crbug.com/401213524).

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