Compartir vía

Uso compartido de un seguimiento de rendimiento con más datos

Los datos que registra la herramienta Rendimiento se pueden exportar a archivos en disco, que también pueden incluir anotaciones, contenido de recursos (contenido HTML, CSS y JavaScript) y mapas de origen. Los archivos exportados se denominan seguimientos. Un seguimiento exportado es un .json archivo que se puede importar en DevTools en cualquier momento.

Al exportar un seguimiento desde la herramienta Rendimiento, puede elegir si desea incluir datos adicionales:

  • Anotaciones.
  • Contenido de recursos (como contenido HTML, CSS y JavaScript).
  • Asignaciones de origen de script.

También puede controlar si el archivo de seguimiento está comprimido.

La herramienta Rendimiento registra los datos en tiempo de ejecución sobre la página web. La exploración de los datos grabados permite mejorar el rendimiento en tiempo de ejecución de la página web.

La exportación de seguimientos de rendimiento es útil cuando se desea compartir estos archivos con otras personas para obtener ayuda con la investigación de problemas.

Los seguimientos se pueden guardar para incluir anotaciones, contenido de recursos (como scripts) y mapas de origen de la página web. Esta información adicional facilita el análisis de un archivo de seguimiento importado, recreando el entorno en el que se registró el seguimiento y proporcionando archivos de origen originales.

Los archivos de seguimiento exportados son compatibles con otros exploradores que se basan en el motor de Chromium.

Cuando se importa un seguimiento que incluye anotaciones, contenido de recursos (como scripts) o mapas de origen en DevTools, aparece una nueva ventana 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. Esta instancia de DevTools solo contiene las herramientas rendimiento y orígenes .

Exportación de un seguimiento desde la herramienta Rendimiento

Para grabar el rendimiento de los aspectos de una página web y, a continuación, exportar una grabación de rendimiento:

  1. Abra una página web, como Para hacer, en una nueva ventana o pestaña.

  2. Haga clic con el botón derecho en la página web y, a continuación, seleccione Inspeccionar.

    Se abre DevTools.

  3. En DevTools, abra la herramienta Rendimiento (icono Rendimiento).

  4. Haga clic en el botón Grabar (icono Grabar).

  5. Interactúe con la página web para ejecutar el escenario del que desea investigar el rendimiento.

    Por ejemplo, en la página de demostración, en el cuadro de texto Agregar una tarea , escriba task 1y, a continuación, presione Entrar.

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

    Aparece el perfil de rendimiento.

  7. Haga clic en el botón Guardar seguimiento (guardar seguimiento).

    Se abre el cuadro de diálogo Guardar seguimiento de rendimiento (dentro de la herramienta Rendimiento ):

    Cuadro de diálogo Guardar seguimiento de rendimiento

  8. Active o desactive las casillas para controlar qué información incluir en el archivo de seguimiento:

    • Casilla Incluir anotaciones . Esta casilla solo aparece si hay anotaciones.

    • Casilla Incluir contenido de recursos .

    • Casilla Incluir mapas de origen de script . (Primero debe seleccionar la casilla Incluir contenido de recursos ).

    Opcionalmente, desactive la casilla Comprimir con gzip .

    A continuación se muestran detalles sobre estas casillas.

  9. Haga clic en el botón Guardar .

    Se cierra el cuadro de diálogo pequeño de la herramienta Rendimiento y se abre el cuadro de diálogo Guardar como .

  10. Vaya a una carpeta en la que guardar el archivo de seguimiento en el disco.

    Por ejemplo, en Windows, en el /Downloads/ directorio, haga clic en el botón Nueva carpeta y, a continuación, cree un /traces/ directorio en el que guardar el archivo de seguimiento de rendimiento:

    Carpeta Seguimientos

  11. Acepte o modifique el nombre de archivo, como Trace-20251103T154500.json.

  12. Haga clic en el botón Guardar .

    Se guarda el archivo de seguimiento de rendimiento, como C:\Users\localAccount\Downloads\traces\Trace-20251103T154500.json.

Incluir anotaciones

En el cuadro de diálogo Guardar seguimiento de rendimiento dentro de la herramienta Rendimiento , la casilla Incluir anotaciones controla si se deben incluir anotaciones que se agregaron a un perfil de rendimiento.

Las anotaciones ayudan a llamar la atención y resaltar secciones específicas de un seguimiento, lo que facilita la comprensión de los detalles al ver el seguimiento.

Vea también:

Incluir contenido de recursos

En el cuadro de diálogo Guardar seguimiento de rendimiento de la herramienta Rendimiento , al activar la casilla Incluir contenido de recursos se incluye el contenido de archivos HTML, archivos CSS y scripts de JavaScript en el archivo de seguimiento exportado. Todos los scripts cargados (excepto las extensiones) se guardan en el archivo de seguimiento.

Cuando el archivo de seguimiento se importa posteriormente en DevTools, estos recursos se pueden ver en la herramienta Orígenes . La herramienta Orígenes resuelve las referencias de código fuente que se encuentran en el seguimiento importado para mostrar el código fuente original.

Scripts de extensión

Algunas conclusiones de rendimiento requieren contenido de recursos (como scripts) para el análisis. El contenido de los scripts de extensión no se incluye en el archivo de seguimiento, incluso cuando se activa esta casilla, ya que los scripts de extensión pueden contener información confidencial.

Sin embargo, los datos de generación de perfiles de scripts de extensión todavía se guardan en el archivo de seguimiento, ya que los scripts de extensión pueden afectar al rendimiento.

Vea también:

Incluir mapas de origen de script

En el cuadro de diálogo Guardar seguimiento de rendimiento de la herramienta Rendimiento , al activar la casilla Incluir mapas de origen de script se incluyen los archivos de contenido de producción minificados y las asignaciones de nuevo a los archivos de código fuente originales. DevTools usa los mapas de origen para cargar los archivos originales y reemplazar el código minificado por el código original.

Cuando se abra posteriormente el archivo de seguimiento resultante, la herramienta Rendimiento mostrará los nombres de función originales y la herramienta Orígenes mostrará los nombres de archivo originales. Precaución: esto puede exponer código fuente al destinatario del archivo de seguimiento.

Algunas conclusiones de rendimiento requieren mapas de origen para su análisis. Consulte Obtención de información procesable en referencia de características de rendimiento.

Para que esta casilla esté disponible en lugar de atenuada, debe seleccionar la casilla Incluir contenido de recursos , que incluye contenido de script en el archivo de seguimiento.

Vea también:

Comprimir con gzip

En el cuadro de diálogo Guardar seguimiento de rendimiento de la herramienta Rendimiento , la casilla Comprimir con gzip está seleccionada de forma predeterminada. Esta opción ayuda a comprimir grandes seguimientos de rendimiento para ahorrar espacio en disco y hace que la importación y el procesamiento de archivos de seguimiento sean más rápidos en DevTools.

  • Si esta casilla está seleccionada, la extensión de nombre de archivo predeterminada es .gz.
  • Si esta casilla está desactivada, la extensión de nombre de archivo predeterminada es .json.

Abrir un archivo de seguimiento de rendimiento en DevTools

Cuando se abre un archivo de seguimiento (importado) en DevTools, se abre una nueva pestaña de DevTools especializada en el explorador, que contiene solo las herramientas Rendimiento y Orígenes . El seguimiento puede incluir anotaciones, contenido de recursos (como scripts) y mapas de origen. Esta nueva pestaña 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.

Para abrir un archivo de seguimiento guardado en DevTools:

  1. Abra Microsoft Edge u otro explorador basado en Chromium.

  2. Haga clic con el botón derecho en la página web o en la pestaña vacía y, a continuación, seleccione Inspeccionar.

    Se abre DevTools.

  3. En DevTools, seleccione la herramienta Rendimiento (icono Rendimiento).

  4. Haga clic en el botón Cargar seguimiento (icono de seguimiento de carga).

    Se abre el cuadro de diálogo Abrir .

  5. Vaya a un archivo de seguimiento compartido, como C:\Users\localAccount\Downloads\traces\Trace-20251103T154500.json.gz.

  6. Seleccione el archivo, como el archivo Trace-20251103T154500.json.gzcomprimido.

  7. Haga clic en el botón Abrir .

    Se abre una pestaña especial de DevTools en el explorador, completamente rellenada con DevTools, que abre las herramientas Orígenes y rendimiento :

    Pestaña DevTools especial

    La barra de direcciones muestra una dirección URL especial, como:

    • devtools://devtools/bundled/trace_app.html
    • devtools://devtools/bundled/rehydrated_devtools_app.html

    Se trata de una pestaña especial dedicada a DevTools del explorador, en lugar de la ventana DevTools desacoplada. Se puede acceder a otras herramientas relevantes que pueden ser útiles para analizar el seguimiento haciendo clic en el botón Más herramientas , como:

    • Recursos para programadores
    • Origen rápido
    • Renderización
    • Búsqueda
    • Sensores

Vea también:

Vea también

Herramienta Orígenes :

Herramienta de rendimiento :

GitHub:

Documentación de Chrome:

  • Last updated on