Novedades de DevTools en Chrome 135

Sofia Emelianova
Sofia Emelianova
GitHub

Mejoras en el panel de rendimiento

Esta versión incluye varias mejoras en el panel Rendimiento.

Vínculos de origen y de secuencia de comandos para las llamadas de perfil y de función en Performance

En la pestaña Rendimiento > Resumen, ahora se muestran vínculos a las secuencias de comandos y los orígenes pertinentes para las llamadas de perfil y de función, por lo que no es necesario que coloques el cursor sobre estos eventos en el segmento Principal.

El antes y el después de agregar la fuente y el origen a la pestaña Resumen.

Además, las pistas Network y Main ahora muestran nombres de terceros, si los hay, en las sugerencias cuando colocas el cursor sobre los eventos.

Error de Chromium: 368541957.

Compatibilidad con los datos de campo de "LCP por fase"

Con los datos de campo activados, la estadística de Rendimiento > Estadísticas > LCP por fase ahora muestra los tiempos de imágenes del percentil 75 del Informe de UX de Chrome en una tabla adicional, para que puedas comparar los tiempos directamente en la estadística.

Antes y después de agregar la compatibilidad con los datos de campo a la estadística "LCP por fase".

Estadística "Árbol de dependencias de red"

En la pestaña Rendimiento > Estadísticas, se agrega la nueva estadística Árbol de dependencias de red a su colección. La estadística te indica si encadenaste solicitudes críticas, lo que no se recomienda. Coloca el cursor sobre las solicitudes que se indican en la estadística para verlas destacadas en el segmento Red.

Para obtener más información, consulta Cómo evitar encadenar solicitudes críticas.

Destacado de la pila más pesada

El panel Rendimiento ahora destaca los elementos en el segmento Principal a medida que los sobrevuelas en el árbol de llamadas o en la barra lateral De abajo hacia arriba > Pila más pesada y atenúa el resto. Esto te permite encontrar visualmente los elementos anidados en la pila de llamadas que tardan más tiempo.

Vista de árbol de accesibilidad en Elements

La vista del árbol de accesibilidad de página completa ahora está activada de forma predeterminada en el panel Elements.

Anteriormente, podías explorar un árbol de accesibilidad independiente en la pestaña Elements > Accessibility. Ahora puedes hacer clic en el botón Cambiar a la vista de árbol de accesibilidad en la esquina superior derecha del árbol del DOM en el panel Elementos para cambiar entre el DOM y los árboles de accesibilidad de la página completa, de modo que puedas explorarlos y comprender su relación con mayor facilidad.

El antes y el después de activar la vista de árbol de accesibilidad de página completa de forma predeterminada .

El árbol de accesibilidad te permite inspeccionar cómo la tecnología de asistencia ve tu contenido y te muestra los atributos ARIA y las propiedades de accesibilidad calculadas de los nodos del DOM. Para obtener más información, consulta Árbol de accesibilidad completo en Herramientas para desarrolladores de Chrome.

Error de Chromium: 40808541.

Se mejoraron los estados vacíos de varios paneles.

Se optimizaron los estados vacíos (cuando no hay nada abierto) de varios paneles, secciones y pestañas para que sepas exactamente qué hacer para comenzar a trabajar con ellos. Algunos estados vacíos, por ejemplo, en el panel Network, ahora tienen botones útiles relevantes, como Reload page.

Los estados vacíos antes y después de la mejora en los paneles de Red y Búsqueda.

Se movió la opción “Pregúntale a la IA” a la parte inferior del menú

La opción Pregúntale a la IA ahora se encuentra en la parte inferior de los menús desplegables, en lugar de en la parte superior.

Antes y después de mover la opción "Pregúntale a la IA" a la parte inferior del menú desplegable.

No dudes en dejar tus comentarios en el panel de asistencia de IA en crbug.com/364805393.

Lighthouse 12.4.0

El panel Lighthouse ahora ejecuta Lighthouse 12.4.0.

En esta versión, algunas auditorías de rendimiento se marcan como informativas en condiciones de aprobación en lugar de ocultarse en la sección de auditorías aprobadas. 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.

Error de Chromium: 40543651.

Otros aspectos destacados

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

  • Rendimiento > Resumen: Se reemplazaron las dos líneas Tiempo total y Tiempo propio por una sola línea Duración que también muestra (self time) entre paréntesis, si corresponde (crbug.com/395572753).
  • Problemas: Se agregaron nuevos tipos de problemas: problemas de <select> en el árbol de accesibilidad y errores de firma de mensajes de SRI que se producen durante el análisis o la validación en el servicio de red (crbug.com/381044049, crbug.com/347890366).
  • Accesibilidad: La pestaña Elements > Styles ahora destaca los elementos por los que te desplazas con la navegación por teclado (crbug.com/396311936).
  • Elements: Ahora se admiten los problemas con <select> y se destacan con un subrayado ondulado (crbug.com/378738916).
  • Red: Los íconos de advertencia de cookies y de anulación ahora se muestran a la derecha del nombre de la pestaña, en lugar de a la izquierda (crbug.com/390556283).

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.

Novedades de Herramientas para desarrolladores

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