Se usó la API de Cloud Translation para traducir esta página.

Novedades de Herramientas para desarrolladores: Chrome 128

Sofia Emelianova

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

Esta versión ofrece compatibilidad 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 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 Performance.

Segmento de red mejorado

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

El segmento 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 en la selección con una flecha. 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 muestra también 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.

Personaliza los datos de rendimiento con la API de Extensibility

Esta versión admite datos de extensiones en el panel Rendimiento. Ahora puedes agregar segmentos personalizados con eventos y descripciones de información sobre la herramienta al seguimiento del rendimiento, agregar 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 > Capturar configuración, activa la 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 detén la grabación. Verás un recorrido personalizado en el seguimiento que contiene eventos con información sobre herramientas y detalles 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 el segmento de Tiempos

Si eres desarrollador web y usas la parte User Timing de la API de Performance para agregar entradas al segmento Timing, ahora puedes ver tus detalles arbitrarios en la pestaña Resumen para los eventos mark y measure, además de 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.

Opciones de copiado solo para las solicitudes indicadas.

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

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 objetos internos de forma manual en la instantánea, activa primero configuración Configuración > Experimentos > check_box Mostrar la opción para exponer componentes internos en instantáneas de montón, luego activar check_box Exponer componentes internos (...) en el panel Memoria.

Problemas de Chromium: 41490040, 343341610, 42203857.

Abrir 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 una serie de cambios, incluida la eliminación de la métrica Primera pintura significativa (FMP) para reemplazarla por la Procesamiento de imagen con contenido más grande (LCP). Consulte 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. Antes, usaba sangría para el 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 importantes en esta versión:

Rendimiento:
- Seguimiento de Network: Se agregaron los eventos de conexión de WebSocket 331351979.
- El panel Performance ahora acerca correctamente la actividad del subproceso principal más concurrida 345599356.
- Se corrigió un error relacionado con la carga de tipos de archivos de registro incorrectos. Ahora se impide subir cualquier tipo, excepto el .json o .gz correctos 349864878.
Elementos > Estilos:
- La lista desplegable de unidades en los valores de propiedad de longitud dejó de estar disponible 41495618.
- Se corrigió la resolución de propiedades activas para at-rules anidadas 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 348683488 en la opción Actualizar.
- Almacenamiento local: Ahora puedes ordenar por teclas alfabéticamente 341129585.

Descarga los canales de vista previa

Considera usar Chrome Canary, Dev o Beta como navegadores de desarrollo predeterminados. Estos canales de vista previa te brindan acceso a las funciones más recientes de Herramientas para desarrolladores, prueban API de plataformas web de vanguardia y detectan problemas en tu sitio antes que los usuarios.

Comunicarse con el equipo de Herramientas para desarrolladores de Chrome

Usa las siguientes opciones para hablar sobre las nuevas funciones y los cambios en la publicación, o cualquier otra cosa relacionada con Herramientas para desarrolladores.

Para enviarnos sugerencias o comentarios, accede a crbug.com.
Informa un problema en Herramientas para desarrolladores con Más opciones > Ayuda > Informa problemas de Herramientas para desarrolladores en Herramientas para desarrolladores.
Twittea a @ChromeDevTools.
Deja comentarios en nuestros videos de YouTube de Herramientas para desarrolladores o en videos de YouTube de las Sugerencias de las Herramientas para desarrolladores.