Novedades de Herramientas para desarrolladores: Chrome 128

Sofia Emelianova
Sofia Emelianova
GitHub

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

Esta versión es compatible con las Estadísticas de Console de Gemini en la mayoría de los países europeos.

Lista de países europeos admitidos recientemente

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

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.

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

Actualizaciones del panel Rendimiento

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

Itinerario de red mejorada

Se mejoró el segmento Red del 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 necesita cambiar al panel Red, lo hicimos más fácil y rápido para usted.

La pista Network ahora hace lo siguiente:

  • Muestra una leyenda de colores para los tipos de solicitud.
  • Marca las solicitudes de bloqueo de 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 iniciadores de red que antes solo estaba disponible en el panel Red.
  • Cuando colocas el cursor sobre un cuadro de información modificado, ahora se muestra información estructurada de tiempo, incluidos el estado de bloqueo del procesamiento y los cambios en la prioridad, si los hubiera.
  • La pestaña Resumen ahora también muestra un desglose de los tiempos en una columna de la derecha.

El seguimiento de red mejorado con una leyenda de color, información sobre la herramienta, 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. Las Herramientas para desarrolladores te dirigirán al panel Red y destacarán la solicitud que buscas en la tabla.

El menú que aparece cuando haces clic con el botón derecho en la solicitud con la opción "Mostrar en el panel de red".

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

Esta versión admite datos de extensiones en el 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 la opción 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 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 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 seguimiento de tiempos con una marca de tiempo y detalles.

Problema de Chromium: 345418915.

Copiar todas las solicitudes enumeradas en el panel Red

En lugar de copiar el registro de red completo, el panel Network ahora te permite aplicar filtros y copiar solo las solicitudes enumeradas.

Copiar opciones solo para las solicitudes enumeradas

Resúmenes de montón más rápidos con etiquetas HTML con nombre y menos desorden

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

Objetos agrupados por etiquetas HTML nombradas.

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

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

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

El panel Animations ahora hace lo siguiente:

  • Captura animaciones que ya están en curso cuando abres el panel, de modo que no tengas que actualizar la página para capturar animaciones.
  • 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 aprender los conceptos básicos del uso del panel de Lighthouse en Herramientas para desarrolladores, consulta Lighthouse: Cómo optimizar la velocidad del sitio web.

Problema de Chromium: 772558.

Accesibilidad

Esta versión incluye las siguientes mejoras de accesibilidad:

  • Si presionas el Tabulador después de la opción de autocompletar en el campo de edición de las expresiones en vivo, se moverá el enfoque al siguiente punto de enfoque. Anteriormente, se aplicaba una sangría al texto.
  • Al hacer clic en un cambiador de tamaño, el foco se centra en él, por lo que puedes moverlo con las teclas de flecha hacia la derecha y la izquierda.
  • Un lector de pantalla ahora anuncia que el campo de edición Add watch expression en Sources y Delete watch expression ahora es claramente visible cuando se navega con un teclado.

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

Otros aspectos destacados

Estas son algunas correcciones y mejoras notables de esta versión:

  • Rendimiento:
    • Seguimiento de Network: Se agregaron los 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 están 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 por claves alfabéticamente 341129585.

Descarga los canales de vista previa

Considera usar Chrome Canary, Dev o Beta como navegadores de desarrollo predeterminados. 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 Herramientas para desarrolladores de Chrome

Usa las siguientes opciones para hablar sobre las nuevas funciones, actualizaciones o cualquier otro aspecto relacionado con Herramientas para desarrolladores.

Novedades de Herramientas para desarrolladores

Una lista de todo lo que se ha abordado en la serie Novedades de Herramientas para desarrolladores.