Referencia de características de rendimiento

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

Para ver un tutorial paso a paso sobre cómo analizar el rendimiento de una página mediante la herramienta Rendimiento, consulte Análisis del rendimiento en tiempo de ejecución (tutorial).

Las imágenes de esta página muestran DevTools desacoplado en su propia ventana dedicada. Para obtener más información sobre cómo desacoplar DevTools, vea Undock DevTools en una ventana independiente en Cambiar ubicación de DevTools (Desacoplar, Acoplar a la parte inferior, Acoplar a la izquierda).

Contenido detallado:

• Abrir la herramienta Rendimiento
• Rendimiento de registros
  • Registro del rendimiento en tiempo de ejecución
  • Rendimiento de carga de registros
  • Captura de pantalla de capturas de pantalla durante la grabación
  • Forzar la recolección de elementos no utilizados durante la grabación
  • Mostrar la configuración de grabación
  • Deshabilitar ejemplos de JavaScript
  • Limitación de la red durante la grabación
  • Limitación de la CPU durante la grabación
  • Habilitación de estadísticas del selector CSS
  • Habilitación de la instrumentación avanzada de pintura
• Anotación de una grabación y uso compartido
  • Guardar y compartir una grabación
  • Carga de una grabación
• Borrar la grabación anterior
• Análisis de una grabación de rendimiento
  • Obtener información útil
  • Navegar por la grabación
    • Uso de métodos abreviados de teclado para navegar
    • Seleccionar una parte de una grabación
    • Acercar partes de una grabación y cambiar entre niveles de zoom
    • Desplazar un gráfico de llama larga
  • Actividades de búsqueda
  • Cambiar el orden de las pistas y ocultarlas
  • Visualización de la actividad del subproceso principal
  • Leer el gráfico de llamas
  • Seguimiento de los iniciadores de eventos
  • Ocultar funciones y sus elementos secundarios en el gráfico de llamas
    • Omitir scripts en el gráfico de llamas
  • Visualización de actividades en una tabla
    • Actividades raíz
    • Pestaña Abajo arriba
    • Pestaña Árbol de llamadas
    • Pestaña Registro de eventos
  • Visualización de marcadores de rendimiento
  • Visualización de tiempos personalizados
  • Visualización de interacciones
  • Ver los cambios de diseño
  • Visualización de animaciones
  • Visualización de la actividad de GPU
  • Visualización de la actividad de ráster
  • Analizar fotogramas por segundo (FPS)
    • Sección Marcos
  • Visualización de solicitudes de red
  • Visualización de métricas de memoria
  • Visualización de la duración de una parte de una grabación
  • Ver una captura de pantalla
  • Visualización de la información de capas
  • Visualización del generador de perfiles de pintura
  • Visualización de estadísticas del selector CSS
  • Visualización de mensajes entre ventanas, iframes y trabajos dedicados
• Análisis del rendimiento de representación con la herramienta Representación
  • Visualización de fotogramas por segundo en tiempo real con el medidor fps
  • Visualización de eventos de pintura en tiempo real con el parpadeo de pintura
  • Visualización de una superposición de capas con bordes de capa
  • Buscar problemas de rendimiento de desplazamiento en tiempo real
  • Deshabilitar fuentes locales
• Visualización de pérdidas de memoria (herramienta de rendimiento: casilla Memoria)

Abrir la herramienta Rendimiento

Para usar las secciones de esta página, abra la herramienta Rendimiento en DevTools:

1. Para abrir DevTools, haga clic con el botón derecho en la página web y, a continuación, seleccione Inspeccionar. O bien, presione Ctrl+Mayús+I (Windows, Linux) o Comando+Opción+I (macOS). Se abre DevTools.

2. En DevTools, en la barra de actividad, seleccione la pestaña Rendimiento . Si esa pestaña no está visible, haga clic en el botón Más herramientas ().

Rendimiento de registros

En las secciones siguientes se describe cómo registrar el rendimiento de una página web en DevTools.

Registro del rendimiento en tiempo de ejecución

Para analizar el rendimiento de una página web mientras se ejecuta (en lugar de mientras se carga):

1. Vaya a la página web que desea analizar, como la demostración de Photo Gallery.

2. En DevTools, abra la herramienta Rendimiento .

3. Haga clic en el botón Grabar ().

   

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

5. Vuelva a hacer clic en Grabar . O bien, haga clic en Detener para detener la grabación.

   La herramienta Rendimiento muestra la grabación.

Rendimiento de carga de registros

Para analizar el rendimiento de una página web mientras se carga (en lugar de mientras se ejecuta):

1. Vaya a la página web que desea analizar, como la demostración de Photo Gallery.

2. En DevTools, abra la herramienta Rendimiento .

3. Haga clic en el botón Actualizar página ():

   

   DevTools registra las métricas de rendimiento mientras la página se actualiza y, a continuación, detiene automáticamente la grabación un par de segundos después de que finalice la carga. A continuación, DevTools muestra la grabación y acerca automáticamente la parte de la grabación donde se produjo la mayor parte de la actividad:

   

Captura de pantalla de capturas de pantalla durante la grabación

Para capturar una captura de pantalla de cada fotograma durante la grabación, active la casilla Capturas de pantalla :

Para obtener información sobre cómo interactuar con capturas de pantalla, vea Ver una captura de pantalla a continuación.

Forzar la recolección de elementos no utilizados durante la grabación

Para forzar la recolección de elementos no utilizados mientras está grabando una página, haga clic en el botón Recopilar elementos no utilizados (

Mostrar la configuración de grabación

Para exponer más configuraciones relacionadas con cómo DevTools captura las grabaciones de rendimiento, en la herramienta Rendimiento , haga clic en el botón Capturar configuración (). Las casillas y listas desplegables se muestran en la parte superior de la herramienta Rendimiento :

Deshabilitar ejemplos de JavaScript

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

1. En la herramienta Rendimiento , haga clic en el botón Capturar configuración ().

2. Active la casilla Deshabilitar ejemplos de JavaScript .

3. Realice una grabación de la página.

Las dos figuras siguientes muestran la diferencia entre deshabilitar y habilitar ejemplos de JavaScript. La sección Principal de la grabación es mucho más corta cuando el muestreo de JavaScript está deshabilitado, ya que la grabación omite las pilas de llamadas de JavaScript.

Ejemplo de una grabación cuando se deshabilitan los ejemplos de JS:

Ejemplo de una grabación cuando se habilitan ejemplos de JS:

Limitación de la red durante la grabación

Para limitar la red durante la grabación:

1. En la herramienta Rendimiento , haga clic en el botón Capturar configuración (). Consulte Show recording settings (Mostrar configuración de grabación), anteriormente.

2. Establezca Red en el nivel de limitación deseado.

   Se muestra un icono de advertencia en la pestaña de la herramienta Red para recordarle que la limitación está habilitada.

Limitación de la CPU durante la grabación

Para limitar la CPU durante la grabación:

1. En la herramienta Rendimiento , haga clic en el botón Capturar configuración (). Consulte Show recording settings (Mostrar configuración de grabación), anteriormente.

2. Establezca la CPU en el nivel de limitación deseado.

   Se muestra un icono de advertencia en la pestaña de la herramienta Rendimiento para recordarle que la limitación está habilitada.

La limitación es relativa a las capacidades del equipo. Por ejemplo, la opción de ralentización 2 veces hace que la CPU funcione dos veces más lenta de lo normal. DevTools no simula realmente las CPU de los dispositivos móviles, ya que la arquitectura de los dispositivos móviles es muy diferente de la de los equipos de escritorio y portátiles.

Habilitación de estadísticas del selector CSS

Para ver las estadísticas de los selectores de reglas CSS durante eventos de actualización de estilo de ejecución prolongada:

1. Haga clic en el botón Capturar configuración (). Consulte Show recording settings (Mostrar configuración de grabación), anteriormente.

2. Active la casilla Habilitar estadísticas del selector CSS .

Para obtener más información, vea Analizar el rendimiento del selector CSS durante los eventos de recalcular estilo.

Habilitación de la instrumentación avanzada de pintura

Para ver la instrumentación de pintura detallada:

1. Haga clic en el botón Capturar configuración (). Consulte Show recording settings (Mostrar configuración de grabación), anteriormente.

2. Active la casilla Habilitar instrumentación avanzada de pintura (lenta).

Para obtener información sobre cómo interactuar con la información de pintura, consulte Visualización de la información de capas, a continuación, y Visualización del generador de perfiles de pintura, a continuación.

Anotación de una grabación y uso compartido

Una vez que se registra un seguimiento de rendimiento, puede analizarlo y anotarlo para compartir sus hallazgos.

Para anotar una grabación, abra la pestaña Anotaciones en la barra lateral de la herramienta Rendimiento . Si la barra lateral no está visible, haga clic en el botón Mostrar barra lateral ().

La pestaña Anotaciones de la barra lateral contiene inicialmente instrucciones sobre cómo agregar anotaciones. Después de crear anotaciones, como se muestra a continuación, la pestaña enumera las anotaciones existentes y le permite eliminarlas.

Hay varias maneras de agregar una anotación:

• Etiquetar un elemento: para etiquetar un elemento en el seguimiento de rendimiento, haga doble clic en el elemento, escriba la etiqueta en el cuadro de texto y, a continuación, presione Entrar.

• Conectar dos elementos: para dibujar una flecha entre dos elementos del seguimiento de rendimiento, haga doble clic en el primer elemento, haga clic en el icono de flecha situado junto a él y, a continuación, haga clic en el segundo elemento.

• Etiquetar un intervalo de tiempo: para dibujar y etiquetar un intervalo de tiempo arbitrario en el seguimiento de rendimiento, mantenga presionada la tecla Mayús y arrastre desde el inicio de un intervalo de tiempo hasta el final, escriba la etiqueta en el cuadro de texto que aparece y, a continuación, presione Entrar.

Por ejemplo, abra la página web De demostración de pestañas de actividad en una nueva ventana o pestaña, cree una grabación de rendimiento y, a continuación, realice las tres acciones anteriores. Resultado:

En este ejemplo, hay:

• Tres anotaciones.
• Anotación de flecha que conecta dos anotaciones.
• Intervalo de tiempo anotado resaltado en color rosa.

La pestaña Anotaciones muestra el número de anotaciones junto a su nombre de pestaña; en este ejemplo, 5.

Para eliminar una anotación, mantenga el puntero sobre ella en la pestaña Anotaciones y, a continuación, haga clic en el botón Eliminar situado junto a ella.

Para ocultar las anotaciones del seguimiento de rendimiento, seleccione Ocultar anotaciones en la parte inferior de la pestaña Anotaciones .

Guardar y compartir una grabación

Para guardar una grabación como un archivo en el dispositivo y compartirlo más adelante con los resultados de rendimiento anotados, en la barra de acciones de la parte superior de la herramienta Rendimiento , haga clic en el botón Guardar perfil () y, a continuación, seleccione Guardar seguimiento.

Como alternativa, seleccione Guardar seguimiento sin anotaciones.

En lugar de hacer clic en el botón Guardar perfil () de la parte superior, puede hacer clic con el botón derecho en una pista de una grabación y, a continuación, seleccionar Guardar perfil:

Carga de una grabación

Para cargar una grabación desde un archivo, haga clic en el botón Cargar perfil () en la barra de acciones de la parte superior de la herramienta Rendimiento .

La herramienta Rendimiento mostrará anotaciones si están presentes en el seguimiento.

O bien, haga clic con el botón derecho en la herramienta Rendimiento y, a continuación, seleccione Cargar perfil:

Puede hacer clic con el botón derecho en una grabación existente o en la pantalla que se muestra en la herramienta Rendimiento cuando no hay grabaciones.

Borrar la grabación anterior

Después de realizar una grabación, para quitar esa grabación de la herramienta Rendimiento , haga clic en el botón Borrar grabación ():

Análisis de una grabación de rendimiento

Después de registrar el rendimiento del tiempo de ejecución o el rendimiento de carga de registros, la herramienta Rendimiento muestra una gran cantidad de datos sobre la grabación. Use los datos grabados para analizar el rendimiento de la página web.

Obtener información útil

La herramienta Rendimiento extrae información procesable de los datos de rendimiento registrados. Estas conclusiones son formas en las que puede mejorar el rendimiento de su sitio web. Las conclusiones incluyen:

• INP por fase
• LCP por fase
• Detección de solicitudes LCP
• Responsables del desplazamiento de diseño
• Representación de la solicitud de bloqueo
• Árbol de dependencias de red
• Mejora de la entrega de imágenes
• Latencia de solicitud de documento
• Visualización de fuentes
• Optimización de la ventanilla para dispositivos móviles
• Optimización del tamaño de DOM
• Terceros partidos
• Costos del selector CSS
• Reflujo forzado
• Uso de vigencias de caché eficaces

La información se centra en mejorar las métricas de Core Web Vitals y en optimizar la rapidez con la que se carga y representa la página web.

Después de registrar un perfil en la herramienta Rendimiento , la pestaña Conclusiones de la barra lateral muestra la lista de conclusiones accionables que se aplican a los datos de rendimiento grabados. Para ver la lista de conclusiones que no se aplican al perfil, consulte la sección Conclusiones pasadas .

Para usar la información:

1. Realice una grabación de rendimiento, por rendimiento de registro, anteriormente.

2. En la barra lateral izquierda de la herramienta Rendimiento , seleccione la pestaña Conclusiones , expanda distintas secciones y mantenga el puntero sobre los elementos y haga clic en ellos. La herramienta Rendimiento resalta los eventos correspondientes en el seguimiento:

   

   Si la barra lateral y la pestaña Insights no están visibles, haga clic en el botón Mostrar barra lateral ().

Navegar por la grabación

Para inspeccionar estrechamente la grabación de rendimiento, puede seleccionar una parte de una grabación, desplazar un gráfico de llama larga, acercar y alejar, y usar rutas de navegación para saltar entre los niveles de zoom.

Uso de métodos abreviados de teclado para navegar

Para usar métodos abreviados de teclado para navegar rápidamente por la grabación, en primer lugar, elija el estilo de navegación del teclado que prefiera.

En la esquina superior derecha de la herramienta Rendimiento , haga clic en el botón Mostrar accesos directos () y, a continuación, seleccione el botón de opción Moderno o Clásico . El cuadro de diálogo Métodos abreviados de teclado muestra los accesos directos disponibles para la opción de asignación seleccionada.

Con el botón de opción Moderno seleccionado:

• Para acercar: Comando/Ctrl + rueda del mouse.
• Para desplazarse verticalmente: rueda del mouse.
• Para desplazarse horizontalmente: Mayús + rueda del mouse.

Con el botón de opción Clásico seleccionado:

• Para acercar: rueda del mouse o panel táctil hacia arriba o hacia abajo.
• Para desplazarse verticalmente: Mayús + rueda del mouse.
• Para desplazarse horizontalmente: Desplazar + flecha izquierda Flecha|derecha

También puede desplazarse hacia la izquierda y la derecha presionando las teclas A y D , y haciendo zoom presionando las teclas W o S .

Vea también:

• Panel rendimiento: habilite un cambio a una opción de navegación de escala de tiempo alternativa en Características experimentales en Microsoft Edge DevTools.

Seleccionar una parte de una grabación

En la parte superior de la grabación, se muestra la sección Información general de la escala de tiempo, incluidos los gráficos de CPU y NET (indicados a la derecha):

Para seleccionar una parte de una grabación, en la introducción a la escala de tiempo, haga clic y arrastre horizontalmente:

Para seleccionar una parte con el teclado:

1. Céntrese en la pista principal o en cualquiera de sus vecinos.

2. Use las teclas W, A, S, D para acercar, mover a la izquierda, alejar y desplazarse a la derecha, respectivamente.

Para seleccionar una parte mediante un panel de seguimiento:

1. Mantenga el puntero sobre la sección Información general de la escala de tiempo o cualquiera de las pistas (Principal y sus vecinos).

2. Con dos dedos, deslice el dedo hacia arriba para alejar, deslice el dedo hacia la izquierda para desplazarse hacia la izquierda, deslice el dedo hacia abajo para acercar y deslice el dedo hacia la derecha para desplazarse hacia la derecha.

Puede seleccionar una parte de una grabación con un mouse, un teclado o un trackpad.

Ratón:

Para seleccionar una parte de una grabación con el mouse:

• Arrastre el mouse hacia la izquierda o la derecha a través de información general. La información general es la sección que contiene los gráficos de CPU y NET:

Para desplazar un gráfico de llama larga en la sección Principal o en cualquiera de las secciones vecinas, haga clic y mantenga presionado mientras arrastra hacia arriba y hacia abajo. Arrastre a la izquierda o a la derecha para mover la parte de la grabación seleccionada.

Teclado:

Para seleccionar una parte de una grabación con el teclado:

1. Seleccione el fondo de la sección Principal o seleccione el fondo de una sección situada junto a la sección Principal , como Interacciones, Red o GPU. Este flujo de trabajo de teclado solo funciona cuando una de estas secciones está centrada.

2. Presione W o S para acercar o alejar. Presione A o D para mover a la izquierda o a la derecha.

Trackpad:

Para seleccionar una parte de una grabación mediante un trackpad:

1. Mantenga el puntero sobre la sección Información general o la sección Detalles . La sección Información general es el área que contiene los gráficos FPS, CPU y NET . La sección Detalles es el área que contiene la sección Principal y la sección Interacciones .

2. Con dos dedos, desliza el dedo hacia arriba para alejar o hacia abajo para acercar. Con dos dedos, deslice el dedo hacia la izquierda para desplazarse hacia la izquierda o hacia la derecha para moverse a la derecha.

Acercar partes de una grabación y cambiar entre niveles de zoom

La introducción a la escala de tiempo le permite acercar partes de la grabación en sucesión y crear rutas de navegación en cada paso, lo que le permite cambiar entre estos niveles de zoom.

Para acercar una parte de la grabación y usar rutas de navegación:

1. En Información general sobre la escala de tiempo, seleccione una parte de la grabación (anterior).

2. Mantenga el puntero sobre la selección y, a continuación, haga clic en el botón N ms ():

   

   La selección se expande para rellenar la información general de la escala de tiempo. Una cadena de rutas de navegación comienza a compilarse en la parte superior de la introducción a la escala de tiempo.

3. Repita los dos pasos anteriores para crear otra ruta de navegación anidada. Puede seguir anidando rutas de navegación siempre y cuando el intervalo de selección sea superior a 5 milisegundos.

4. Para saltar a un nivel de zoom elegido, haga clic en la ruta de navegación correspondiente en la cadena en la parte superior de la información general de la escala de tiempo.

Para quitar los elementos secundarios de una ruta de navegación, haga clic con el botón derecho en la ruta de navegación primaria y, a continuación, seleccione Quitar rutas de navegación secundarias:

Desplazar un gráfico de llama larga

Para desplazarse por un gráfico de llama larga en la pista Principal o en cualquiera de sus vecinos, haga clic y mantenga presionado y arrastre en cualquier dirección hasta que lo que está buscando entre en la vista.

Actividades de búsqueda

Puede buscar en las actividades de la pista Principal y las solicitudes en la pista de red .

Para abrir el cuadro de búsqueda en la parte inferior de la herramienta Rendimiento :

1. Presione Ctrl+F (Windows, Linux) o Comando+F (macOS).

   El cuadro Buscar aparece en la parte inferior de la herramienta Rendimiento :

   

2. En el cuadro Buscar , escriba una consulta, como "recalcular estilo".

   Las actividades coincidentes se resaltan en la sección Principal a medida que escribe y el número total de coincidencias aparece en el cuadro de búsqueda. Se selecciona la primera actividad de coincidencia, que se describe en azul:

   

Para navegar entre las actividades que coinciden con la consulta:

• Para seleccionar la siguiente actividad, presione Entrar o haga clic en el botón Siguiente ().

• Para seleccionar la actividad anterior, presione Mayús+Entrar o haga clic en el botón Anterior ().

La herramienta Rendimiento muestra una información sobre herramientas sobre la actividad seleccionada en el cuadro de búsqueda.

Para modificar la configuración de la consulta:

• Para usar una expresión regular en la consulta, haga clic en el botón Habilitar expresiones regulares ( Si selecciona el botón Regex y, a continuación, escribe ^E.* que encuentra cualquier actividad que comience con la letra E.

• Para que la consulta distinga entre mayúsculas y minúsculas, haga clic en el botón Habilitar búsqueda que distingue mayúsculas de minúsculas (

Para ocultar el cuadro de búsqueda, haga clic en el botón Cancelar .

Cambiar el orden de las pistas y ocultarlas

Para eliminar el seguimiento de rendimiento, puede cambiar el orden de las pistas y ocultar las irrelevantes en el modo de configuración de seguimiento.

Para mover y ocultar pistas:

1. Para entrar en el modo de configuración, haga clic con el botón derecho en un nombre de pista y, a continuación, seleccione Configurar pistas.

2. Haga clic en el botón Mover seguimiento hacia arriba () o en el botón Mover seguimiento hacia abajo () para mover una pista hacia arriba o hacia abajo. Haga clic en el botón Ocultar pista () para ocultarla.

3. Haga clic con el botón derecho en la pista y, a continuación, seleccione Finalizar la configuración.

La herramienta Rendimiento también aplica la configuración de seguimiento a los nuevos seguimientos, a menos que cierre y vuelva a abrir DevTools.

Visualización de la actividad del subproceso principal

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

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

DevTools representa la actividad del subproceso principal 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. Un evento que está cerca de la parte superior provoca los eventos que están debajo de él; Por ejemplo, en la ilustración anterior, un input evento produjo un Function Call, que ejecutó una función anónima que llamó filterByCamera a y, a continuación, populateGallery. A continuación, la populateGallery función realizó cambios dom mediante una llamada a set innerHTML.

DevTools asigna scripts de colores aleatorios. En la ilustración anterior, las solicitudes de función de un script son de color fucsia (púrpura-rosa). El amarillo más oscuro representa la actividad de scripting y el evento púrpura representa la actividad de representación. Estos eventos amarillos y púrpuras más oscuros son coherentes en todas las grabaciones.

Si desea ocultar el gráfico de llama detallado de las solicitudes de JavaScript, consulte Disable JavaScript samples (Deshabilitar ejemplos de JavaScript) anteriormente. Cuando se deshabilitan los ejemplos de JavaScript, solo se muestran eventos de alto nivel, como Event: input y Function Call de la ilustración anterior.

Leer el gráfico de llamas

La herramienta Rendimiento representa la actividad de subproceso principal en 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 de la parte superior provocan los siguientes eventos.

La herramienta Rendimiento asigna scripts de colores aleatorios para dividir el gráfico de llamas y hacerlo más legible.

Las tareas largas también se resaltan con un triángulo rojo y con la parte de más de 50 milisegundos sombreada en rojo.

Además, la pista Principal muestra información sobre los perfiles de CPU iniciados y detenidos con profile() las funciones de consola y profileEnd() .

Para ocultar el gráfico detallado de llamadas de JavaScript, consulte Deshabilitar ejemplos de JavaScript. Cuando se deshabilitan los ejemplos de JS, solo verá los eventos de alto nivel, como Event (click) y Function Call.

Seguimiento de los iniciadores de eventos

La pista Principal puede mostrar flechas que conectan los siguientes iniciadores y los eventos que provocaron:

• Invalidación de estilo o diseño-Recalcular> estilos o diseño
• Marco de animación de solicitud:>fotograma de animación desencadenado
• Solicitud de devolución de llamada inactiva :>devolución de llamada inactiva de incendio
• Instalación del temporizador :>temporizador activado
• Crear WebSocket ->Send... y recibir protocolo de enlace de WebSocket o destruir WebSocket
• Programar postTask ->Fire postTask o Abort postTask

Para ver las flechas, busque un iniciador o el evento que causó en el gráfico de llamas y selecciónelo.

Cuando se selecciona, la pestaña Resumen muestra iniciador para vínculos para iniciadores e Iniciado por vínculos para los eventos que causaron. Haga clic en ellos para saltar entre los eventos correspondientes.

Ocultar funciones y sus elementos secundarios en el gráfico de llamas

Para desenlazar el gráfico de llamas en el subproceso Principal , puede ocultar las funciones seleccionadas o sus elementos secundarios:

1. En la pista Principal , haga clic con el botón derecho en una función y elija una de las siguientes opciones o presione el acceso directo correspondiente:

   • Ocultar función (H)
   • Ocultar elementos secundarios (C)
   • Ocultar elementos secundarios repetidos (R)
   • Restablecer elementos secundarios (U)
   • Restablecer seguimiento (T)
   • Agregar script para omitir la lista (I)

   Aparece un botón desplegable de número oculto ( junto al nombre de la función con elementos secundarios ocultos.

2. Para ver el número de elementos secundarios ocultos, mantenga el puntero sobre el botón desplegable número oculto ().

3. Para restablecer una función con elementos secundarios ocultos o todo el gráfico de llamas, seleccione la función y presione U o haga clic con el botón derecho en cualquier función y seleccione Restablecer seguimiento respectivamente.

Omitir scripts en el gráfico de llamas

Para agregar un script a la lista de omisión, haga clic con el botón derecho en un script del gráfico y seleccione Agregar script para omitir la lista.

El gráfico contrae scripts omitidos, los marca como Lista de omitir y los agrega a las reglas de exclusión personalizadas en Personalizar y controlar DevTools () >Configuración>Omitir lista. Los scripts omitidos se guardan hasta que se quitan del seguimiento o de las reglas de exclusión personalizadas.

Visualización de actividades en una tabla

Después de grabar una página, además de la sección Principal para analizar actividades, DevTools también proporciona tres vistas tabulares para analizar las actividades. Cada vista proporciona una perspectiva diferente sobre las actividades:

• Para ver las actividades en las que se ha dedicado más tiempo directamente, use la pestaña Abajo arriba .

• Para ver las actividades raíz que provocan la mayor parte del trabajo, use la pestaña Árbol de llamadas .

• Para ver las actividades en el orden en que se produjeron durante la grabación, use la pestaña Registro de eventos.

Para ayudarle a encontrar lo que busca más rápido, las tres pestañas tienen botones para el filtrado avanzado junto a la barra filtro :

• El botón Habilitar expresiones regulares (

• El botón Habilitar búsqueda que distingue mayúsculas de minúsculas (

Cada vista tabular de la herramienta Rendimiento muestra vínculos para actividades como llamadas a funciones. Para ayudarle a depurar, DevTools busca las declaraciones de función correspondientes en los archivos de origen. Además, si los mapas de origen adecuados están presentes y habilitados, DevTools busca automáticamente los archivos originales.

Haga clic en un vínculo para abrir un archivo de código fuente en la herramienta Orígenes .

Las tres secciones siguientes hacen referencia a la misma demostración. Puede ejecutar la demostración usted mismo en la demostración de pestañas de actividad y ver el origen en MicrosoftEdge / Demos > /devtools-performance-activitytabs/.

Actividades raíz

Esta es una explicación del concepto de actividades raíz que se menciona en las secciones Árbol de llamadas , Abajo arriba y Registro de eventos.

Las actividades raíz son actividades que hacen que el explorador realice algún trabajo. Por ejemplo, al hacer clic en una página web, el explorador ejecuta una Event actividad como actividad raíz. Esa actividad puede hacer que Event se ejecuten otras actividades, como un controlador.

En el gráfico de llama 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.

Para obtener un ejemplo de actividades raíz, vea la pestaña Árbol de llamadas, a continuación.

Pestaña Árbol de llamadas

Use la pestaña Árbol de llamadas para ver qué actividades raíz provocan más trabajo.

La pestaña Árbol de llamadas solo muestra actividades durante la parte seleccionada de la grabación. Para obtener información sobre cómo seleccionar una parte de una grabación, consulte Seleccionar una parte de una grabación anterior.

En la ilustración anterior, los elementos de nivel superior de la columna Actividad , como Event Timing, son actividades raíz. El anidamiento representa la pila de llamadas. Por ejemplo, en la ilustración anterior, Event Timing produjo Event: mouseup, lo que provocó Function Call, que provocaba (anonymous), etc.

El tiempo de autoservicio representa el tiempo dedicado directamente a esa actividad. El tiempo total representa el tiempo dedicado a esa actividad o a cualquiera de los elementos secundarios.

Haga clic en Tiempo automático, Tiempo total o 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ú Agrupación está establecido en Sin agrupación. Use el menú Agrupación para ordenar la tabla de actividad en función de varios criterios.

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

Pestaña Abajo arriba

Use la pestaña Abajo arriba para ver qué actividades han tardado más tiempo en agregarse directamente.

La pestaña Abajo arriba solo muestra actividades durante la parte seleccionada de la grabación. Para obtener información sobre cómo seleccionar una parte de una grabación, consulte Seleccionar una parte de una grabación anterior.

En el gráfico de llama de la sección Principal de la ilustración anterior, se pasó casi todo el tiempo ejecutando las afunciones , by c . Las actividades principales de la pestaña Abajo arriba de la ilustración anterior también ason , by c. En la pestaña Abajo arriba , la siguiente actividad más costosa es Minor GC.

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

La columna Tiempo total representa el tiempo agregado dedicado a esa actividad o a cualquiera de los elementos secundarios.

Pestaña Registro de eventos

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

La pestaña Registro de eventos solo muestra actividades durante la parte seleccionada de la grabación. Para obtener información sobre cómo seleccionar una parte de una grabación, consulte Seleccionar una parte de una grabación anterior.

La columna Hora de inicio representa el punto en el que se inició esa actividad, en relación con el inicio de la grabación. Por ejemplo, la hora de inicio del 925.0 ms elemento seleccionado en la ilustración anterior significa que la actividad se inició 925,0 ms después de que se iniciara la grabación.

La columna Self Time representa el tiempo dedicado directamente a esa actividad.

La columna Tiempo total representa el tiempo dedicado directamente a esa actividad o a cualquiera de los elementos secundarios.

Haga clic en el encabezado de columna Hora de inicio, Hora automática o 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 las actividades que tardaron menos de 1 ms o 15 ms. De forma predeterminada, el menú Duración se establece en Todo, lo que significa que se muestran todas las actividades.

Desactive las casillas Carga, Scripting, Representación o Pintura para filtrar todas las actividades de esas categorías.

Visualización de marcadores de rendimiento

En una superposición con líneas verticales a través del seguimiento de rendimiento, puede ver marcadores de rendimiento importantes, como:

• Primera pintura (FP)
• Primera pintura con contenido (FCP)
• Pintura con contenido más grande (LCP)
• Evento DOMContentLoaded (DCL)
• Evento Onload (L)

Mantenga el puntero sobre un nombre de marcador en la parte inferior del seguimiento para ver su marca de tiempo.

Visualización de tiempos personalizados

En la pista Tiempos , vea los marcadores de rendimiento personalizados, como:

• performance.mark() Llamadas.

• performance.measure() Llamadas.

Seleccione un marcador para ver más detalles en la pestaña Resumen , incluida su marca de tiempo, el tiempo total, el tiempo propio y el detail objeto. En el caso performance.mark() de las llamadas y performance.measure() , la pestaña también muestra los seguimientos de la pila.

Visualización de interacciones

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

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

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

Ver los cambios de diseño

Ver los desplazamientos de diseño en la pista de desplazamientos diseño . Los turnos se muestran como diamantes púrpuras y se agrupan en clústeres (líneas púrpuras) en función de su proximidad en la escala de tiempo. Para obtener información sobre los clústeres, consulte Evolución de la métrica de CLS en web.dev.

Para resaltar un elemento que provocó un desplazamiento de diseño en la ventanilla, mantenga el puntero sobre el diamante correspondiente.

Para ver más información sobre un cambio de diseño o turnos en la pestaña Resumen con tiempos, puntuaciones, elementos y posibles culpables, haga clic en el rombo o clúster correspondiente.

Para obtener más información, vea Cambio de diseño acumulativo (CLS) en web.dev.

Visualización de animaciones

Ver animaciones en la pista Animaciones . Las animaciones se denominan como propiedades o elementos CSS correspondientes si existen, por ejemplo, transform o my-element. Las animaciones sin composición se marcan con triángulos rojos en la esquina superior derecha.

Seleccione una animación para ver más detalles en la pestaña Resumen , incluidos los motivos para la composición de errores.

Visualización de la actividad de GPU

Vea la actividad de GPU en la sección GPU de la herramienta Rendimiento :

Visualización de la actividad de ráster

Vea la actividad de ráster en la sección Grupo de subprocesos .

Analizar fotogramas por segundo (FPS)

DevTools proporciona dos maneras de analizar fotogramas por segundo:

• Use la sección Marcos para ver cuánto tiempo tardó un fotograma determinado. Consulte la sección Marcos, a continuación.

• Use el medidor fps para una estimación en tiempo real de FPS a medida que se ejecuta la página. Consulte Visualización de fotogramas por segundo en tiempo real con el medidor fps, a continuación.

Sección Marcos

En la sección Fotogramas se indica exactamente cuánto tiempo tardó un fotograma determinado.

Mantenga el puntero sobre un marco para ver una información sobre herramientas con más información sobre él:

En el ejemplo anterior se muestra una información sobre herramientas al mantener el puntero sobre un marco.

La sección Marcos puede mostrar cuatro tipos de fotogramas:

• Marco inactivo (blanco). Sin cambios.

• Marco (verde). Se representa según lo esperado y a tiempo.

• Marco parcialmente presentado (amarillo con un patrón de línea de guion ancho disperso). Microsoft Edge hizo todo lo posible para representar al menos algunas actualizaciones visuales a tiempo. Por ejemplo, en caso de que el trabajo del subproceso principal del proceso del representador (animación de lienzo) sea tarde, pero el subproceso compositor (desplazamiento) está en el tiempo.

• Marco caído (rojo con un patrón de línea sólida densa). Microsoft Edge no puede representar el marco en un tiempo razonable.

Haga clic en un marco para ver más información sobre el marco en la pestaña Resumen de la parte inferior de la herramienta Rendimiento . DevTools describe el marco seleccionado en azul:

Visualización de solicitudes de red

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

Haga clic en una solicitud para ver más información al respecto en la pestaña Resumen :

Las solicitudes de la sección Red se codifican en color de la siguiente manera:

• Fondo azul: solicitud HTML.
• Fondo púrpura: solicitud CSS.
• Fondo amarillo oscuro: solicitud JS.
• Fondo verde: solicitud de imagen.

Las solicitudes tienen cuadrados en la esquina superior izquierda:

• Un cuadrado azul oscuro en la parte superior izquierda de una solicitud significa que es una solicitud de mayor prioridad.
• Un cuadrado azul claro significa prioridad inferior.

Por ejemplo, en la ilustración anterior, la solicitud de galería de fotos , en la esquina superior izquierda de la sección Red , es de mayor prioridad.

Las solicitudes pueden tener líneas en los lados izquierdo y derecho, y sus barras pueden dividirse en dos colores. Esto es lo que representan estas líneas y colores:

• La línea izquierda es todo hasta el Connection Start grupo de eventos, ambos inclusive. En otras palabras, es todo antes de Request Sent, exclusivo.

• La parte ligera de la barra es Request Sent y Waiting (TTFB) para la respuesta del servidor.

• La parte oscura de la barra es Content Download.

• La línea correcta es básicamente el tiempo dedicado a esperar el subproceso principal. Esto no se representa en la pestaña Temporización .

Visualización de métricas de memoria

Active la casilla Memoria para ver las métricas de memoria en una grabación de rendimiento:

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

Las líneas coloreadas del gráfico se asignan a las casillas de verificación de color encima del gráfico. Desactive una casilla para ocultar esa categoría del 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 Memoria solo muestra el uso de memoria de alrededor de la marca de 3600 ms a la marca de 6200 ms.

Vea también:

• Visualización de pérdidas de memoria (herramienta de rendimiento: casilla Memoria) a continuación.

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

Al analizar una sección como Red o Principal, a veces se necesita una estimación más precisa de cuánto tiempo tardaron determinados eventos. Mantenga presionada la tecla Mayús, haga clic y mantenga presionada la tecla y arrastre a la izquierda o a la derecha para seleccionar una parte de la grabación. En la parte inferior de la selección, DevTools muestra cuánto tiempo tardó esa parte:

Ver una captura de pantalla

Para obtener información sobre cómo activar capturas de pantalla, consulte Captura de pantallas durante la grabación, anteriormente.

Para ver una captura de pantalla del aspecto de la página durante ese momento de la grabación, mantenga el puntero sobre la información general. La información general es la sección que contiene los gráficos de CPU y NET:

También puede ver capturas de pantalla seleccionando un marco en la sección Marcos . DevTools muestra una pequeña versión de la captura de pantalla en la pestaña Resumen :

Para acercar la captura de pantalla, haga clic en la miniatura de la pestaña Resumen .

Visualización de la información de capas

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

1. En la herramienta Rendimiento , haga clic en el botón Capturar configuración () y, a continuación, seleccione la casilla Habilitar instrumentación de representación avanzada (lenta ).

2. En la sección Marcos , seleccione un marco. DevTools muestra información sobre las capas en la pestaña Capas de la parte inferior de la herramienta Rendimiento :

   

La pestaña Capas funciona como la pestaña Capas compuestas de la herramienta Vista 3D . Para obtener información sobre cómo interactuar con la pestaña Capas , consulte Navegación por capas de páginas web, índice z y DOM mediante la herramienta Vista 3D.

Visualización del generador de perfiles de pintura

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

1. En la herramienta Rendimiento , haga clic en el botón Capturar configuración () y, a continuación, seleccione la casilla Habilitar instrumentación de representación avanzada (lenta ).

2. Seleccione un evento Paint en la sección Principal . DevTools muestra información sobre el evento de pintura en la pestaña Generador de perfiles de pintura :

   

Visualización de estadísticas del selector CSS

Para ver estadísticas sobre los selectores de las reglas CSS que se recalcularon durante una grabación de rendimiento:

• En la herramienta Rendimiento , haga clic en el botón Capturar configuración () y, a continuación, seleccione la casilla Habilitar instrumentación de representación avanzada (lenta ).

  DevTools muestra información agregada sobre los selectores de las reglas CSS que se recalcularon durante la grabación en la pestaña Estadísticas del selector :

  

1. En la sección Principal , seleccione un evento Recalcular estilo . En la pestaña Estadísticas del selector , DevTools muestra información sobre los selectores de las reglas CSS que se recalcularon durante ese evento.

Vea también:

• Análisis del rendimiento del selector CSS durante eventos de recalcular estilo

Visualización de mensajes entre ventanas, iframes y trabajos dedicados

El panel Rendimiento del experimento de DevTools: mostrar los flujos de envío y control postMessage mejora la sección Principal de la herramienta Rendimiento para ayudarle a identificar postMessage rápidamente eventos y controladores, al distinguir los eventos desencadenados por el postMessage método de otros eventos que se muestran en la herramienta Rendimiento. Este experimento le ayuda a investigar los problemas de rendimiento relacionados con la publicación de mensajes en varios subprocesos de una aplicación.

Sin este experimento, los eventos que se desencadenan mediante el envío y el control de mensajes entre subprocesos de una aplicación aparecen como eventos genéricos de llamada a función de scripting. Con este experimento habilitado:

• postMessage los eventos dispatch aparecen como Schedule postMessage.
• postMessage Los eventos de controlador aparecen como En mensaje:

Este experimento le ayuda a investigar cuándo se produjo una postMessage llamada y cuánto tiempo se puso en cola el mensaje antes de que se inicie el postMessage controlador. Los eventos de distribución están vinculados a eventos de controlador mediante flechas de iniciador que aparecen al hacer clic en cualquier tipo de evento:

Para usar esta característica, en DevTools, seleccione Personalizar y controlar DevTools () >Experimentos de configuración>, seleccione la casilla Panel rendimiento: mostrar postMessage envío y control de flujos, haga clic en el botón Cerrar (X) y, a continuación, haga clic en el botón Volver a cargar DevTools.

Vea también:

• Referencia de eventos de grabación de rendimiento
• Demostración de eventos de seguimiento de postMessage (representada)
• Demostración de eventos de seguimiento postMessage (código fuente)

Análisis del rendimiento de representación con la herramienta Representación

Use la herramienta Representación para ayudar a visualizar el rendimiento de representación de la página. La herramienta Representación es una herramienta de vista rápida ; Si lo abre desde el menú Comandos, se abrirá en la parte inferior de DevTools.

Para abrir la herramienta Representación :

1. Haga clic con el botón derecho en una página web y, a continuación, seleccione Inspeccionar. O bien, presione Ctrl+Mayús+I (Windows, Linux) o Comando+Opción+I (macOS). Se abre DevTools.

2. En la barra de actividad (o vista rápida), haga clic en el botón Más herramientas () y, a continuación, seleccione Representación.

   Se abre la herramienta Representación :

   

Vea también:

• Herramienta de representación, para ver el aspecto de una página web con diferentes opciones de visualización o deficiencias visuales

Visualización de fotogramas por segundo en tiempo real con el medidor fps

El medidor fps es una superposición que aparece en la esquina superior izquierda de la página web representada. 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 herramienta Representación . Consulte Analizar el rendimiento de representación con la herramienta Representación, anteriormente.

2. Active la casilla Estadísticas de representación de fotogramas . La superposición de medidor de FPS aparece en la página web representada:

   

Visualización de eventos de pintura en tiempo real con el parpadeo de pintura

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

Para activar el parpadeo de pintura:

1. Abra la herramienta Representación . Consulte Analizar el rendimiento de representación con la herramienta Representación, anteriormente.

2. Active la casilla Destellamiento de pintura . Los contornos verdes aparecen en la página web representada:

   

Visualización de una superposición de capas con bordes de capa

Para ver una superposición de bordes e iconos de capa en la parte superior de la página:

1. Abra la herramienta Representación , como se describe en Analizar el rendimiento de representación con la herramienta Representación, anteriormente.

2. Active la casilla Bordes de capa . Los bordes de capa aparecen en la página web representada:

   

Consulte los comentarios de debug_colors.cc para obtener una explicación de las codificaciones de colores.

Buscar problemas de rendimiento de desplazamiento en tiempo real

Use la casilla Problemas de rendimiento de desplazamiento para identificar los elementos de la página que tienen agentes de escucha de eventos relacionados con el desplazamiento que pueden dañar el rendimiento de la página. DevTools describe los elementos potencialmente problemáticos en teal.

Para ver los problemas de rendimiento de desplazamiento:

1. Abra la herramienta Representación , como se describe en Analizar el rendimiento de representación con la herramienta Representación, anteriormente.

2. Active la casilla Problemas de rendimiento de desplazamiento . Se describen los elementos potencialmente problemáticos:

   

Vea también:

• Los rects de desplazamiento lento (casilla) en Navegar por las capas de páginas web, z-index y DOM mediante la herramienta Vista 3D.

Deshabilitar fuentes locales

En la herramienta Representación , use la casilla Deshabilitar fuentes locales para emular los orígenes que faltan local() en @font-face las reglas.

Por ejemplo, cuando la fuente Rubik está instalada en el dispositivo y la @font-face src regla la usa como fuente local() , Microsoft Edge usa el archivo de fuente local del dispositivo.

Cuando se selecciona Deshabilitar fuentes locales , DevTools omite las local() fuentes y captura cada fuente de la red:

Esta característica es útil si usa dos copias diferentes de la misma fuente durante el desarrollo, como:

• Fuente local para las herramientas de diseño.
• Fuente web para el código.

Use Deshabilitar fuentes locales para que sea más fácil:

• Depurar y medir el rendimiento de carga y la optimización de las fuentes web.
• Compruebe la precisión de las reglas CSS @font-face .
• Descubra las diferencias entre las versiones locales instaladas en el dispositivo y una fuente web.

Visualización de pérdidas de memoria (herramienta de rendimiento: casilla Memoria)

Como punto de partida para investigar el uso de memoria de páginas web, use la casilla Memoria de la herramienta Rendimiento. (O bien, Supervisar el uso de memoria en tiempo real (Administrador de tareas del explorador Microsoft Edge).)

La herramienta Rendimiento le ayuda a visualizar el uso de memoria de una página a lo largo del tiempo.

1. En DevTools, abra la herramienta Rendimiento .

2. Active la casilla Memoria .

3. Realice una grabación, por rendimiento de grabación, anteriormente.

Es una buena práctica iniciar y finalizar la grabación con una recolección de elementos no utilizados forzada. Para forzar la recolección de elementos no utilizados, haga clic en el botón Recopilar durante la grabación.

Para mostrar las grabaciones de memoria, tenga en cuenta el código siguiente:

var x = [];
function grow() {
    for (var i = 0; i < 10000; i++) {
        document.body.appendChild(document.createElement('div'));
    }
    x.push(new Array(1000000).join('x'));
}
document.getElementById('grow').addEventListener('click', grow);

Cada vez que se hace clic en el botón al que se hace referencia en el código, se anexan 10 000 div nodos al cuerpo del documento y se inserta una cadena de 1000 000 x caracteres en la x matriz. La ejecución del código anterior genera una grabación en la herramienta Rendimiento :

En primer lugar, una explicación de la interfaz de usuario. El gráfico MONTÓN del panel Información general (debajo de NET) representa el montón de JS. Debajo del panel Información general se encuentra el panel Contador . El uso de memoria se desglosa mediante el montón de JS (igual que el gráfico HEAP en el panel Información general ), documentos, nodos DOM, agentes de escucha y memoria de GPU. Desactive una casilla para ocultarla del gráfico.

Ahora, un análisis del código en comparación con la ilustración anterior. Si revisa el contador de nodos (el gráfico verde), coincide correctamente con el código. El recuento de nodos aumenta en pasos discretos. Puede suponer que cada aumento en el número de nodos es una llamada a grow().

El gráfico del montón JS (el gráfico azul) no es tan sencillo. De acuerdo con los procedimientos recomendados, el primer descenso es realmente una recolección de elementos no utilizados forzada (haga clic en el botón Recopilar ).

A medida que avanza la grabación, se muestran los picos de tamaño del montón js. Esto es natural y esperado: el código JavaScript está creando los nodos DOM en cada botón en el que haga clic y está haciendo mucho trabajo cuando crea la cadena de un millón de caracteres.

Lo clave aquí es el hecho de que el montón de JS termina más alto de lo que comenzó (el "principio" aquí es el punto después de la recolección de elementos no utilizados forzados). En el mundo real, si viera este patrón de aumento del tamaño del montón js o el tamaño del nodo, podría indicar una pérdida de memoria.

Vea también:

• Vea las métricas de memoria, arriba.

Nota:

Las partes de esta página son modificaciones basadas en el trabajo creado y compartido por Google y usadas según los términos descritos en la licencia internacional creative Commons Attribution 4.0. La página original se encuentra aquí y está creada por Kayce Basques.

Esta obra está licenciada bajo una Licencia Internacional Creative Commons Attribution 4.0.