Novedades de Herramientas para desarrolladores: Chrome 127

Sofia Emelianova

Inspecciona el posicionamiento de anclaje de CSS en el panel Elementos

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

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

Mejoras en el panel Fuentes

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

Se mejoró la función "No pausar nunca aquí"

La opción "Never Pause Here" 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 repetida. Esta versión mejora esa capacidad y ahora funciona para lo siguiente:

• Excepciones o rechazos de promesas de funciones integradas
• "Cancelación" de los puntos de interrupción 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 Sources > Event Listener Breakpoints > Control obtiene dos objetos de escucha de eventos relacionados con el ajuste de desplazamiento: scrollsnapchange y scrollsnapchanging. Estos eventos se activan cuando desplazas el contenedor de desplazamiento de una manera que hace que se ajuste a un elemento nuevo.

Problema de Chromium: 40286359.

Mejoras en el panel de red

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

Se actualizaron los ajustes predeterminados de limitación de la red

El panel Red obtiene ajustes predeterminados de limitación actualizados: el nuevo 4G rápido, el 3G rápido que se cambió a 4G lento y el 3G lento que se cambió a 3G. Esto se alinea mejor con los ajustes predeterminados de Lighthouse.

Problema 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 un guion bajo 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 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.

Aspectos destacados varios

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 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ódulos de Wasm como objetos binarios de Wasm válidos en lugar de texto en Base64 (40784130).
  • Pila de llamadas: Se quitó el sufijo (async) de las descripciones de los marcos de llamadas asíncronas y se cambió su formato de cursiva a negrita (343750870).
• Memoria: Se quitó el InternalNodes innecesario de tamaño cero de la instantánea del montón Summary (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 información sobre la herramienta explicativa para la columna %-of-Slow-Path-Non-Matches (324282954).
  • Modo de configuración de pistas: El botón Finish configuring tracks 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 memoria caché atrás/adelante (40894153).
• Configuración: Se agregaron íconos de ayuda junto a todas las pestañas.

Descarga los canales de versión preliminar

Considera usar Chrome Canary, Dev o Beta como tu navegador de desarrollo predeterminado. Estos canales de vista previa te brindan acceso a las funciones más recientes de las Herramientas para desarrolladores, te permiten probar las APIs de vanguardia de la plataforma web y te ayudan a encontrar problemas en tu sitio antes que los usuarios.

Comunícate con el equipo de Herramientas para desarrolladores de Chrome

Usa las siguientes opciones para analizar las funciones nuevas, 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 las Herramientas para desarrolladores con more_vert Más opciones > Ayuda > Informar un problema de las Herramientas para desarrolladores en las Herramientas para desarrolladores.
• Envía un tweet a @ChromeDevTools.
• Deja comentarios en los videos de YouTube de Novedades de las Herramientas para desarrolladores o Sugerencias para las Herramientas para desarrolladores.

Novedades de las Herramientas para desarrolladores

Una lista de todo lo que se trató en la serie Novedades de las Herramientas para desarrolladores.