Novedades de DevTools en Chrome 136

Sofia Emelianova
Sofia Emelianova

Mejoras en el panel de rendimiento

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

Nuevas estadísticas de rendimiento

La pestaña Rendimiento > Estadísticas incluye nuevas estadísticas:

  • HTTP moderno que destaca las solicitudes que usan el protocolo HTTP/1.1 anterior.
  • Usa tiempos de almacenamiento en caché eficientes que destaquen las solicitudes que podrían beneficiarse de tiempos de almacenamiento en caché más largos y acelerar el tiempo de carga de tu sitio web.
  • Visualización de la fuente que muestra el ahorro de tiempo estimado si optimizas font-display.

Tres estadísticas nuevas en la pestaña Estadísticas

Haz clic para destacar

Ahora puedes hacer clic en los elementos de las tablas Resumen, De abajo hacia arriba, Árbol de llamadas y Registro de eventos para mantener los eventos correspondientes destacados en el seguimiento y atenuar el resto mientras exploras el seguimiento de rendimiento.

Tiempos del servidor en Resumen de solicitudes de red

La pestaña Resumen del panel Rendimiento ahora muestra los tiempos del servidor para las solicitudes de red que implementan tecnologías de renderización del servidor.

La tabla "Tiempo del servidor" en el Resumen de una solicitud de red.

El panel Rendimiento toma los datos del encabezado Server-Timing response header.

Filtrar cookies en "Privacidad y seguridad"

La tabla de la sección Privacidad y seguridad > Privacidad > Cookies de terceros obtiene un filtro para que puedas encontrar las cookies que te interesan más rápido.

El filtro en la tabla "Cookies de terceros".

Tamaños en unidades de kB en tablas de diferentes paneles

Para mantener las unidades iguales dentro del mismo contexto, las tablas de los paneles Red y Memoria, y la tabla de 1ª y 3ª parte en Rendimiento > Resumen ahora muestran todos los tamaños en KB. Esto te permite comparar directamente los números en la misma columna y en todos los paneles, en lugar de tener que prestar atención a las unidades de MB, kB y B.

Las unidades de tamaño unificadas antes y después.

La función Autocomplete admite corner-shape y corner-*-shape en Elementos > Estilos.

La función Autocomplete en Elementos > Diseños ahora puede sugerir los valores correspondientes para las propiedades corner-shape y corner-*-shape.

Las opciones de autocompletado para la propiedad "corner-shape".

Error de Chromium: 402346406.

Experimental: Destaca problemas con elementos y atributos en el DOM

Con esta nueva función experimental, el panel Elementos ahora puede destacar los problemas con los elementos o atributos del DOM con una línea ondulada roja. Coloca el cursor sobre esos elementos o atributos para ver una información sobre herramientas con un vínculo al error correspondiente en el panel Problemas.

El antes y el después de destacar un problema de DOM en el árbol del DOM con una información sobre herramientas y un vínculo al panel de problemas.

Actualmente, el panel Elementos destaca los descendientes no válidos de <select>, las definiciones de ARIA que no coinciden y los atributos de ARIA no válidos.

Problema de Chromium: 378738916.

Lighthouse 12.5.0

El panel de Lighthouse ahora ejecuta Lighthouse 12.5.0.

En particular, en esta versión, legacy-javascript ahora usa Baseline en lugar de esmodules. 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: 40543651.

Contenido destacado misceláneo

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

  • Rendimiento > Estadísticas > Árbol de dependencias de red: Ahora muestra el tiempo de todas las solicitudes de red en el árbol de red (400708304).
    • Árbol de dependencias de red: Ahora muestra el tiempo de todas las solicitudes de red en el árbol de red (400708304).
  • Animaciones: Se corrigió un error que causaba que aparecieran elementos separados en el panel Memory debido a animaciones capturadas 400635410.
  • Grabadora: Ahora usa el mismo diálogo de confirmación que el pegado de código cuando se ejecuta la grabación por primera vez.
  • Capas: Ahora se muestra la cantidad total de capas y la memoria total de todas las capas visibles en la barra de estado de la parte inferior.
  • Memoria: Se mejoró la inicialización de la instantánea del montón mediante la paralelización de tareas entre dos trabajadores en lugar de usar uno (42203857).
  • Problemas: Ahora se informan errores de CORS de acceso a red local (LNA) (395895368).
  • Accesibilidad:
    • Información sobre herramientas: Ahora aparecen cuando se presiona una tecla de acceso directo en lugar de enfocarse (396311936).
    • Elementos > Estilos: Ahora puedes interactuar con la función var() con el teclado, lo que significa que puedes seleccionar --custom-property y presionar Intro para ir a su destino de vínculo (401212692).

Descarga los canales de vista previa

Considera usar Chrome Canary, Dev o Beta como tu navegador de desarrollo predeterminado. Estos canales de vista previa 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 de que lo hagan tus usuarios.

Comunícate con el equipo de Herramientas para desarrolladores de Chrome

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.