Novedades de Herramientas para desarrolladores: Chrome 127

Sofia Emelianova
Sofia Emelianova
GitHub

Para facilitarte la depuración de la función de posicionamiento de ancla, la pestaña Styles ahora vincula los identificadores de ancla explícitos y los anclas implícitos a sus nodos.

Antes y después de vincular anclas explícitas e implícitas.

Además, el valor del atributo popovertarget ahora se vincula a su elemento popover en el DOM.

El antes y el después de vincular popovertarget a su elemento de ventana emergente.

Mejoras en el panel de fuentes

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

Se mejoró la función "Nunca detener aquí"

La opción "Nunca pausar aquí" te permite evitar que el depurador se detenga en la misma línea una y otra vez. Esto facilita el trabajo con puntos de interrupción irrelevantes que se activan de forma reiterada. Esta versión mejora esta función y ahora funciona para lo siguiente:

  • Excepciones o rechazos de promesas de funciones integradas
  • "Canceling" DOM, puntos de interrupción de recuperación/XHR y de incumplimiento de CSP.
  • En el desmontaje de Wasm.

Mira el flujo de trabajo en acción:

Error de Chromium: 40924349.

Nuevos objetos de escucha de eventos de ajuste de desplazamiento

La lista Sources > Event Listener Breakpoints > Control obtiene dos objetos de escucha relacionados con scroll-snap: scrollsnapchange y scrollsnapchanging. Estos eventos se activan cuando desplazas el contenedor de desplazamiento de una manera que lo haga ajustarse a un elemento nuevo.

El antes y el después de agregar objetos de escucha de eventos relacionados con el desplazamiento.

Error de Chromium: 40286359.

Mejoras en el panel de red

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

Se actualizaron los parámetros de configuración predeterminados de limitación de la red

El panel Red tiene ajustes preestablecidos de limitación actualizados: 4G rápida nueva, 3G rápida que cambió su nombre a 4G lenta y 3G lenta que cambió su nombre a 3G. Esto se alinea mejor con los parámetros predeterminados de Lighthouse.

Los parámetros de configuración predeterminada de limitación de red antes y después de la actualización

Error de Chromium: 342406608.

Información del trabajador del servicio en campos personalizados del formato HAR

Cuando exportas el registro de red a un formato HAR, ahora puedes ver la información relacionada con los trabajadores del servicio, incluidos los tiempos, como campos personalizados (con guiones bajos como prefijo). Por ejemplo, es posible que encuentres los siguientes campos nuevos en el registro:

...
"response": {
  ...
  "_fetchedViaServiceWorker": true,
  "_responseCacheStorageCacheName": "V1",
  "_serviceWorkerResponseSource": "cache-storage"
}
...
"timings": {
  ...
  "_workerStart": -1,
  "_workerReady": -1,
  "_workerFetchStart": -1,
  "_workerRespondWithSettled": -1
}
...

Error de Chromium: 342406608.

Envía y recibe eventos de WebSocket en el panel Rendimiento

Al igual que con otros eventos de WebSocket, el panel Rendimiento ahora captura los eventos Enviar mensaje de WebSocket y Recibir mensaje de WebSocket y los muestra en el registro de rendimiento. Por ejemplo:

El evento "Recibir mensaje de WebSocket" capturado en el registro de rendimiento

Error de Chromium: 40286129.

Otros aspectos destacados

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

  • Accesibilidad: Los lectores de pantalla ahora anuncian el contenido de los mensajes en Play Console cuando se desplazan por el registro con las teclas de flecha hacia arriba y hacia abajo (344484979).
  • Fuentes:
    • Página: La opción de menú Guardar como ahora guarda los archivos del módulo Wasm como objetos binarios de Wasm válidos en lugar de texto Base64 (40784130).
    • Pila de llamadas: Se quitó el sufijo (async) de las descripciones de los marcos de llamadas asíncronos y se cambió el texto destacado de itálico a negrita (343750870).
  • Memoria: Se quitó el InternalNodes innecesario de tamaño cero del Resumen de la instantánea del montón (340200025).
  • Red: Se corrigió un error que impedía la vista previa del contenido de la respuesta de transmisión para las solicitudes que recién se iniciaban, pero que aún no recibían un evento responseReceived (338340752).
  • Rendimiento:
    • Selector Stats: Se agregó una información sobre herramientas explicativa para la columna %-of-Slow-Path-Non-Matches (324282954).
    • Modo de configuración de segmentos: Se movió el botón Finalizar configuración de segmentos a la parte inferior derecha (345256274).
  • Consola: Se corrigió un error que mostraba varios mensajes de consola idénticos cuando se navegaba con la caché de atrás/adelante (40894153).
  • Configuración: Se agregaron íconos de ayuda junto a todas las pestañas.

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 plataformas web de vanguardia y te ayudan a encontrar problemas en tu sitio antes que tus usuarios.

Comunícate con el equipo de Chrome DevTools

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.