Novedades de Herramientas para desarrolladores: Chrome 128

Sofia Emelianova
Sofia Emelianova
GitHub

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.

Lista de países europeos admitidos recientemente

Alemania, Austria, Bélgica, Bulgaria, Chipre, Croacia, Dinamarca, Eslovaquia, Eslovenia, España, Estonia, Finlandia, Francia, Grecia, Hungría, Irlanda, Islandia, Italia, Liechtenstein, Lituania, Luxemburgo, Letonia, Malta, Noruega, Países Bajos, Polonia, Portugal, Reino Unido, República Checa, Rumania y Suecia.

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.

Una estadística de Gemini sobre un error en la consola.

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.

La ruta de red mejorada con una leyenda de colores, información sobre herramientas, indicadores de bloqueo de renderización y tiempos en la pestaña Resumen

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.

El menú contextual de la solicitud con la opción "Reveal in Network panel".

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

Un segmento personalizado en el panel Rendimiento

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.

Un evento personalizado en el segmento de tiempos con una marca de tiempo y detalles.

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.

Copiar opciones solo para las solicitudes enumeradas

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.

Objetos agrupados por etiquetas HTML con nombre.

Se aceleró el rendimiento de la configuración 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 > Experiments > Show option to expose internals in heap snapshots y, luego, activa 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.

Novedades de DevTools

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