Referencia de análisis de rendimiento

Esta página es una referencia completa de las características de Microsoft Edge DevTools relacionadas con el análisis del rendimiento.

Navegue para empezar a analizar el rendimiento en tiempo de ejecución para un tutorial guiado sobre cómo analizar el rendimiento de una página con Microsoft Edge DevTools.

Registrar el rendimiento

Registrar el rendimiento en tiempo de ejecución

Grabe el rendimiento en tiempo de ejecución cuando desee analizar el rendimiento de una página mientras se está ejecutando, en lugar de cargarlo.

  1. Vaya a la página que desea analizar.

  2. Elija la pestaña rendimiento en DevTools.

  3. Elija grabar \ (  icono de registro ).

    Grabar

  4. Interactúe con la página. DevTools registra toda la actividad de la página que se produce como resultado de las interacciones.

  5. Vuelva a elegir grabar o elija detener para detener la grabación.

Registrar el rendimiento de la carga

Registre el rendimiento de la carga cuando desee analizar el rendimiento de una página mientras se está cargando, en lugar de ejecutarse.

  1. Vaya a la página que desea analizar.

  2. Abra el panel rendimiento de DevTools.

  3. Elija Actualizar página \ (  Actualizar página ). DevTools registra las métricas de rendimiento mientras se actualiza la página y, a continuación, detiene automáticamente la grabación un par de segundos después de que finalice la carga.

    Actualizar página

DevTools automáticamente acerca de la parte de la grabación donde se produjo la mayor parte de la actividad.

Una grabación de página

Capturar capturas de pantallas durante la grabación

Active la casilla capturas de pantalla para capturar una captura de pantalla de cada fotograma mientras graba.

La casilla de verificación capturas de pantallas

Desplácese hasta ver una captura de pantalla para obtener información sobre cómo interactuar con las capturas de pantalla.

Forzar recolección de elementos no utilizados al grabar

Mientras graba una página, elija recopilar basura \ (  recopilar icono de basura ) para forzar la recolección de elementos no utilizados.

Recopilar basura

Mostrar configuración de grabación

Elija configuración de captura \ (  configuración de captura ) para exponer más opciones de configuración relacionadas con el modo en que DevTools captura las grabaciones de rendimiento.

La sección configuración de captura

Deshabilitar ejemplos de JavaScript

De forma predeterminada, la sección principal de una grabación muestra las pilas de llamadas detalladas de las funciones de JavaScript a las que se llamó durante la grabación. Para deshabilitar estas pilas de llamadas:

  1. Abra el menú de configuración de captura . Vaya a Mostrar configuración de grabación.
  2. Active la casilla deshabilitar ejemplos de JavaScript .
  3. Realizar una grabación de la página.

Las 2 figuras siguientes muestran la diferencia entre deshabilitar y habilitar muestras de JavaScript. La sección principal de la grabación es mucho más corta cuando el muestreo está deshabilitado, porque omite todas las pilas de llamadas de JavaScript.

Limitar la red durante la grabación

Para limitar la red durante la grabación:

  1. Abra el menú de configuración de captura . Vaya a Mostrar configuración de grabación.
  2. Establezca red en el nivel deseado de limitación.

Limitar la CPU durante la grabación

Para limitar la CPU durante la grabación:

  1. Abra el menú de configuración de captura . Vaya a Mostrar configuración de grabación.
  2. Establezca la CPU en el nivel deseado de limitación.

El límite es relativo a las capacidades de su equipo. Por ejemplo, la opción 2x ralentización hace que la CPU funcione 2 veces más lentas de lo normal. DevTools no simulan verdaderamente las CPU de los dispositivos móviles, porque la arquitectura de los dispositivos móviles es muy diferente de la de los equipos de escritorio y portátiles.

Activar la instrumentación avanzada de pintura

Para ver la instrumentación de pintura detallada:

  1. Abra el menú de configuración de captura . Vaya a Mostrar configuración de grabación.
  2. Active la casilla Habilitar el instrumental de pintura avanzada (lento) .

Para obtener información sobre cómo interactuar con la información de las pinturas, vaya a Ver capas y Ver generador de perfiles de pintura.

Guardar una grabación

Para guardar una grabación, abra el menú contextual \ (haga clic con el botón derecho ) y elija Guardar perfil.

Guardar perfil

Cargar una grabación

Para cargar una grabación, abra el menú contextual \ (haga clic con el botón derecho ) y elija cargar perfil.

Cargar perfil

Borrar la grabación anterior

Después de realizar una grabación, pulse Borrar grabación \ (  Borrar icono de grabación ) para borrar esa grabación del panel rendimiento .

Borrar grabación

Analizar una grabación de rendimiento

Después de grabar el rendimiento en tiempo de ejecución o el rendimiento de la carga de registros, el panel rendimiento proporciona una gran cantidad de datos para analizar el rendimiento de lo que sucedió.

Seleccionar una parte de una grabación

Arrastre el ratón hacia la izquierda o hacia la derecha en la información general para seleccionar una parte de una grabación. La información general es la sección que contiene los gráficos de fps, CPUy net .

Arrastre el mouse por la información general para aplicar zoom

Para seleccionar una parte con el teclado:

  1. Elija el fondo de la sección principal o cualquiera de las secciones que hay junto a él, como interacciones, redo GPU. Este flujo de trabajo de teclado solo funciona cuando una de estas secciones está en el foco.
  2. Use las W teclas,, A S , D para acercar, mover a la izquierda, alejar y desplazar a la derecha, respectivamente.

Para seleccionar una parte con un panel táctil, complete las siguientes acciones.

  1. Mantenga el mouse sobre la sección Descripción general o en la sección de detalles . La sección de información general es el área que contiene los gráficos de fps, CPUy net . La sección de detalles es el área que contiene la sección principal , la sección interacciones , etc.
  2. Con dos dedos, deslice el dedo hacia arriba para alejar, deslice el dedo hacia la izquierda, deslice el dedo hacia abajo y deslice el dedo hacia la derecha para desplazarse hacia la derecha.

Para desplazarse por un gráfico de llamas largo en la sección principal o en cualquiera de los vecinos, seleccione y mantenga presionado mientras arrastra hacia arriba y hacia abajo. Arrastre hacia la izquierda y hacia la derecha para mover la parte de la grabación elegida.

Buscar actividades

Seleccione Control + F \ (Windows, Linux ) o Command + F \ (MacOS ) para abrir el cuadro de búsqueda en la parte inferior del panel rendimiento .

El cuadro de búsqueda

Para navegar por las actividades que coinciden con la consulta:

  • Use los **** botones \ (  anterior ) y siguiente \ (  siguiente ) anteriores.
  • Seleccione Shift + Enter para seleccionar la anterior o Enter para seleccionar la siguiente.

Para modificar la configuración de la consulta:

  • Presione distinción de mayúsculas y minúsculas \ (  distingue mayúsculas de minúsculas ) para hacer distinción entre mayúsculas y minúsculas.
  • Presione Regex \ (  regex ) para usar una expresión regular en la consulta.

Para ocultar el cuadro de búsqueda, presione Cancelar.

Ver actividad de subproceso principal

Use la sección principal para ver la actividad que se produjo en el subproceso principal de la página.

La sección principal

Elija un evento para ver más información sobre él en la pestaña Resumen . DevTools describe el evento seleccionado.

Más información sobre la función anónima en la pestaña Resumen

DevTools representa la actividad principal del subproceso con un gráfico de llama. El eje x representa la grabación a lo largo del tiempo. El eje y representa la pila de llamadas. Los eventos en la parte superior provocan los eventos que se encuentran por debajo.

Un gráfico de llamas

En la ilustración anterior, un click evento produjo un Function Call en activitytabs.js en la línea 53. A continuación Function Call , revise que se ejecutó una función anónima. La función anónima solicitada, que solicitó a wait Minor GC .

DevTools asigna scripts a colores aleatorios. En la ilustración anterior, las solicitudes de función de un script se muestran coloreadas en verde. Las solicitudes de otra secuencia de comandos tienen colores beige. El amarillo más oscuro representa la actividad de scripting y el evento morado representa la actividad de representación. Estos eventos amarillos y amarillos más oscuros son coherentes en todas las grabaciones.

Navegue a deshabilitar muestras de JavaScript si desea ocultar el gráfico detallado de llamas de solicitudes de JavaScript. Cuando se deshabilitan los ejemplos de JS, solo se muestran los eventos de alto nivel, como Event: click y Function Call de la ilustración anterior str .

Ver actividades en una tabla

Después de grabar una página, no es necesario basarse únicamente en la sección principal para analizar las actividades. DevTools también proporciona tres vistas tabulares para analizar actividades. Cada vista le ofrece una perspectiva diferente en las actividades:

Nota

Las tres secciones siguientes hacen referencia a la misma demostración. Ejecute la demostración usted mismo en la demostración de pestañas de actividad.

Actividades raíz

A continuación se explica el concepto de actividades raíz que se menciona en las secciones árbol de llamadas , pestaña ascendente y registro de eventos .

Las actividades raíz son aquellas que hacen que el explorador realice algún trabajo. Por ejemplo, cuando elige una página web, el explorador ejecuta una Event actividad como actividad raíz. Esto Event puede hacer que se ejecute un controlador, y así sucesivamente.

En el gráfico de llamas de la sección principal , las actividades raíz se encuentran en la parte superior del gráfico. En las pestañas árbol de llamadas y registro de eventos , las actividades raíz son los elementos de nivel superior.

Vaya a la pestaña árbol de llamadas para obtener un ejemplo de actividades raíz.

La ficha árbol de llamadas

Use la pestaña árbol de llamadas para ver qué actividades de raíz hacen la mayor parte del trabajo.

La pestaña árbol de llamadas solo muestra actividades durante la parte seleccionada de la grabación. Desplácese para seleccionar una parte de una grabación para obtener información sobre cómo seleccionar partes.

La ficha árbol de llamadas

En la ilustración anterior, el nivel superior de los elementos de la columna actividad , como Evaluate Script y Parse HTML son las actividades raíz. El anidamiento representa la pila de llamadas. Por ejemplo, en la ilustración anterior, Parse HTML que causó el origen Evaluate Script Compile Script y el (anonymous) .

El tiempo propio representa el tiempo que pasa directamente en esa actividad. Tiempo total representa el tiempo invertido en esa actividad o en cualquiera de los elementos secundarios.

Elija autohora, tiempo totalo actividad para ordenar la tabla por esa columna.

Use el cuadro de texto filtrar para filtrar eventos por nombre de actividad.

De forma predeterminada, el menú agrupar se establece en sin agrupar. Use el menú agrupar para ordenar la tabla actividad según varios criterios.

Elija Mostrar pila más pesada \ (  Mostrar pila más pesada ) para mostrar otra tabla a la derecha de la tabla actividad . Elija una actividad para rellenar la tabla de pila más pesada . La tabla de pilas más pesada muestra qué elementos secundarios de la actividad seleccionada tardaron más tiempo en ejecutarse.

La ficha Bottom-Up

Use la pestaña de abajo para ver las actividades que se ocuparon directamente la mayor parte del tiempo en el agregado.

La pestaña de la parte inferior solo muestra actividades durante la parte seleccionada de la grabación. Desplácese para seleccionar una parte de una grabación para obtener información sobre cómo seleccionar partes.

La ficha Bottom-Up

En la sección principal , diagrama de llamas de la ilustración anterior, navegue hasta que casi prácticamente todo el tiempo se dedicó a ejecutarse Parse HTML . La actividad superior de la pestaña de la parte inferior de la figura anterior es Parse HTML . Vaya a la pestaña de la parte inferior , la actividad más costosa es Layout .

La columna Self Time representa el tiempo agregado directamente en esa actividad, en todas las apariciones.

La columna tiempo total representa el tiempo agregado invertido en esa actividad o en cualquiera de los elementos secundarios.

La ficha registro de eventos

Use la pestaña registro de eventos para ver las actividades en el orden en el que se produjeron durante la grabación.

La pestaña registro de eventos solo muestra actividades durante la parte seleccionada de la grabación. Desplácese para seleccionar una parte de una grabación para obtener información sobre cómo seleccionar partes.

La ficha registro de eventos

La columna hora de inicio representa el punto en el que se inició la actividad, en relación con el inicio de la grabación. Por ejemplo, la hora de inicio del 175.7 ms elemento seleccionado en la figura anterior significa que la actividad comenzó el 175,7 ms después de que se iniciara la grabación.

La columna Self Time representa el tiempo invertido directamente en esa actividad.

La columna tiempo total representa el tiempo invertido directamente en esa actividad o en cualquiera de los elementos secundarios.

Elija hora de inicio, tiempo propioo tiempo total para ordenar la tabla por esa columna.

Use el cuadro de texto filtrar para filtrar las actividades por nombre.

Use el menú duración para filtrar todas las actividades que hayan tardado menos de 1 ms o de 15 ms. De forma predeterminada, el menú duración se establece en todos, lo que significa que se muestran todas las actividades.

Deshabilite las casillas de verificación cargar, scripting, procesamientoo pintura para filtrar todas las actividades de esas categorías.

Ver actividad de la GPU

Ver la actividad de la GPU en la sección GPU .

La sección GPU

Ver actividad rasterizada

Ver la actividad rasterizada en la sección de trama .

La sección trama

Ver interacciones

Use la sección interacciones para buscar y analizar las interacciones del usuario que se produjeron durante la grabación.

La sección interacciones

Una línea roja en la parte inferior de una interacción representa el tiempo dedicado a esperar el subproceso principal.

Elija una interacción para ver más información sobre ella en la pestaña Resumen .

Analizar fotogramas por segundo (FPS)

DevTools proporciona numerosas formas de analizar fotogramas por segundo:

El gráfico de FPS

El gráfico fps proporciona una descripción general de la velocidad de fotogramas en toda la duración de una grabación. En general, cuanto más alto sea la barra verde, mejor será la velocidad de fotogramas.

Una barra roja encima del gráfico de fps es una advertencia de que la velocidad de fotogramas ha disminuido tan poco que probablemente se ha dañado la experiencia del usuario.

El gráfico de FPS

La sección marcos

La sección Marcos le indica exactamente cuánto tarda un marco en particular.

Mantenga el mouse sobre un marco para ver una información sobre herramientas con más información sobre ella.

Desplazar el puntero sobre un marco

Elija un marco para ver más información sobre el marco en la pestaña Resumen . DevTools esquematiza el fotograma seleccionado en azul.

Ver un marco en la pestaña Resumen

Ver solicitudes de red

Expanda la sección red para ver una cascada de solicitudes de red que se produjeron durante la grabación.

La sección red

Las solicitudes se codifican en colores de la siguiente manera:

  • HTML: azul
  • CSS: morado
  • JS: amarillo
  • Imágenes: verde

Elija una solicitud para ver más información sobre ella en la pestaña Resumen . Por ejemplo, en la ilustración anterior, la pestaña Resumen muestra más información sobre la solicitud azul seleccionada en la sección red .

Un cuadrado de color azul más oscuro en la parte superior izquierda de una solicitud significa que es una solicitud de mayor prioridad. Un cuadrado más claro significa menor prioridad. Por ejemplo, en la ilustración anterior, el azul, la solicitud seleccionada es de mayor prioridad y el verde que está debajo es de menor prioridad.

En el 1º de los siguientes valores, la solicitud de www.bing.com se representa mediante una línea a la izquierda, una barra en el centro con una parte oscura y una parte oscura y una línea a la derecha. En la segunda de las siguientes figuras, se muestra la representación correspondiente de la misma solicitud en la ficha intervalos del panel red . A continuación se muestra cómo se asignan entre sí estas dos representaciones:

  • La línea izquierda es todo hasta el Connection Start grupo de eventos, ambos incluidos. En otras palabras, es todo lo antes Request Sent y exclusivo.
  • La parte clara de la barra es Request Sent y Waiting (TTFB) .
  • La parte oscura de la barra es Content Download .
  • Esencialmente, la línea adecuada es el tiempo dedicado a esperar el hilo principal. Esto no se representa en la pestaña intervalos .

Ver métricas de memoria

Active la casilla memoria para ver las métricas de memoria de la última grabación.

La casilla memoria

DevTools muestra un nuevo gráfico de memoria , encima de la pestaña Resumen . También hay un nuevo gráfico debajo del gráfico net , denominado montón. El gráfico de montones proporciona la misma información que la línea de montón JS en el gráfico de memoria .

Métricas de memoria

Las líneas de color del gráfico se asignan a las casillas coloreadas encima del gráfico.
Desactive una casilla para ocultar la categoría en el gráfico.

El gráfico solo muestra la región de la grabación que está seleccionada actualmente. Por ejemplo, en la ilustración anterior, el gráfico de memoria solo muestra el uso de memoria de aproximadamente la marca de MS 400 a la marca de 1750 ms.

Ver la duración de una parte de una grabación

Al analizar una sección como la red o Main, a veces necesitarás una estimación más precisa de cuánto tiempo han tardado determinados eventos. Espera Shift , elige y mantén presionado, y arrastra hacia la izquierda o la derecha para seleccionar una parte de la grabación. En la parte inferior de la selección, DevTools muestra cuánto tiempo duró esa parte.

Ver la duración de una parte de una grabación

Ver una captura de pantalla

Vaya a capturar capturas de pantallas mientras graba para obtener información sobre cómo activar las capturas de pantallas.

Pase el puntero por la información general para ver una captura de pantalla de cómo se vio la página durante ese momento de la grabación. La información general es la sección que contiene los gráficos de CPU, fpsy net .

Ver una captura de pantalla

También puede ver capturas de pantallas si elige un marco en la sección Marcos . DevTools muestra una versión reducida de la captura de pantalla en la pestaña Resumen .

Ver una captura de pantalla en la pestaña Resumen

Elija la miniatura en la pestaña Resumen para acercar la captura de pantalla.

Ampliar la captura de pantalla desde la pestaña Resumen

Ver información de capas

Para ver la información sobre las capas avanzadas de un marco:

  1. Activar el instrumental de pintura avanzado.

  2. Seleccione un marco de la sección Marcos . DevTools muestra información sobre las capas en la ficha nuevas capas , junto a la ficha registro de eventos .

    El panel capas

Desplace el puntero sobre una capa para resaltarla en el diagrama.

Resaltar una capa

Para mover el diagrama:

  • Elija modo panorámico \ (  modo panorámico ) para desplazarse por los ejes X e y.
  • Elija modo de rotación \ (  modo de giro ) para girar a lo largo del eje Z.
  • Elija restablecer transformación \ (  restablecer transformación ) para restablecer el diagrama a la posición original.

Ver generador de perfiles de pintura

Para ver información avanzada sobre un evento de pintura:

  1. Activar.

  2. Seleccione un evento de pintura en la sección principal .

    Pestaña generador de perfiles de pintura

Analizar el rendimiento de la representación con la pestaña representación

Use las características de la pestaña representación para poder visualizar el rendimiento de la representación de la página.

Para abrir la pestaña representación :

  1. Abrir el menú de comandos.

  2. Empiece Rendering a escribir y seleccione Show Rendering . DevTools muestra la ficha representación en la parte inferior de la ventana de DevTools.

    La pestaña representación

Ver fotogramas por segundo en tiempo real con el medidor de FPS

El medidor de fps es una superposición que aparece en la esquina superior derecha de su ventanilla. Proporciona una estimación en tiempo real de FPS a medida que se ejecuta la página. Para abrir el medidor de fps:

  1. Abra la pestaña representación . Na analiza el rendimiento de la representación con la pestaña representación.

  2. Active la casilla de verificación de medidor de fps .

    El medidor de FPS

Ver los eventos de pintura en tiempo real con parpadeo de pintura

Use las intermitencias de pintura para obtener una vista en tiempo real de todos los eventos de pintura en la página. Cada vez que se vuelve a pintar una parte de la página, DevTools esquematiza esa sección en verde.

Para activar los parpadeos de pintura, complete las siguientes acciones.

  1. Abra la pestaña representación . Desplácese hasta analizar el rendimiento de la representación con la pestaña representación.

  2. Active la casilla de pintura parpadeante .

    Pintura parpadeante

Ver una superposición de capas con bordes de capas

Use bordes de capas para ver una superposición de los bordes de la capa y los mosaicos en la parte superior de la página.

Para activar los bordes de capas, complete las siguientes acciones:

  1. Abra la pestaña representación . Desplácese hasta analizar el rendimiento de la representación con la pestaña representación.

  2. Active la casilla bordes de capas .

    Bordes de capas

Navegue hasta los comentarios de debug_colors. CC para obtener una explicación de los códigos de colores.

Buscar problemas de rendimiento de desplazamiento en tiempo real

Use los problemas de rendimiento de desplazamiento para identificar los elementos de la página que tienen detectores de eventos relacionados con el desplazamiento que pueden dañar el rendimiento de la página.
DevTools subraya los elementos potencialmente problemáticos de verde azulado.

Para ver los problemas de rendimiento del desplazamiento, complete las siguientes acciones.

  1. Abra la pestaña representación . Desplácese hasta analizar el rendimiento de la representación con la pestaña representación.

  2. Active la casilla de verificación de problemas de rendimiento de desplazamiento .

    Los problemas de rendimiento de desplazamiento indican que los objetos restringidos de ventanilla sin capas pueden dañar el rendimiento del desplazamiento

Contactar al equipo de Microsoft Edge DevTools

Use las siguientes opciones para discutir las nuevas características y cambios de la publicación, o cualquier otro tema relacionado con DevTools.

  • Envíe sus comentarios con el icono Enviar comentarios o seleccione Alt + Shift + I \ (Windows, Linux ) o Option + Shift + I \ (MacOS ) en DevTools.
  • Tweet a @EdgeDevTools.
  • Enviar una sugerencia a la webque queremos.
  • Para archivar errores sobre este artículo, use la siguiente sección de comentarios .

El icono enviar comentarios en el DevTools de Microsoft Edge

Nota

Algunas partes de esta página son modificaciones basadas en el trabajo creado y compartido por Google y se usan según los términos descritos en la Licencia internacional de Creative Commons Attribution 4.0.
La página original se encuentra aquí y está modificada por Kayce vascos \ (redactor técnico, Chrome DevTools \ & Lighthouse ).

Licencia de Creative Commons
Este trabajo dispone de licencia conforme a Licencia internacional de Creative Commons Attribution 4.0.