Novedades de DevTools (Microsoft Edge 109)

Estas son las características más recientes de DevTools de la versión estable de Microsoft Edge.

Vídeo: Novedades de DevTools 109

Imagen en miniatura del vídeo

Importe y exporte las instancias de DevTools con la nueva característica de seguimientos mejorados

En Microsoft Edge 109, puede activar una nueva configuración para exportar seguimientos mejorados desde las herramientas Rendimiento y Memoria . Estos seguimientos mejorados incluyen más información, como:

  • Mensajes registrados en la consola.
  • El JavaScript que se estaba ejecutando en la página en el momento de la grabación.
  • Instantáneas del DOM.

Al guardar perfiles de rendimiento, instantáneas de montón, escalas de tiempo de asignación o muestreo de asignación, ahora puede exportar un nuevo .devtools formato de archivo. Al importar el .devtools archivo, se abrirá una nueva instancia de DevTools conservando el estado de las herramientas Elementos, Consola y Orígenes . Estos seguimientos mejorados ofrecen una forma nueva y eficaz de colaborar y compartir la información de DevTools.

Para probar la característica de seguimientos mejorados:

  1. En DevTools, haga clic en el botón Configuración (icono Configuración).

  2. En la sección Persistencia de la página Configuración de preferencias , active la casilla Exportar seguimientos de memoria y rendimiento mejorados :

    Casillas > de persistencia de preferencias de configuración >

  3. Si desea conservar los mensajes de la consola, JavaScript o las instantáneas del DOM, active las casillas correspondientes.

  4. Haga clic en el botón Cerrar (x) en la configuración de DevTools.

  5. En la herramienta Rendimiento , realice una grabación.

  6. Haga clic en el botón Guardar perfil (icono Guardar perfil).

  7. En el cuadro de diálogo Guardar como , guarde el nuevo .devtools archivo.

Importando:

  1. Importe el .devtools archivo desde la herramienta Rendimiento haciendo clic en el botón Cargar perfil (icono Cargar perfil):

    Importar un seguimiento desde la herramienta Rendimiento

  2. Se abrirá una nueva ventana de DevTools que contiene un subconjunto de las herramientas, incluida la herramienta Rendimiento cargada con el perfil que acaba de grabar. Las herramientas Elementos, Consola y Orígenes también se rellenan previamente con su estado conservado:

    Consola de importación de seguimiento

También puede exportar desde la herramienta Memoria con el nuevo .devtools formato de archivo. Esta es una nueva característica con la que el equipo de DevTools está experimentando activamente, así que envíenos sus comentarios en [Comentarios] Experimento de seguimientos mejorados #122.

Vea también:

Depurar eventos de estilo Recalcular de larga duración con nuevas estadísticas de selector

En Microsoft Edge 109, en la herramienta Rendimiento , puede activar la opción Habilitar instrumentación de representación avanzada (lenta) en la herramienta Rendimiento para acceder a la nueva característica de estadísticas del selector.

Con esta configuración activada:

  1. Seleccione Grabar y ejecute el escenario que quiera mejorar en su sitio web o aplicación.

  2. Seleccione Detener.

  3. Seleccione un evento Recalcular estilo . En la sección inferior de la herramienta Rendimiento , selecciona la pestaña Estadísticas del selector :

    Herramienta Rendimiento Configuración de la casilla

La pestaña Estadísticas del selector proporciona una lista de todos los selectores CSS calculados por el motor del explorador durante el evento Recalcular estilo . Puede ordenar los selectores por el tiempo transcurrido que tardaron en procesarse o por el número de elementos con los que coinciden (la columna Recuento de coincidencias ). Use estos datos para:

  • Busque selectores que el explorador tarde mucho tiempo en procesar y simplifiquelos.
  • Haga que los selectores sean más específicos para mejorar el rendimiento.

Vea también:

Realizar un seguimiento de los objetos descartados por la recolección de elementos no utilizados al asignar el muestreo

En Microsoft Edge 109, el tipo de generación de perfiles de muestreo de asignación de la herramienta Memoria ahora tiene dos opciones nuevas:

  • Incluir objetos descartados por GC principal.

  • Incluir objetos descartados por GC secundario.

Si no selecciona estas opciones, la herramienta Memoria seguirá funcionando igual que antes, notificando las asignaciones que siguen activas al final de la sesión de generación de perfiles. En este modo, el muestreo de asignación no realiza un seguimiento de los objetos que se generan y recolectan mediante elementos no utilizados (GC'd) y, a continuación, desaparecen.

Selecciona ambas opciones si quieres realizar un seguimiento de la basura que genera tu sitio web o aplicación. En el perfil resultante, podrá ver la basura generada por las funciones de JavaScript que luego se GC'd. Use estas opciones si desea reducir la cantidad de elementos no utilizados que genera el código. Para obtener más información sobre las diferencias entre GC mayor y menor, consulte Charla de basura: el recolector de basura del Orinoco.

Opciones de generación de perfiles de muestreo de asignación

Vea también:

Extensión del visualizador de instantáneas de montón para DevTools

Agregue la nueva extensión Visualizador de instantáneas de montón a Microsoft Edge para obtener nuevas visualizaciones de los datos que se encuentran en los archivos de instantáneas del montón. La instalación de esta extensión agrega una nueva herramienta de visualización de instantáneas de montón en DevTools. En la herramienta Visualizador de instantáneas de montón , puede cargar un archivo de instantánea de montón para verlo representado como un gráfico dirigido o como un árbol. Estas nuevas visualizaciones le permiten explorar la cadena de retenedores desde la raíz de la recolección de elementos no utilizados (GC) hasta un nodo individual.

Vista de gráfico:

Visualizador de instantáneas de montón en modo Gráfico

Vista de árbol:

Visualizador de instantáneas de montón en modo de árbol

Vea también:

Mejoras en la Vista rápida en modo Enfoque

Hemos tenido en cuenta sus comentarios y hemos mejorado las opciones de Vista rápida en el modo Concentración. En lugar de ofrecer solo un subconjunto de las herramientas en una lista desplegable de Vista rápida , ahora puede seleccionar cualquier herramienta de DevTools haciendo clic en el botón Más herramientas (icono Más herramientas), como en la barra de herramientas principal de DevTools. Cargue cualquier herramienta en el panel Vista rápida de DevTools para mostrar varias herramientas al mismo tiempo.

El estado de la barra de herramientas de Vista rápida se conserva durante las sesiones de DevTools. El panel Vista rápida se contrae automáticamente si abre la misma herramienta en el panel superior de DevTools.

Añadir una herramienta al panel Vista rápida

Hubo un problema de accesibilidad por el que los usuarios de comandos de voz no pudieron navegar a la pestaña Estilos o a la pestaña Calculado en la herramienta Elementos . Ahora puede acceder a estas pestañas mediante dos nuevos comandos en el menú Comandos:

  • Mostrar estilos
  • Mostrar estilos calculados

Menú de comandos con los comandos

Vea también:

Anuncios del proyecto de Chromium

Microsoft Edge 109 también incluye las siguientes actualizaciones del proyecto de Chromium:

Vea también

  • Se actualizó por última vez el