Compartir seguimientos de memoria y rendimiento mejorados

Las herramientas de rendimiento y memoria registran los datos en tiempo de ejecución de la página web. La exploración de los datos grabados permite mejorar el uso de memoria de la página web o el rendimiento en tiempo de ejecución.

Además, los datos grabados se pueden exportar a archivos en disco. Los archivos exportados se denominan seguimientos.

Exportar seguimientos de memoria y rendimiento es útil cuando se desea compartir estos archivos con otras personas para obtener ayuda con la investigación de problemas. Un seguimiento exportado es un .jsonarchivo , .heapsnapshot, .heapprofileo .heaptimeline que se puede importar en DevTools en cualquier momento.

De forma predeterminada, los seguimientos contienen información mínima sobre los datos en tiempo de ejecución de la página web de seguimiento, pero también se pueden exportar como seguimientos mejorados, como una característica experimental. Un seguimiento mejorado es un .devtools archivo que contiene muchos más datos en tiempo de ejecución de la página web de seguimiento. Los seguimientos mejorados facilitan la resolución de problemas de rendimiento y memoria, recreando el entorno en el que se registró el seguimiento y proporcionando archivos de origen originales.

El uso de seguimientos mejorados permite resolver de forma confiable las referencias de código fuente que se encuentran en los seguimientos importados al código en tiempo de ejecución real en la herramienta Orígenes . Además, si los mapas de origen estaban presentes cuando se registró un seguimiento o si están almacenados en el servidor de símbolos de Azure Artifacts, también será posible resolver las referencias de código a su código fuente original.

Diferencias entre seguimientos normales y mejorados

Seguimientos normales

Un seguimiento normal solo contiene parte de la información que está presente en una página web. Gran parte del código original se pierde y solo se conservan los datos de memoria o rendimiento grabados de la página web en el seguimiento. Por ejemplo, al importar un .heapsnapshot seguimiento de memoria que se registró durante otra sesión de DevTools o en otro equipo, no hay ninguna manera de pasar de un objeto de la herramienta Memoria a su constructor en la herramienta Orígenes .

De forma similar, en la herramienta Rendimiento , al importar un seguimiento de rendimiento registrado anteriormente:

• El seguimiento debe haberse registrado en el mismo sitio y en la misma configuración para poder asignar desde el informe de rendimiento al JavaScript que se estaba ejecutando en el explorador.
• Si los nombres de archivo o función han cambiado desde que se realizó la grabación, la asignación es propensa a errores.

Seguimientos mejorados

Un seguimiento mejorado conserva mucha más información sobre la página web donde tuvo lugar la grabación. Por ejemplo, un seguimiento mejorado contiene el contexto de ejecución y la lista de scripts analizados y, opcionalmente, puede contener mensajes de consola, orígenes de script y una instantánea del árbol DOM.

Cuando se importa un seguimiento mejorado en DevTools, aparece una nueva ventana de DevTools. Esta nueva ventana no está conectada a la página web que se ejecuta en el explorador y, en su lugar, vuelve a crear parte del entorno en el que se registró originalmente el seguimiento.

Por ejemplo, si se registró una instantánea del DOM en el seguimiento mejorado, la herramienta Elementos muestra esta instantánea. Si se registraron mensajes de consola, la herramienta Consola imprime estos mensajes. La herramienta Orígenes muestra los scripts que estaban presentes durante la grabación.

Los seguimientos mejorados solo se pueden importar en Microsoft Edge, mientras que los seguimientos normales son compatibles con otros exploradores basados en el motor de Chromium.

Establecer el tipo de seguimiento predeterminado

De forma predeterminada, las herramientas de rendimiento y memoria exportan datos como seguimientos normales, pero puede establecer el tipo de seguimiento predeterminado en enhanced.

Para cambiar el tipo de seguimiento:

1. Abra DevTools presionando Ctrl+Mayús+I (Windows, Linux) o Comando+Opción+I (macOS).

2. En DevTools, en la esquina superior derecha, haga clic en Configuración (). Se abre la configuración , con la página Preferencias seleccionada.

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

   

4. Los seguimientos mejorados también pueden incluir opcionalmente mensajes de consola, orígenes de script y elementos DOM. Para controlar lo que se debe incluir en seguimientos mejorados, use estas casillas:

   • Incluir el mensaje de consola en seguimientos mejorados.
   • Incluir orígenes de script en seguimientos mejorados.
   • Incluya instantáneas DOM en seguimientos mejorados (experimentales).

   

Exportación de un seguimiento desde la herramienta Rendimiento

Para exportar una grabación de rendimiento desde la herramienta Rendimiento :

1. Abra la herramienta Rendimiento .

2. Haga clic en Grabar y ejecute el escenario del que desea investigar el rendimiento de interactuando con la página web y, a continuación, haga clic en Detener.

3. Cuando aparezca el perfil de rendimiento, haga clic en Guardar perfil ():

   

4. Elija una ubicación para guardar el archivo de seguimiento en el disco:

   

   El seguimiento es un .json archivo si establece el tipo de seguimiento predeterminado en normal y es un .devtools archivo si establece el tipo de seguimiento predeterminado en mejorado.

Exportación de un seguimiento desde la herramienta Memoria

Para exportar información de memoria desde la herramienta Memoria :

1. Abra la herramienta Memoria .

2. Elija el tipo de grabación de memoria que le interesa, como Instantánea de montón. Las instrucciones siguientes son similares si elige un tipo de grabación de memoria diferente. Para obtener más información sobre los diferentes tipos de grabación de memoria, consulte Corrección de problemas de memoria.

3. Haga clic en Tomar instantánea.

4. Cuando se registre la instantánea, haga clic en el botón Guardar de la barra lateral de la herramienta Memoria :

   

5. Elija una ubicación para guardar el archivo de seguimiento en el disco:

   

   El seguimiento es un .heapsnapshotarchivo , .heapprofileo .heaptimeline si establece el tipo de seguimiento predeterminado en normal y es un .devtools archivo si establece el tipo de seguimiento predeterminado en mejorado.

Elección de un tipo de seguimiento al exportar

Los seguimientos se exportan como seguimientos normales o mejorados, según la opción Exportar seguimientos de memoria y rendimiento mejorados . Para cambiar el tipo de seguimiento predeterminado, consulte Establecer el tipo de seguimiento predeterminado. También puede elegir el tipo de seguimiento que desee al exportar.

Para elegir un tipo de seguimiento diferente al exportar:

1. Haga clic con el botón derecho (o mantenga presionada la tecla Ctrl y haga clic en) en el botón Guardar perfil () de la herramienta Rendimiento o en el botón Guardar de la herramienta Memoria .

2. Haga clic en .devtools (formato mejorado para Microsoft Edge) si desea exportar un seguimiento mejorado o haga clic en .json (funciona con Microsoft Edge y Chromium exploradores) si desea un seguimiento normal.

   

Importación de un seguimiento en la herramienta rendimiento

Para importar un seguimiento en la herramienta Rendimiento :

1. Abra la herramienta Rendimiento .

2. Haga clic en Cargar perfil ():

   

3. Busque el archivo de seguimiento en el disco. Es un .devtools archivo (para seguimientos mejorados) o un .json archivo (para seguimientos normales):

   

4. Abra el archivo.

   Si el archivo es un seguimiento mejorado, aparece una nueva ventana DevTools que muestra el perfil de rendimiento y la información de tiempo de ejecución adicional que se registró en las herramientas Orígenes, Consola y Elementos .

   Si el archivo es un seguimiento normal, el perfil de rendimiento aparece en la herramienta Rendimiento y el resto de las pestañas DevTools siguen mostrando información relacionada con la página web actual.

Importación de un seguimiento en la herramienta Memoria

Para importar un seguimiento en la herramienta Memoria :

1. Abra la herramienta Memoria .

2. Haga clic en el botón Cargar perfil :

   

3. Busque el archivo de seguimiento en el disco. Es un .devtools archivo (para seguimientos mejorados) o , .heaptimelineo .heapprofile un .heapsnapshotarchivo (para seguimientos normales).

   

4. Abra el archivo.

   Si el archivo es un seguimiento mejorado, aparece una nueva ventana DevTools que muestra la información de memoria y la información de tiempo de ejecución adicional que se registró en las herramientas Orígenes, Consola y Elementos .

   Si el archivo es un seguimiento normal, la información de memoria aparece en la herramienta Memoria y el resto de las pestañas DevTools siguen mostrando información relacionada con la página web actual.

Compartir comentarios sobre seguimientos mejorados

Seguimientos mejorados es una característica experimental que, con suerte, facilita la colaboración en la resolución de problemas de rendimiento y memoria mediante la visualización de código sin determinar.

El equipo de Microsoft Edge DevTools agradece cualquier comentario que pueda tener sobre seguimientos mejorados. Si ha probado esta nueva característica, no dude en informar de cualquier problema o idea al respecto en nuestro repositorio de GitHub.