Novedades de DevTools en Chrome 138

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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:
  • Se habilitó de forma predeterminada el destacado de problemas con elementos y atributos en el DOM.
  • Estilos: Se agregó el valor clip a las opciones de autocompletado de overflow.
• 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:
  • Muestras de sombras (crbug.com/401213105).
  • Vínculos a nombres de posiciones de anclaje (crbug.com/401213107).
  • Botones del editor de cuadrícula y Flex (crbug.com/401213522).
  • Longitudes (crbug.com/401211976).
  • Vínculos de URL (crbug.com/401213104).
  • Nombres y valores de las propiedades (crbug.com/417458979).

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.

• 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 las Herramientas para desarrolladores de YouTube o en los videos de Sugerencias sobre las Herramientas para desarrolladores de YouTube.

Novedades de Herramientas para desarrolladores

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