Novedades de Herramientas para desarrolladores: Chrome 128

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

Esta versión incluye la 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 te proporcione estadísticas directamente en la consola 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.

Pista de Enhanced Network

Se mejoró el registro de Network en el panel de Performance para mostrar información importante por adelantado, por ejemplo, un árbol de duración y de iniciador de red más detallado, y para proporcionar mayor claridad sobre las indicaciones visuales y los colores. Por lo tanto, ya no tienes que cambiar entre el panel Network y la pestaña Performance > Summary. Además, si aún necesitas cambiar al panel Red, lo hemos hecho más fácil y rápido para ti.

Ahora, el segmento Red hace lo siguiente:

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

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

Personaliza 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 la información sobre 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 la 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 sugerencias personalizados en la pestaña Resumen.

En resumen, para ampliar 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 desarrollador web y usas la parte de User Timing de la API de Performance para agregar entradas al registro de Tiempos, ahora puedes ver tus detalles arbitrarios en la pestaña Resumen para los eventos mark y measure, y sus marcas de tiempo.

Problema de Chromium: 345418915.

Cómo copiar todas las solicitudes que aparecen en el panel de red

En lugar de copiar todo el registro de red, el panel Red ahora te permite aplicar filtros y copiar solo las solicitudes que se muestran.

Instantáneas del montón más rápidas con etiquetas HTML con nombre 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, coinciden mejor con la semántica del lenguaje JavaScript mostrando menos objetos internos y siempre incluyen valores numéricos.

Se aceleró el rendimiento del parámetro de configuración check_box Incluir valores numéricos en la captura, se activó de forma predeterminada y se quitó del panel Memoria.

Para incluir manualmente objetos internos en la instantánea, 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, 42203857.

Abre el panel de 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 Elements > Styles.

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

Problema de Chromium: 352718055.

Lighthouse 12.1.0

El panel Lighthouse ahora ejecuta Lighthouse 12.1.0.

Esta actualización incluye varios cambios, como la eliminación de la métrica anterior de First Meaningful Paint (FMP) en favor del Largest Contentful Paint (LCP). Consulta 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.

Problema de Chromium: 772558.

Accesibilidad

Esta versión incluye las siguientes mejoras de accesibilidad:

• Si presionas Tab después de la autocompletar en el campo de edición de expresiones en vivo, el enfoque se mueve al siguiente punto de enfoque. Antes, se aplicaba una sangría al texto.
• Cuando haces clic en un controlador de cambio de tamaño, se enfoca en él, por lo que puedes moverlo con las teclas de flecha hacia la derecha y hacia la izquierda.
• Ahora, un lector de pantalla anuncia el campo de edición Agregar expresión de observación en Fuentes, y Borrar expresión de observación ahora se ve 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 destacadas de esta versión:

• Rendimiento:
  • Pista Network: Se agregaron eventos de conexión de WebSocket 331351979.
  • Ahora, el panel Rendimiento hace zoom correctamente en la actividad del subproceso principal más ocupado 345599356.
  • Se corrigió un error relacionado con la carga de tipos de archivos de registro incorrectos. Ahora, se impide la carga de cualquier tipo, excepto los correctos .json o .gz 349864878.
• Elements > Styles:
  • Se dio de baja el menú desplegable de unidades en los valores de la propiedad de longitud 41495618.
  • Se corrigió la resolución de propiedades activas para reglas @ anidadas 346732737.
  • Las secciones @position-try inactivas ahora aparecen inhabilitadas 40246493.
• Aplicación:
  • Cookies: Se corrigió un error que no actualizaba las cookies cuando se hacía clic en Actualizar 348683488.
  • Almacenamiento local: Ahora puedes ordenar las 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 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 analizar las nuevas funciones, las actualizaciones o cualquier otro tema relacionado con las 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 DevTools de YouTube o en los videos de Sugerencias de DevTools de YouTube.

Novedades de Herramientas para desarrolladores

Una lista de todo lo que se abordó en la serie Novedades de las Herramientas para desarrolladores