Novedades de Herramientas para desarrolladores: Chrome 127

Sofia Emelianova

Inspecciona el posicionamiento de anclaje de CSS en el panel de elementos

Para ayudarte a depurar la función de posicionamiento de anclaje con mayor facilidad, la pestaña Styles ahora vincula los identificadores de anclaje explícitos y los anclajes implícitos a sus nodos.

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

Mejoras en el panel de fuentes

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

Función "Nunca detener aquí" mejorada

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

• Excepciones o rechazos de promesas de funciones integradas.
• Se cancelan las interrupciones de DOM, recuperación/XHR y de incumplimiento de CSP.
• En el desensamblado 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 Fuentes > Puntos de interrupción de los detectores de eventos > Control obtiene dos detectores relacionados con scroll-snap: scrollsnapchange y scrollsnapchanging. Estos eventos se activan cuando te desplazas por el contenedor de desplazamiento de una manera que haría que se ajuste a un nuevo elemento.

Error de Chromium: 40286359.

Mejoras en el panel de redes

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

Se actualizaron los ajustes predeterminados de limitación de red

Se actualizaron los ajustes predeterminados de limitación en el panel Red: se agregó el nuevo 4G rápida, se cambió el nombre de 3G rápida a 4G lenta y se cambió el nombre de 3G lenta a 3G. Esto se alinea mejor con los ajustes predeterminados de Lighthouse.

Error de Chromium: 342406608.

Información del Service Worker en los campos personalizados del formato HAR

Cuando exportas el registro de red a un formato HAR, ahora puedes ver la información relacionada con los Service Workers, incluidos los tiempos, como campos personalizados (con el prefijo de guiones bajos). 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:

Problema de Chromium: 40286129.

Otros aspectos destacados

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

• Accesibilidad: Los lectores de pantalla ahora anuncian el contenido de los mensajes en la consola 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 de módulo Wasm como archivos binarios 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íncronas y se cambió el resaltado de cursiva 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 acababan de comenzar, pero que aún no recibían un evento responseReceived (338340752).
• Rendimiento:
  • Selector Stats: Se agregó una sugerencia explicativa para la columna %-of-Slow-Path-Non-Matches (324282954).
  • Modo de configuración de pistas: El botón Finalizar la configuración de pistas se movió 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 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