Referencia de las funciones de rendimiento

Kayce Basques
Kayce Basques
Sofia Emelianova
Sofia Emelianova

Esta página es una referencia completa de las funciones de las Herramientas para desarrolladores de Chrome relacionadas con el análisis del rendimiento.

Consulta Primeros pasos con el análisis del rendimiento del entorno de ejecución para obtener un instructivo guiado sobre cómo analizar un el rendimiento de la página con las Herramientas para desarrolladores de Chrome.

Récord de rendimiento

Puedes registrar el rendimiento del entorno de ejecución o de carga.

Cómo registrar el rendimiento del tiempo de ejecución

Registra el rendimiento del tiempo de ejecución cuando quieras analizar el rendimiento de una página mientras se ejecuta, como en lugar de la carga.

  1. Ve a la página que quieres analizar.
  2. Haz clic en la pestaña Rendimiento en Herramientas para desarrolladores.
  3. Haz clic en Record Grabar..

    Grabar.

  4. Interactúa con la página. Herramientas para desarrolladores registra toda la actividad de la página que ocurre como resultado de tu interacciones.

  5. Vuelve a hacer clic en Grabar o en Detener para detener la grabación.

Cómo registrar el rendimiento de carga

Registra el rendimiento de carga cuando quieras analizar el rendimiento de una página mientras se carga, como en lugar de correr.

  1. Ve a la página que quieres analizar.
  2. Abre el panel Rendimiento de Herramientas para desarrolladores.
  3. Haz clic en Iniciar generación de perfiles y volver a cargar la página. Comienza a generar perfiles y vuelve a cargar la página. Las Herramientas para desarrolladores primero navega a about:blank para borrar los seguimientos y las capturas de pantalla restantes. Luego, Herramientas para desarrolladores registra métricas de rendimiento mientras la página se vuelve a cargar y, luego, detiene automáticamente la grabación segundos después de que finalice la carga.

    Volver a cargar la página.

Las Herramientas para desarrolladores acercan automáticamente la parte de la grabación en la que ocurrió la mayor parte de la actividad.

Un registro de carga de página

En este ejemplo, el panel Rendimiento muestra la actividad durante la carga de una página.

Cómo tomar capturas de pantalla durante la grabación

Habilita la casilla de verificación Capturas de pantalla para tomar una captura de pantalla de cada fotograma durante la grabación.

Casilla de verificación de Capturas de pantalla.

Consulta Cómo ver una captura de pantalla para obtener información sobre cómo interactuar con las capturas de pantalla.

Fuerza la recolección de elementos no utilizados durante el registro

Mientras grabas una página, haz clic en Recolectar elementos no utilizados. trapeador para forzar la recolección de elementos no utilizados.

Recolectar la basura.

Mostrar la configuración de grabación

Haz clic en Configuración de captura. De Configuración de captura. a Se expusieron más opciones de configuración relacionadas con la forma en que Herramientas para desarrolladores captura las grabaciones de rendimiento.

Sección Capture Settings.

Inhabilitar muestras de JavaScript

De forma predeterminada, el segmento Principal de una grabación muestra pilas de llamadas detalladas de JavaScript. funciones a las que se llamó durante la grabación. Para inhabilitar estas pilas de llamadas, sigue estos pasos:

  1. Abre el menú Configuración de captura Configuración.. Consulta Mostrar la configuración de grabación.
  2. Habilita la casilla de verificación Disable JavaScript Samples.
  3. Graba la página.

En las siguientes capturas de pantalla, se muestra la diferencia entre inhabilitar y habilitar muestras de JavaScript. El La pista principal de la grabación es mucho más corta cuando el muestreo está inhabilitado, ya que omite por completo las pilas de llamadas de JavaScript.

Ejemplo de una grabación cuando las muestras de JS están inhabilitadas.

En este ejemplo, se muestra una grabación con muestras de JS inhabilitadas.

Ejemplo de una grabación cuando se habilitan las muestras de JS.

En este ejemplo se muestra una grabación con muestras de JS habilitadas.

Limitación de la red durante la grabación

Para limitar la red durante la grabación, haz lo siguiente:

  1. Abre el menú Configuración de captura Configuración.. Consulta Mostrar la configuración de grabación.
  2. Configura Red en el nivel de limitación elegido.

Acelera la CPU durante el registro

Para limitar la CPU durante el registro, haz lo siguiente:

  1. Abre el menú Configuración de captura Configuración.. Consulta Mostrar la configuración de grabación.
  2. Configura la CPU en el nivel de limitación elegido.

La limitación es relativa a las capacidades de tu computadora. Por ejemplo, la opción 2x ralentización hace que la CPU funcione 2 veces más lento que su capacidad habitual. Las Herramientas para desarrolladores no pueden simular realmente las CPU de los dispositivos móviles, ya que su arquitectura es muy diferente a la computadoras portátiles y de escritorio.

Habilitar las estadísticas del selector CSS

Para ver las estadísticas de los selectores de reglas de CSS durante eventos Recalculate Style de larga duración, haz lo siguiente:

  1. Abre el menú Configuración de captura Configuración.. Consulta Mostrar la configuración de grabación.
  2. Marca la casilla de verificación Habilitar las estadísticas del selector CSS.

Para obtener más detalles, consulta Cómo analizar el rendimiento del selector CSS durante los eventos de nuevo diseño.

Habilita la instrumentación avanzada de procesamiento

Para ver la instrumentación detallada de la pintura, haz lo siguiente:

  1. Abre el menú Configuración de captura Configuración.. Consulta Mostrar la configuración de grabación.
  2. Marca la casilla de verificación Enable advanced Paint instrumentation (Habilitar instrumentación de pintura avanzada).

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

Emular la simultaneidad de hardware

Para probar el rendimiento de la aplicación con diferentes cantidades de núcleos de procesador, puedes configurar el valor que informa la propiedad navigator.hardwareConcurrency. Algunas aplicaciones usan esta propiedad para controlar el grado de paralelismo de la aplicación, por ejemplo, para controlar el tamaño del grupo de pthread de Emscripten.

Para emular la simultaneidad de hardware, haz lo siguiente:

  1. Abre el menú Configuración de captura Configuración.. Consulta Mostrar la configuración de grabación.
  2. Marca Simultaneidad de hardware y configura la cantidad de núcleos en la casilla de entrada. Simultaneidad del hardware

Las Herramientas para desarrolladores muestra un ícono de advertencia Advertencia. junto a la pestaña Rendimiento para recordarte que la emulación de simultaneidad de hardware está habilitada.

Para volver al valor predeterminado de 10, haz clic en el botón Revertir Revertir..

Cómo guardar una grabación

Para guardar una grabación, haz clic con el botón derecho y selecciona Guardar perfil.

Guardar perfil.

Cómo cargar una grabación

Para cargar una grabación, haz clic con el botón derecho y selecciona Load Profile.

Cargar perfil.

Borrar la grabación anterior

Después de hacer una grabación, presiona Borrar grabación. Borrar grabación. para borrar esa grabación del panel Rendimiento.

Borrar grabación.

Cómo analizar una grabación de una presentación

Después de registrar el rendimiento del tiempo de ejecución o registrar el rendimiento de carga, la columna Performance proporciona muchos datos para analizar el rendimiento de lo que acaba de suceder.

Para inspeccionar minuciosamente el registro de rendimiento, puedes seleccionar una parte de una grabación, desplazarte por un gráfico de llamas largo, acercar y alejar la imagen, y usar rutas de navegación para saltar entre los niveles de zoom.

Selecciona una parte de la grabación

En la barra de acciones del panel Rendimiento y en la parte superior de la grabación, puedes ver la sección Descripción general del cronograma con los gráficos de CPU y NET.

La descripción general del cronograma debajo de la barra de acciones

Para seleccionar una parte de una grabación, mantén presionado y arrastra hacia la izquierda o la derecha en Descripción general de Rutas.

Para seleccionar una parte con el teclado, haz lo siguiente:

  1. Enfoca la pista Principal o cualquiera de sus vecinos.
  2. Usa las teclas W, A, S y D para acercar, mover hacia la izquierda, alejar y mover hacia la derecha, respectivamente.

Para seleccionar una parte con el panel táctil, haz lo siguiente:

  1. Coloca el cursor sobre la sección Descripción general del cronograma o cualquiera de los segmentos (Principal y sus vecinos).
  2. Con dos dedos, desliza el dedo hacia arriba para alejar la imagen, desliza el dedo hacia la izquierda para moverte hacia la izquierda, desliza el dedo hacia abajo para acercar la imagen y desliza el dedo hacia la derecha para moverte hacia la derecha.

La Descripción general del cronograma te permite crear varias rutas de navegación anidadas en sucesión, que aumentan los niveles de zoom y, luego, salta al nivel elegido.

Para crear y usar rutas de navegación, sigue estos pasos:

  1. En Descripción general de Rutas, selecciona una parte de la grabación.
  2. Coloca el cursor sobre la selección y haz clic en el botón N ms zoom_in. La selección se expandirá para completar la Descripción general del cronograma. Se comienza a compilar una cadena de rutas de navegación en la parte superior de la Descripción general de Rutas.
  3. Repite los dos pasos anteriores para crear otra ruta de navegación anidada. Puedes continuar anidando rutas de navegación siempre que el rango de selección sea superior a 5 milisegundos.
  4. Para saltar a un nivel de zoom determinado, haz clic en la ruta de navegación correspondiente de la cadena en la parte superior de Descripción general de Rutas.

Desplázate por un gráfico tipo llama largo

Para desplazarte por un gráfico de llamas largo en la pista Principal o cualquiera de sus vecinos, mantén presionado y, luego, arrastra en cualquier dirección hasta que aparezca lo que estás buscando.

Para abrir un cuadro de búsqueda en la parte inferior del panel Rendimiento, presiona una de estas teclas:

  • macOS: Comando + F
  • Windows y Linux: Control + F

El cuadro de búsqueda.

En este ejemplo, se muestra una expresión regular en el cuadro de búsqueda de la parte inferior que busca cualquier actividad que comience con E.

Para desplazarte por las actividades que coinciden con tu consulta, haz lo siguiente:

  • Haz clic en los botones expand_less Anterior o expand_less Siguiente.
  • Presiona Mayúsculas + Intro para seleccionar la opción anterior o Intro para seleccionar la siguiente.

El panel Rendimiento muestra información sobre la actividad seleccionada en el cuadro de búsqueda.

Para modificar la configuración de consulta, sigue estos pasos:

  • Haz clic en match_case Coincidir mayúsculas y minúsculas para que la consulta distinga mayúsculas de minúsculas.
  • Haz clic en regular_expression expresión regular para usar una expresión regular en tu consulta.

Para ocultar el cuadro de búsqueda, haz clic en Cancelar.

Cómo cambiar el orden de las pistas y ocultarlas

Para ordenar los seguimientos de rendimiento, puedes cambiar el orden de los segmentos y ocultar los irrelevantes en el modo de configuración de segmentos.

Para mover y ocultar recorridos, sigue estos pasos:

  1. Para ingresar al modo de configuración, haz clic con el botón derecho en el nombre de un segmento y selecciona Configurar segmentos.
  2. Haz clic en arrow_upward hacia arriba o arrow_downward hacia abajo para mover un recorrido hacia arriba o hacia abajo. Haz clic en visibility_off para ocultarlo.
  3. Cuando hayas terminado, haz clic en la opción Terminar de configurar los segmentos, que se encuentra en la parte inferior, para salir del modo de configuración.

Mira el video para ver este flujo de trabajo en acción.

En el panel Rendimiento, se guarda la configuración de los seguimientos nuevos, pero no en las siguientes sesiones de Herramientas para desarrolladores.

Cómo ver la actividad del subproceso principal

Usa el segmento Principal para ver la actividad que ocurrió en el subproceso principal de la página.

la pista principal

Haz clic en un evento para ver más información al respecto en la pestaña Resumen. En el panel Rendimiento, se muestra el evento seleccionado en azul.

Obtén más información sobre un evento de subproceso principal en la pestaña Summary.

En este ejemplo, se muestra más información sobre el evento de llamada a función get en la pestaña Resumen.

Leer el gráfico de llamas

El panel Rendimiento representa la actividad del subproceso principal en un gráfico tipo llama. El eje X representa el registro en el tiempo. El eje Y representa la pila de llamadas. Los eventos en la parte superior causan los que se indican a continuación.

Un gráfico tipo llama.

En este ejemplo, se muestra un gráfico tipo llama en el segmento Principal. Un evento click causó una llamada a función anónima. Esta función, a su vez, llamaba a onEndpointClick_, que llamaba a handleClick_, y así sucesivamente.

El panel Rendimiento asigna colores aleatorios a las secuencias de comandos para dividir el gráfico tipo llama y hacerlo más legible. En el ejemplo anterior, las llamadas a función de una secuencia de comandos son de color celeste. Las llamadas de otra secuencia de comandos son de color rosa claro. El amarillo más oscuro representa la actividad de secuencias de comandos, mientras que el púrpura representa la actividad de renderización. Estos eventos de color amarillo y púrpura más oscuros son los mismos en todas las grabaciones.

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

Una tarea larga.

En este ejemplo, la tarea tardó más de 400 milisegundos, por lo que la parte que representa los últimos 350 milisegundos está sombreada en rojo, mientras que los 50 milisegundos iniciales no lo están.

Además, en el segmento Main, se muestra información sobre los perfiles de CPU iniciados y detenidos con las funciones de la consola profile() y profileEnd().

Para ocultar el gráfico tipo llama detallado de las llamadas de JavaScript, consulta Inhabilitar muestras de JavaScript. Cuando las muestras de JS están inhabilitadas, solo puedes ver los eventos de alto nivel, como Event (click) y Function Call.

Realiza un seguimiento de los iniciadores de eventos

El segmento Principal puede mostrar flechas que conecten a los siguientes iniciadores y los eventos que causaron:

  • Invalidación de estilo o diseño -> Volver a calcular estilos o Diseño
  • Marco de animación de solicitud -> Se activó el marco de animación
  • Solicitar devolución de llamada inactiva -> Activar la devolución de llamada inactiva
  • Instalar temporizador -> Se activó el temporizador
  • Crear WebSocket -> Enviar... y Recibir el protocolo de enlace de WebSocket o Destruir WebSocket

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

Una flecha desde la solicitud hasta la activación de una devolución de llamada inactiva

Cuando está seleccionada, la pestaña Resumen muestra los vínculos Iniciador para los iniciadores y los vínculos Iniciada por para los eventos que causaron. Haz clic en ellos para pasar de un evento a otro.

El “Iniciador de” en la pestaña Resumen.

Ocultar funciones y sus elementos secundarios en el gráfico tipo llama

Para ordenar el gráfico tipo llama en el subproceso Main, puedes ocultar las funciones seleccionadas o sus elementos secundarios:

  1. En la pista Principal, haz clic con el botón derecho en una función y elige una de las siguientes opciones o presiona la combinación de teclas correspondiente:

    • Ocultar función (H)
    • Ocultar elementos secundarios (C)
    • Ocultar elementos secundarios recurrentes (R)
    • Restablecer elementos secundarios (U)
    • Restablecer seguimiento (T)
    • Agregar secuencia de comandos a la lista de elementos ignorados (I)

    Menú contextual con opciones para ocultar la función seleccionada o sus elementos secundarios

    Aparecerá un botón desplegable arrow_drop_down junto al nombre de la función con los elementos secundarios ocultos.

  2. Para ver la cantidad de elementos secundarios ocultos, coloca el cursor sobre el botón desplegable arrow_drop_down.

    Información sobre el botón desplegable con la cantidad de elementos secundarios ocultos.

  3. Para restablecer una función con elementos secundarios ocultos o todo el gráfico tipo llama, selecciona la función y presiona U, o haz clic con el botón derecho en cualquier función y selecciona Restablecer seguimiento, respectivamente.

Ignora secuencias de comandos en el gráfico tipo llama

Para agregar una secuencia de comandos a la lista de elementos ignorados, haz clic con el botón derecho en una secuencia de comandos del gráfico y selecciona Agregar secuencia de comandos a la lista de elementos ignorados.

El menú contextual con la opción Ignorar secuencia de comandos enfocada.

El gráfico contrae las secuencias de comandos ignoradas, las marca como En lista de elementos ignorados y las agrega a las reglas de Exclusión personalizada en Configuración Configuración > Lista de elementos ignorados. Las secuencias de comandos omitidas se guardan hasta que las quites del seguimiento o de las Reglas de exclusión personalizadas.

La pestaña Ignorar la lista de secuencias de comandos en Configuración

Ver actividades en una tabla

Después de registrar una página, no necesitas depender únicamente del segmento Principal para analizar actividades. Herramientas para desarrolladores también proporciona tres vistas tabulares para analizar actividades. Cada vista te ofrece una perspectiva sobre las actividades:

Para ayudarte a encontrar lo que buscas más rápido, las tres pestañas tienen botones de filtrado avanzado junto a la barra de Filtro:

  • match_case Coincide con mayúsculas y minúsculas.
  • regular_expression Expresión regular.
  • match_word Coincide con palabra completa.

El botón de tres botones para filtrado avanzado.

Cada vista tabular del panel Rendimiento muestra vínculos para actividades como las llamadas a funciones. Para ayudarte a depurar, las Herramientas para desarrolladores encuentra las declaraciones de función correspondientes en los archivos de origen. Además, si los mapas de origen adecuados están presentes y habilitados, las Herramientas para desarrolladores encontrarán automáticamente los archivos originales.

Haz clic en un vínculo para abrir un archivo fuente en el panel Fuentes.

Vínculo a un archivo fuente en la pestaña Registro de eventos.

Actividades raíz

Esta es una explicación del concepto de actividades raíz que se menciona en la pestaña Call Tree. Pestaña Bottom-Up y secciones Registro de eventos

Las actividades raíz son aquellas que provocan que el navegador realice algunas tareas. Por ejemplo, al hacer clic en un el navegador activa una actividad Event como actividad raíz. Ese Event podría generar un controlador ejecutar.

En el gráfico tipo llama de la pista Principal, las actividades raíz se encuentran en la parte superior del gráfico. En el campo Llamada Árbol y Registro de eventos, las actividades raíz son los elementos de nivel superior.

Consulta la pestaña Árbol de llamadas para ver un ejemplo de las actividades raíz.

La pestaña Árbol de llamadas

Usa la pestaña Call Tree para ver qué actividades raíz generan más trabajo.

La pestaña Call Tree solo muestra actividades durante la parte seleccionada de la grabación. Consulta Selecciona una parte de una grabación para descubrir cómo elegir las partes.

La pestaña Árbol de llamadas

En este ejemplo, el nivel superior de los elementos de la columna Activity, como Event, Paint y Composite Layers son actividades raíz. El anidado representa la pila de llamadas. En En este ejemplo, Event causó el Function Call, que causó el button.addEventListener, que causó el b, etcétera.

Self Time representa el tiempo dedicado directamente a esa actividad. Tiempo total representa la tiempo dedicado a esa actividad o a cualquiera de sus hijos.

Haz clic en Self Time, Total Time o Activity para ordenar la tabla en función de esa columna.

Usa el cuadro Filtro para filtrar los eventos por nombre de actividad.

De forma predeterminada, el menú Grouping está configurado en No Grouping. Usa el menú Grouping para ordenar el en una tabla de actividades según diversos criterios.

Haz clic en Mostrar la pila más pesada. Mostrar la pila más pesada. para mostrar otra tabla a la derecha de la tabla Activity. Haz clic en una actividad para completar La pila más pesada. En la tabla Pila más pesada, se muestran los elementos secundarios de la tabla seleccionada que la actividad tardó más tiempo en ejecutarse.

La pestaña Bottom-Up

Usa la pestaña Bottom-Up para ver qué actividades llevaron más tiempo en conjunto directamente.

La pestaña Bottom-Up solo muestra actividades durante la parte seleccionada de la grabación. Consulta Selecciona una parte de una grabación para descubrir cómo elegir las partes.

La pestaña Bottom-Up.

En el gráfico tipo llama de seguimiento Principal de este ejemplo, puedes ver que casi todas se dedicó más tiempo a ejecutar las tres llamadas a wait(). Por lo tanto, la actividad principal de la La pestaña Bottom-Up es wait. En el gráfico de llamas, el amarillo debajo del Las llamadas a wait son, en realidad, miles de llamadas a Minor GC. Por lo tanto, puedes ver que en la Bottom-Up, la siguiente actividad más costosa es Minor GC.

La columna Self Time representa el tiempo agregado que se dedicó directamente a esa actividad en todas de sus casos.

La columna Tiempo total representa el tiempo agregado que se dedicó a esa actividad o a cualquiera de sus elementos secundarios.

La pestaña Registro de eventos

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

La pestaña Registro de eventos solo muestra actividades durante la parte seleccionada de la grabación. Consulta Selecciona una parte de una grabación para descubrir cómo elegir las partes.

La pestaña Registro de eventos.

La columna Hora de inicio representa el punto en el que comenzó esa actividad, en relación con el inicio. de la grabación. La hora de inicio del elemento seleccionado a las 1573.0 ms del elemento en este ejemplo significa que la actividad comenzó 1,573 ms después de que comenzó la grabación.

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

Las columnas de Tiempo total representan el tiempo que se dedicó directamente a esa actividad o a cualquiera de sus hijos o hijas.

Haz clic en Start Time, Self Time o Total Time para ordenar la tabla en función de esa columna.

Usa la casilla Filtro para filtrar las actividades por nombre.

Usa el menú Duración para filtrar las actividades que tardaron menos de 1 ms o 15 ms. De forma predeterminada El menú Duración está configurado en Todas, lo que significa que se muestran todas las actividades.

Inhabilita las casillas de verificación Carga, Secuencia de comandos, Renderización o Pintura para filtrar todas las opciones. actividades de esas categorías.

Ver tiempos

En el segmento Tiempos, puedes ver marcadores importantes como los siguientes:

Marcadores en el segmento de Tiempos

Selecciona un marcador para ver más detalles en la pestaña Resumen, incluida la marca de tiempo, el tiempo total, el tiempo propio y el objeto detail.

Ver interacciones

Consulta las interacciones de los usuarios en el segmento de Interacciones para hacer un seguimiento de los posibles problemas de capacidad de respuesta.

Para ver las interacciones, haz lo siguiente:

  1. Abre Herramientas para desarrolladores, por ejemplo, en esta página de demostración.
  2. Abre el panel Rendimiento y comienza una grabación.
  3. Haz clic en un elemento (café) y detén la grabación.
  4. Busca el segmento Interacciones en el cronograma.

La pista de Interacciones.

En este ejemplo, el segmento Interacciones muestra la interacción del Puntero. Las interacciones tienen bigotes que indican los retrasos de entrada y presentación en los límites de tiempo de procesamiento. Coloca el cursor sobre la interacción para ver información sobre la herramienta con el retraso de entrada, el tiempo de procesamiento y el retraso de presentación.

El segmento Interactions también muestra advertencias de Interaction to Next Paint (INP) para interacciones de más de 200 milisegundos en la pestaña Summary y en un cuadro de información cuando se coloca el cursor sobre la herramienta:

La advertencia de INP.

El segmento Interactions marca las interacciones de más de 200 milisegundos con un triángulo rojo en la esquina superior derecha.

Ver la actividad de GPU

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

La sección GPU.

Ver actividad de trama

Puedes ver la actividad de trama en la sección Thread Pool.

Actividad de trama en el "Conjunto de subprocesos" sección.

Cómo analizar fotogramas por segundo (FPS)

Las Herramientas para desarrolladores ofrecen varias maneras de analizar fotogramas por segundo:

Sección Frames

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

Coloca el cursor sobre un marco para ver información sobre la herramienta.

Desplázate sobre un marco.

En este ejemplo, se muestra información sobre la herramienta cuando colocas el cursor sobre un marco.

En la sección Frames, se pueden mostrar cuatro tipos de fotogramas:

  1. Marco inactivo (blanco). Sin cambios.
  2. Marco (verde): Se renderizan según lo esperado y a tiempo.
  3. Marco presentado parcialmente (amarillo con un patrón de líneas de guion amplio y disperso). Chrome hizo todo lo posible para renderizar al menos algunas actualizaciones visuales a tiempo. Por ejemplo, en caso de que el trabajo del subproceso principal del proceso del renderizador (animación de lienzo) se tarde, pero el subproceso del compositor (desplazamiento) llegue a tiempo.
  4. Marco descartado (rojo con un patrón de líneas sólidas densas). Chrome no puede renderizar el fotograma en un tiempo razonable.

Colocar el cursor sobre un marco presentado parcialmente

En este ejemplo, se muestra información sobre la herramienta cuando colocas el cursor sobre un marco presentado parcialmente.

Haz clic en un marco para ver aún más información sobre este en la pestaña Resumen. DevTools destaca el marco seleccionado en azul.

Ver un marco en la pestaña Resumen

Ver solicitudes de red

Expande la sección Red para ver una cascada de solicitudes de red que ocurrieron durante la grabación de rendimiento.

Una solicitud seleccionada en el segmento Red con la pestaña Resumen abierta.

Junto al nombre del segmento Red, aparece una leyenda con tipos de solicitud codificados por colores.

Las solicitudes de bloqueo de renderización se marcan con un triángulo rojo en la esquina superior derecha.

Coloca el cursor sobre una solicitud para ver información sobre la herramienta que contiene lo siguiente:

  • Es la URL de la solicitud y el tiempo total que se tardó en ejecutarla.
  • Prioridad o un cambio de prioridad, por ejemplo, Medium -> High
  • Indica si la solicitud es Render blocking o no.
  • Un desglose de los tiempos de las solicitudes, que se describe más adelante.

Cuando haces clic en una solicitud, el segmento Network dibuja una flecha desde el iniciador hasta la solicitud.

Además, el panel Rendimiento muestra la pestaña Resumen con más información sobre la solicitud, incluidos, sin limitaciones, los campos Prioridad inicial y (finales) Prioridad. Si sus valores difieren, la prioridad de recuperación de la solicitud cambió durante el registro. Para obtener más información, consulta Optimiza la carga de recursos con la API de Fetch Priority.

La pestaña Resumen también muestra un desglose de los tiempos de la solicitud.

El desglose de los tiempos de las solicitudes en la pestaña Resumen.

La solicitud de www.google.com se representa con una línea a la izquierda (|–), una barra en el medio con una parte oscura y una parte clara, y una línea a la derecha (–|).

Puedes encontrar otro desglose de tiempos en la pestaña Red. Haz clic con el botón derecho en la solicitud del segmento Red o en su URL en la pestaña Resumen y haz clic en Mostrar en el panel Red. Las Herramientas para desarrolladores te llevan al panel Red y selecciona la solicitud correspondiente. Abre la pestaña Timing.

La pestaña Timing de una solicitud en el panel Network.

A continuación, le mostramos cómo se asignan estos dos desgloses entre sí:

  • La línea izquierda (|–) es todo hasta el grupo de eventos Connection start, inclusive. En otras palabras, es todo lo anterior a Request Sent.
  • La parte clara de la barra es Request sent y Waiting for server response.
  • La parte oscura de la barra es Content download.
  • La línea derecha (–|) es el tiempo que se dedicó a esperar el subproceso principal. Haz clic en Red > La pestaña Timing no lo muestra.

Visualiza métricas de memoria

Habilita la casilla de verificación Memory (Memoria) para ver las métricas de memoria de la última grabación.

Casilla de verificación Memory.

Las Herramientas para desarrolladores muestran un nuevo gráfico de Memoria, arriba de la pestaña Resumen. También hay un nuevo gráfico debajo el gráfico NET, llamado HEAP. El gráfico HEAP proporciona la misma información que JS Montón en el gráfico Memory.

Métricas de memoria

En este ejemplo, se muestran las métricas de memoria sobre la pestaña Resumen.

Las líneas de colores en el gráfico se asignan a las casillas de verificación coloreadas que están arriba del gráfico. Inhabilita una casilla de verificación para ocultar esa categoría del gráfico.

El gráfico solo muestra la región de la grabación seleccionada. En el ejemplo anterior, el gráfico Memoria muestra solo el uso de memoria durante el inicio de la grabación, hasta la marca de 1,000 ms aproximadamente.

Cómo ver la duración de una parte de una grabación

Cuando analices una sección como Red o Principal, a veces necesitas una estimación más precisa de cuánto tiempo tardaron determinados eventos. Mantén presionada la tecla Mayús, 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, Herramientas para desarrolladores muestra cuánto tiempo tardó esa parte.

ver la duración de una parte de una grabación.

En este ejemplo, la marca de tiempo 488.53ms, ubicada en la parte inferior de la parte seleccionada, indica cuánto tiempo se tomó esa porción.

Ver una captura de pantalla

Consulta Cómo tomar capturas de pantalla durante la grabación para obtener información sobre cómo habilitarlas.

Coloca el cursor sobre la descripción general del cronograma para ver una captura de pantalla del aspecto que tenía la página durante ese momento del grabación. La Descripción general del cronograma es la sección que contiene los gráficos de CPU, FPS y NET.

Se muestra una captura de pantalla.

También puedes hacer clic en un marco de la sección Frames para ver las capturas de pantalla. Herramientas para desarrolladores muestra un versión pequeña de la captura de pantalla en la pestaña Resumen.

Ver una captura de pantalla en la pestaña Resumen.

En este ejemplo, se muestra la captura de pantalla del marco 195.5ms en la pestaña Summary cuando haces clic en ella en la sección Frames.

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

Acercando la captura de pantalla desde la pestaña Resumen.

En este ejemplo, se muestra una captura de pantalla ampliada después de que haces clic en la miniatura de la pestaña Resumen.

Cómo ver información de las capas

Para ver información de las capas avanzadas de un marco, haz lo siguiente:

  1. Habilita la instrumentación avanzada de procesamiento.
  2. Selecciona un marco en la sección Frames. Herramientas para desarrolladores muestra información sobre sus capas en la nueva pestaña Capas, junto a la pestaña Registro de eventos

La pestaña Capas.

Coloca el cursor sobre una capa para destacarla en el diagrama.

Destacar una capa

En este ejemplo, se muestra la capa #39 destacada cuando colocas el cursor sobre ella.

Para mover el diagrama, sigue estos pasos:

  • Haz clic en Modo de desplazamiento lateral Modo panorámico.. para moverse a lo largo de los ejes X e Y.
  • Haz clic en Modo de rotación. Modo de rotación. para rotar a lo largo del eje Z.
  • Haz clic en Reset Transform Transformación Reset.. para restablecer el diagrama a su posición original.

Observa el análisis de capas en acción:

Ver el generador de perfiles de pintura

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

  1. Habilita la instrumentación avanzada de procesamiento.
  2. Selecciona un evento Paint en el segmento Main.

La pestaña Paint Profiler.

Cómo analizar el rendimiento de la renderización con la pestaña Renderización

Usa las funciones de la pestaña Renderización para visualizar el rendimiento de renderización de tu página.

Abre la pestaña Renderización.

Mira los fotogramas por segundo en tiempo real con el medidor de FPS

Las Estadísticas de renderización de fotogramas son una superposición que aparece en la esquina superior derecha del viewport. Proporciona una estimación en tiempo real de FPS mientras se ejecuta la página.

Consulta Estadísticas de renderización de fotogramas.

Mira eventos de pintura en tiempo real con Paint Flashing

Usa Paint Flashing para obtener una vista en tiempo real de todos los eventos de pintura de la página.

Consulta Pintura destellante.

Visualiza una superposición de capas con los bordes de las capas

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

Consulta Bordes de las capas.

Detecta problemas de rendimiento de desplazamiento en tiempo real

Usa Problemas de rendimiento de desplazamiento para identificar los elementos de la página que tengan objetos de escucha de eventos relacionados con el desplazamiento que puedan dañar el rendimiento de la página. Herramientas para desarrolladores describe elementos potencialmente problemáticos en verde azulado.

Consulta Problemas de rendimiento por desplazamiento.