Novedades de DevTools en Chrome 138

Sofia Emelianova
Sofia Emelianova
GitHub

Mejoras en el panel de rendimiento

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

Orígenes conectados previamente en la estadística de "Árbol de dependencias de red"

La sugerencia Rendimiento > Estadísticas > Árbol de dependencias de red ahora te muestra una lista de los orígenes preconectados usados o no usados, y los candidatos a preconexión, si los hay.

Las sugerencias de conexión previa permiten que tu sitio establezca conexiones anticipadas con orígenes externos importantes y mejore la velocidad de carga de la página.

La situación antes y después de agregar orígenes y candidatos preconectados a la estadística "Árbol de dependencias de red".

Para obtener más información, consulta Cómo conectarse previamente a los orígenes requeridos.

Tiempos de respuesta y redireccionamiento del servidor en la sugerencia "Latencia de la solicitud de documento"

La estadística de Rendimiento > Estadísticas > Latencia de solicitud de documentos ahora muestra el tiempo de respuesta del servidor y, si corresponde, la cantidad de redireccionamientos y el tiempo de redireccionamiento.

Los tiempos de respuesta del servidor y de redireccionamiento antes y después de agregarlos a la estadística de "Latencia de solicitud de documento".

Redireccionamientos en el resumen de solicitudes de red

El panel Rendimiento ahora muestra las URLs de redireccionamiento en el Resumen de las solicitudes de red y en sus Tooltips.

Antes y después de agregar URLs de redireccionamiento al resumen y a las sugerencias de las solicitudes de red.

Error de Chromium: 402353313.

Se redujo el ruido en el registro de rendimiento.

El panel Rendimiento ahora no mostrará eventos de la categoría compile del motor de JavaScript v8. Anteriormente, estos eventos causaban una gran cantidad de sobrecarga y ruido innecesarios, en particular el evento compile code.

El antes y el después de quitar los eventos de "compilación de código" del registro de rendimiento.

Si notas que faltan algunos eventos importantes para ti, no dudes en dejar tus comentarios en crbug.com/414330508.

Se dejó de usar la opción "Inhabilitar las muestras de JavaScript"

La opción Inhabilitar las muestras de JavaScript en Rendimiento > Configuración de capturas dejó de estar disponible y se quitó debido a su poca utilidad y uso.

Antes y después de quitar la opción "Inhabilitar las muestras de JavaScript" de "Configuración de captura".

Error de Chromium: 414734883.

Parámetro de precisión de la ubicación geográfica en Sensors

El panel Sensores ahora te permite establecer la precisión en la emulación de la ubicación geográfica. De esta manera, puedes probar el control de diferentes niveles de precisión del GPS.

Antes y después de agregar el parámetro "Precisión" a la emulación de ubicación geográfica en el panel Sensores.

Error de Chromium: 40074843.

Mejoras en el panel de elementos

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

Depura valores de CSS complejos con mayor facilidad

Para ayudarte a depurar valores de CSS complejos, la pestaña Elements > Styles ahora te muestra en una sugerencia sobre el desplazamiento del mouse lo siguiente:

  • La cadena de definición completa de las variables de CSS, de modo que no tengas que hacer clic en varios vínculos
  • Una evaluación paso a paso de los cálculos complejos de CSS para que puedas identificar errores de manera más eficiente y comprender mejor cómo se calcula un valor.

La sugerencia muestra cadenas de definición en varias líneas, una para cada definición, y puedes expandir los cálculos complejos y colocar el cursor sobre los valores para destacar y rastrear el valor calculado hasta su expresión inicial.

Antes y después de agregar una sugerencia con cadenas de definiciones y cálculos complejos expandibles.

Error de Chromium: 396080529.

Compatibilidad con @function en Elements > Styles

En preparación para la compatibilidad con @function en Chrome, la pestaña Elements > Styles ahora vincula los nombres de tus funciones personalizadas a sus definiciones en una sección dedicada.

Antes y después de vincular el nombre de tu función personalizada a la sección correspondiente

Mejoras en el panel de red

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

has-request-header filtro

El panel Network ahora admite el filtro has-request-header, que te permite filtrar por un nombre de encabezado de solicitud específico.

Antes y después de agregar el filtro "has-request-header" al panel de red.

Problema de Chromium: 397481040.

Direct Sockets en apps web aisladas

En el panel Network, ahora puedes supervisar el tráfico de las apps web aisladas (IWA) a través de TCPSocket, UDPSocket (en modo de entrada) y UDPSocket (en modo conectado).

Para ello, selecciona una conexión directscoket junto a las solicitudes normales en la tabla y, en la pestaña Mensajes, selecciona un mensaje.

Antes y después de agregar compatibilidad con Direct Sockets en las IWA al panel de red

Las apps web aisladas (IWA) proporcionan un modelo de seguridad de alta confianza para las aplicaciones web. Para obtener más información, consulta Comienza a usar apps web aisladas y mira la app de demostración que implementa la API de Direct Sockets.

Otros aspectos destacados

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

  • Aplicación > Almacenamiento: Se quitó la opción Web SQL que dejó de estar disponible (crbug.com/412707590).
  • Elementos:
  • Red: Se quitó el encabezado HTTP Referrer-Policy de la opción Copiar como recuperación porque es un encabezado de respuesta para controlar el comportamiento del navegador, no una instrucción del cliente (crbug.com/413904896).
  • Rendimiento: Se quitaron las advertencias de "tarea larga" de los subprocesos de trabajo porque no bloquean los subprocesos principales (crbug.com/40248589).
  • Problemas. Informes de ahora:
    • Si se bloquean los recursos sospechosos de hacer un seguimiento de los usuarios
    • Mitigaciones de seguimientos por rebote, independientemente de si acceden al almacenamiento durante un redireccionamiento o no
  • Accesibilidad. Los siguientes elementos en Elements > Styles ahora se pueden enfocar con el teclado:

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 hablar sobre las funciones nuevas, las actualizaciones o cualquier otro tema relacionado con Herramientas para desarrolladores.

Novedades de Herramientas para desarrolladores

Una lista de todo lo que se abordó en la serie Novedades de DevTools