Novedades de DevTools en Chrome 136

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 destaca 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 fuentes que te muestra el ahorro de tiempo estimado si optimizas font-display.

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 destacados los eventos correspondientes en el registro y atenuar el resto mientras exploras el registro de rendimiento.

Tiempos del servidor en el resumen de solicitudes de red

En la pestaña Resumen del panel Rendimiento, ahora se muestran los tiempos del servidor para las solicitudes de red que implementan tecnologías de renderización del servidor.

El panel Rendimiento toma los datos del encabezado Server-Timing de respuesta.

Filtrar cookies en "Privacidad y seguridad"

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

Tamaños en unidades de kB en las tablas de los paneles

Para mantener las mismas unidades dentro del mismo contexto, las tablas de los paneles Red y Memoria, y la tabla de 1P / 3P 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.

La función de autocompletar admite corner-shape y corner-*-shape en Elements > Styles

La función de autocompletar en Elements > Styles ahora puede sugerir los valores correspondientes para las propiedades corner-shape y corner-*-shape.

Error de Chromium: 402346406.

Experimental: Destaca problemas con elementos y atributos en el DOM

Con esta nueva función experimental, el panel Elements ahora puede destacar los problemas con los elementos o atributos del DOM con un subrayado ondulado rojo. Coloca el cursor sobre esos elementos o atributos para ver una sugerencia con un vínculo al error correspondiente en el panel Problemas.

Actualmente, el panel Elements destaca los elementos secundarios 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 Lighthouse ahora ejecuta Lighthouse 12.5.0.

En esta versión, legacy-javascript ahora usa Baseline en lugar de esmodules. 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 > Estadísticas > Árbol de dependencias de red: Ahora se muestra el tiempo de todas las solicitudes de red en el árbol de red (400708304).
  • Árbol de dependencias de red: Ahora se muestra el tiempo de todas las solicitudes de red en el árbol de red (400708304).
• Animations: Se corrigió un error que provocaba que los elementos separados aparecieran en el panel Memory debido a las animaciones capturadas 400635410.
• Grabadora: Ahora usa el mismo diálogo de confirmación que cuando se pega código al ejecutar 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 en la parte inferior.
• Memoria: Se mejoró la inicialización de la instantánea del montón paralelizando las tareas entre dos trabajadores en lugar de usar uno (42203857).
• Problemas: Ahora informa los errores de CORS de acceso a la red local (LNA) (395895368).
• Accesibilidad:
  • Información sobre herramientas: Ahora aparece cuando se presiona una tecla de acceso rápido en lugar de cuando se enfoca (396311936).
  • Elements > Styles: Ahora se puede 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 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