Novedades de Herramientas para desarrolladores: Chrome 128

Las estadísticas de Gemini de la consola se lanzarán en la mayoría de los países europeos

Esta versión ofrece compatibilidad con las estadísticas de la consola de Gemini en la mayoría de los países europeos.

Si te encuentras en uno de esos países, ahora puedes pedirle a Gemini que proporcione estadísticas directamente en Console para que puedas comprender mejor los errores y las advertencias.

Actualizaciones del panel de rendimiento

Esta actualización incluye algunas mejoras en el panel Rendimiento.

Itinerario de red mejorada

Se mejoró el segmento Red en el panel Rendimiento para mostrar información fundamental de antemano, por ejemplo, una duración más detallada y un árbol de iniciador de red, y para proporcionar mayor claridad en los indicadores visuales y los colores. Por lo tanto, ya no tienes que alternar entre el panel Red y la pestaña Rendimiento > Resumen. Además, si aún necesitas cambiar al panel Red, lo hicimos más fácil y rápido.

La pista Network ahora hace lo siguiente:

• Muestra una leyenda de colores para los tipos de solicitudes.
• Marca las solicitudes de bloqueo de renderización con triángulos rojos en la esquina superior derecha.
• Muestra el iniciador de la solicitud cuando se selecciona con una flecha. Esto te ayuda a comprender el árbol de iniciadores de red que antes solo estaba disponible en el panel Red.
• Cuando se coloca el cursor sobre un elemento, ahora se muestra una información de tiempo estructurada en la información sobre herramientas, incluido el estado de bloqueo de renderización y los cambios de prioridad, si los hay.
• La pestaña Resumen ahora también muestra un desglose de los tiempos en una columna de la derecha.

Además, ahora puedes hacer clic con el botón derecho en la solicitud de la pista o en su URL en la pestaña Resumen y seleccionar Mostrar en el panel de red en el menú desplegable. DevTools te llevará al panel Network y destacará la solicitud que buscas en la tabla.

Cómo personalizar los datos de rendimiento con la API de extensibilidad

Esta versión agrega compatibilidad con los datos de extensiones al panel Rendimiento. Ahora puedes agregar segmentos personalizados con eventos y descripciones de cuadros de herramientas al registro de rendimiento, detalles a la pestaña Resumen y mucho más. Esta función puede ser útil para los desarrolladores de frameworks, bibliotecas y aplicaciones complejas con instrumentación personalizada.

Consulta un ejemplo de un segmento personalizado en esta página de demostración. En Rendimiento > Configuración de captura, activa check_box Datos de extensión. Inicia una grabación de rendimiento, haz clic en Add new Corgi en la página de demostración y, luego, detén la grabación. Verás un segmento personalizado en el registro que contiene eventos con detalles y cuadros de herramientas personalizados en la pestaña Resumen.

En resumen, para extender los datos de rendimiento, pasa una estructura específica a los parámetros measureOption.detail o markOption.detail de las llamadas a la API de performance.measure() o performance.mark().

Detalles en la pista de tiempos

Si eres un desarrollador web que usa la parte de User Timing de la API de Performance para agregar entradas al segmento Timings, ahora puedes ver tus detalles arbitrarios en la pestaña Resumen para los eventos mark y measure y sus marcas de tiempo.

Error de Chromium: 345418915.

Copia todas las solicitudes que aparecen en el panel Network

En lugar de copiar todo el registro de red, el panel Red ahora te permite aplicar filtros y copiar solo las solicitudes que aparecen en la lista.

Snapshots de montón más rápidas con etiquetas HTML nombradas y menos desorden

Las instantáneas del montón en el panel Memoria son aún más rápidas, ahora tienen objetos agrupados por etiquetas HTML con nombre, se ajustan mejor a la semántica del lenguaje JavaScript, ya que muestran menos objetos internos y siempre incluyen valores numéricos.

Se aceleró el rendimiento de la configuración check_box Include numerical values in capture, se activó de forma predeterminada y se quitó del panel Memory.

Para incluir objetos internos en la instantánea de forma manual, primero activa settings Settings > Experiments > check_box Show option to expose internals in heap snapshots y, luego, activa check_box Expose internals (...) en el panel Memory.

Problemas de Chromium: 41490040, 343341610 y 42203857.

Abre el panel Animaciones para capturar animaciones y editar @keyframes en vivo

El panel Animations ahora hace lo siguiente:

• Captura las animaciones que ya están en curso cuando abres el panel, por lo que no tienes que actualizar la página para capturarlas.
• Admite la edición en vivo de @keyframes. En otras palabras, actualiza la animación capturada a medida que editas la sección @keyframes en Elementos > Estilos.

Mira ambas funciones en acción en el siguiente video.

Problema de Chromium: 352718055.

Lighthouse 12.1.0

El panel de Lighthouse ahora ejecuta Lighthouse 12.1.0.

Esta actualización incluye varios cambios, como la eliminación de la métrica anterior de primer procesamiento de imagen con significado (FMP) en favor del procesamiento de imagen con contenido más grande (LCP). Consulta 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: 772558.

Accesibilidad

Esta versión tiene las siguientes mejoras de accesibilidad:

• Si presionas Tab después de la finalización automática en el campo de edición de expresiones en vivo, el enfoque se moverá al siguiente punto de enfoque. Anteriormente, se aplicaba una sangría al texto.
• Si haces clic en un dispositivo de cambio de tamaño, se enfocará en él, de modo que puedas moverlo con las teclas de flecha hacia la derecha y la izquierda.
• Un lector de pantalla ahora anuncia el campo de edición Agregar expresión de vigilancia en Fuentes y Borrar expresión de vigilancia ahora se puede ver claramente cuando se navega con un teclado.

Problemas de Chromium: 349939551, 343942719, 349334243, 349428374.

Otros aspectos destacados

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

• Rendimiento:
  • Pista Network: Se agregaron eventos de conexión de WebSocket 331351979.
  • El panel Rendimiento ahora acerca correctamente la actividad del subproceso principal más ocupado 345599356.
  • Se corrigió un error con la carga de tipos de archivos de registro incorrectos, ahora se evita subir cualquier tipo, excepto .json o .gz correctos 349864878.
• Elementos > Estilos:
  • El menú desplegable de unidades en los valores de la propiedad de longitud dejó de estar disponible 41495618.
  • Se corrigió la resolución de propiedades activas para reglas de anidación 346732737.
  • Las secciones @position-try inactivas ahora aparecen inhabilitadas 40246493.
• Solicitud:
  • Cookies: Se corrigió un error que no actualizaba las cookies cuando se hacía clic en Actualizar 348683488.
  • Almacenamiento local: Ahora puedes ordenar por claves alfabéticamente 341129585.

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 plataformas web de vanguardia y te ayudan a encontrar problemas en tu sitio antes que tus usuarios.

Comunícate con el equipo de Chrome DevTools

Usa las siguientes opciones para hablar sobre las funciones nuevas, las actualizaciones o cualquier otro tema relacionado con DevTools.

• Envíanos tus comentarios y solicitudes de funciones a crbug.com.
• Informa un problema de DevTools con more_vert Más opciones > Ayuda > Informar un problema de DevTools en DevTools.
• Twittea a @ChromeDevTools.
• Deja comentarios en los videos de YouTube sobre las novedades de DevTools o en los videos de YouTube sobre sugerencias de DevTools.

Novedades de DevTools

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