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 Cómo comenzar a analizar el rendimiento del tiempo de ejecución para obtener un instructivo guiado sobre cómo analizar el rendimiento de una página con las Herramientas para desarrolladores de Chrome.
Récord de rendimiento
Puedes registrar el rendimiento de carga o tiempo de ejecución.
Cómo registrar el rendimiento del entorno de ejecución
Registra el rendimiento del entorno de ejecución cuando quieras analizar el rendimiento de una página mientras se ejecuta, en lugar de hacerlo cuando se carga.
- Ve a la página que quieras analizar.
- En Herramientas para desarrolladores, haz clic en la pestaña Rendimiento.
Haz clic en Record
.
Interactúa con la página. Las Herramientas para desarrolladores registran toda la actividad de la página que se produce como resultado de tus interacciones.
Vuelve a hacer clic en Grabar o en Detener para detener la grabación.
Registra el rendimiento de carga
Registra el rendimiento de carga cuando quieras analizar el rendimiento de una página mientras se carga, en lugar de hacerlo cuando se ejecuta.
- Ve a la página que quieras analizar.
- Abre el panel Rendimiento de Herramientas para desarrolladores.
Haz clic en Start profiling and reload page
. Primero, las Herramientas para desarrolladores navegan a about:blankpara borrar las capturas de pantalla y seguimientos restantes. Luego, Herramientas para desarrolladores registra las métricas de rendimiento mientras se vuelve a cargar la página y, luego, detiene automáticamente la grabación unos segundos después de que termina la carga.
Las Herramientas para desarrolladores acercan automáticamente la parte de la grabación en la que ocurrió la mayor parte de la actividad.
En este ejemplo, el panel Rendimiento muestra la actividad durante una carga de 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 cada fotograma durante la grabación.
Consulta el artículo Cómo ver una captura de pantalla para obtener información sobre cómo interactuar con ellas.
Forzar la recolección de elementos no utilizados durante la grabación
Mientras grabas una página, haz clic en Recoger elementos no utilizados trapeador para forzar la recolección de elementos no utilizados.
Mostrar la configuración de grabación
Haz clic en Capture settings
para exponer más parámetros de configuración relacionados con la forma en que las Herramientas para desarrolladores capturan las grabaciones de rendimiento.
Inhabilitar las muestras de JavaScript
De manera predeterminada, el segmento Main de una grabación muestra pilas de llamadas detalladas de las funciones de JavaScript que se llamaron durante la grabación. Para inhabilitar estas pilas de llamadas, sigue estos pasos:
- Abre el menú Configuración de captura
. Consulta Mostrar la configuración de grabación. - Habilita la casilla de verificación Inhabilitar muestras de JavaScript.
- Graba la página.
En las siguientes capturas de pantalla, se muestra la diferencia entre inhabilitar y habilitar las muestras de JavaScript. El segmento Main de la grabación es mucho más corto cuando el muestreo está inhabilitado, ya que omite todas las pilas de llamadas de JavaScript.
En este ejemplo se muestra una grabación con muestras de JS inhabilitadas.
En este ejemplo se muestra una grabación con muestras de JS habilitadas.
Limita la red durante la grabación
Sigue estos pasos para limitar la red durante la grabación:
- Abre el menú Configuración de captura
. Consulta Mostrar la configuración de grabación. - Configura la Red en el nivel de regulación elegido.
Limita la CPU durante el registro
Para limitar la CPU durante el registro, haz lo siguiente:
- Abre el menú Configuración de captura
. Consulta Mostrar la configuración de grabación. - Configura la CPU en el nivel de regulación elegido.
La limitación se relaciona con las capacidades de tu computadora. Por ejemplo, la opción de lentitud 2x hace que tu 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, porque la arquitectura de estos dispositivos es muy diferente a la de las computadoras de escritorio y las laptops.
Habilita la instrumentación avanzada de procesamiento
Para ver la instrumentación detallada de la pintura, haz lo siguiente:
- Abre el menú Configuración de captura
. Consulta Mostrar la configuración de grabación. - Marca la casilla de verificación Habilitar la instrumentación avanzada de procesamiento.
Para aprender a interactuar con la información de pintura, consulta Capas de vista y Cómo ver el generador de perfiles de pintura.
Emula la simultaneidad de hardware
Para probar el rendimiento de la aplicación con distintas cantidades de núcleos del procesador, puedes configurar el valor que informa la propiedad navigator.hardwareConcurrency. Algunas aplicaciones usan esta propiedad para controlar el grado de paralelismo de su aplicación, por ejemplo, con el fin de controlar el tamaño del grupo de pthread de Emscripten.
Para emular la simultaneidad de hardware, haz lo siguiente:
- Abre el menú Configuración de captura
. Consulta Mostrar la configuración de grabación. - Marca Simultaneidad de hardware y establece la cantidad de núcleos en la casilla de entrada.
Las Herramientas para desarrolladores muestran un ícono de advertencia 
junto a la pestaña Rendimiento para recordarte que está habilitada la emulación de simultaneidad de hardware.
Para volver al valor predeterminado de 10, haz clic en el botón Revertir 
.
Cómo guardar una grabación
Para guardar una grabación, haz clic con el botón derecho y selecciona Save Profile.
Cómo cargar una grabación
Para cargar una grabación, haz clic con el botón derecho y selecciona Load Profile.
Borra la grabación anterior
Después de realizar una grabación, presiona Clear recording
para borrar esa grabación del panel Performance.
Cómo analizar un registro de rendimiento
Después de registrar el rendimiento del tiempo de ejecución o registrar el rendimiento de carga, el panel Performance proporciona muchos datos para analizar el rendimiento de lo que acaba de suceder.
Cómo navegar por la grabación
Para inspeccionar minuciosamente tu registro de rendimiento, puedes seleccionar una parte de un registro, desplazarte por un gráfico de llamas largo, acercar y alejar, 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 CPU y NET.
Para seleccionar una parte de una grabación, mantén presionada la pantalla y arrástrala hacia la izquierda o la derecha en la Descripción general del cronograma.
Para seleccionar una parte con el teclado, haz lo siguiente:
- Enfoca el segmento Main o cualquiera de sus vecinos.
- Usa las teclas W, A, S y D para acercar y alejar la imagen, moverla a la izquierda, alejarla y moverla hacia la derecha, respectivamente.
Para seleccionar una parte con un panel táctil, haz lo siguiente:
- Coloca el cursor sobre la sección Descripción general del cronograma o cualquiera de los segmentos (Principal y sus vecinos).
- Desliza dos dedos hacia arriba para alejar la imagen, desliza el dedo hacia la izquierda para moverte hacia la izquierda, hacia abajo para acercar y hacia la derecha para moverte hacia la derecha.
Crea rutas de navegación y salta entre niveles de zoom
La descripción general del cronograma te permite crear varias rutas de navegación anidadas en sucesión, aumentar los niveles de zoom y, luego, saltar al nivel seleccionado.
Para crear y usar rutas de navegación, haz lo siguiente:
- En Descripción general del cronograma, selecciona una parte de la grabación.
- Coloca el cursor sobre la selección y haz clic en el botón N ms zoom_in. La selección se expande para llenar la Descripción general del cronograma. En la parte superior de la Descripción general del cronograma, se comienza a crear una cadena de rutas de navegación.
- Repite los dos pasos anteriores para crear otra ruta de navegación anidada. Puedes seguir anidando rutas de navegación siempre que el rango de selección sea superior a 5 milisegundos.
- Para saltar a un nivel de zoom elegido, haz clic en la ruta de navegación correspondiente en la cadena que está en la parte superior de la Descripción general del cronograma.
Desplazarse por un gráfico tipo llama largo
Para desplazarte por un gráfico tipo llama largo en el segmento Main o en cualquiera de sus vecinos, mantén presionado y arrastra en cualquier dirección hasta que se vea lo que estás buscando.
Buscar actividades
Para abrir un cuadro de búsqueda en la parte inferior del panel Rendimiento, presiona:
- macOS: Comando + F
- Windows y Linux: Control + F
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.
Sigue estos pasos para recorrer las actividades que coinciden con tu consulta:
- Haz clic en los botones expand_less Anterior o en expand_less Siguiente.
- Presiona Mayúsculas + Intro para seleccionar el anterior o Intro para seleccionar el siguiente.
El panel Rendimiento muestra información sobre la actividad seleccionada en el cuadro de búsqueda.
Para modificar la configuración de las consultas, haz lo siguiente:
- Haz clic en match_case Match case 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 ver la actividad del subproceso principal
Usa el segmento Main para ver la actividad que se produjo en el subproceso principal de la página.
Haz clic en un evento para ver más información al respecto en la pestaña Resumen. El panel Rendimiento muestra el evento seleccionado en azul.
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 Performance 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 de arriba generan los eventos de abajo.
En este ejemplo, se muestra un gráfico tipo llama en el segmento Main. Un evento click provocó una llamada a función anónima. Esta función, a su vez, llamó a onEndpointClick_, que llamó a handleClick_, y así sucesivamente.
El panel Performance 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 otro guion son de color rosa claro. El amarillo más oscuro representa la actividad de secuencias de comandos, y el evento púrpura representa la actividad de renderización. Estos eventos de color amarillo y púrpura más oscuros son coherentes en todas las grabaciones.
También se destacan las tareas largas con un triángulo rojo y con la parte de más de 50 milisegundos sombreada en rojo:
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.
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 Inhabilita las muestras de JavaScript. Cuando las muestras de JS están inhabilitadas, solo ves los eventos de alto nivel, como Event (click) y Function Call.
Cómo realizar un seguimiento de los iniciadores de eventos
El segmento Main puede mostrar flechas que conectan a los siguientes iniciadores y los eventos que provocaron:
- Invalidación de estilo o diseño -> Volver a calcular estilos o Diseño
- Marco de animación de solicitud -> Marco de animación activado
- Solicitar devolución de llamada inactiva -> Devolución de llamada inactiva de Fire
- 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 uno de los iniciadores en el gráfico tipo llama y haz clic en él.
Cómo ver actividades en una tabla
Después de grabar una página, no necesitas depender solo del segmento Principal para analizar las actividades. Herramientas para desarrolladores también proporciona tres vistas tabulares para analizar actividades. Cada vista te brinda una perspectiva diferente sobre las actividades:
- Cuando desees ver las actividades raíz que generan más trabajo, usa la pestaña Árbol de llamadas.
- Cuando quieras ver las actividades en las que se invirtió más tiempo directamente, usa la pestaña Bottom-Up.
- Cuando quieras ver las actividades en el orden en que ocurrieron durante la grabación, usa la pestaña Registro de eventos.
Para ayudarte a encontrar lo que buscas más rápido, las tres pestañas tienen botones para realizar filtros avanzados junto a la barra Filtros:
- match_case Coincidir mayúsculas y minúsculas.
- regular_expression Expresión regular.
- match_word Coincidir palabra completa.
Cada vista tabular del panel Rendimiento muestra vínculos para actividades, como llamadas a funciones. Para ayudarte a depurar, Herramientas para desarrolladores encuentra las declaraciones de funciones correspondientes en los archivos fuente. Además, si los mapas de fuentes correspondientes están presentes y habilitados, Herramientas para desarrolladores encontrará automáticamente los archivos originales.
Haz clic en un vínculo para abrir un archivo fuente en el panel Fuentes.
Actividades raíz
Esta es una explicación del concepto actividades raíz que se menciona en las secciones Árbol de llamadas, Bottom-Up y Registro de eventos.
Las actividades raíz son aquellas que hacen que el navegador realice algunas tareas. Por ejemplo, cuando haces clic en una página, el navegador activa una actividad Event como actividad raíz. Ese Event podría hacer que se ejecute un controlador.
En el gráfico tipo llama del segmento Main, 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.
Consulta la pestaña Call Tree para ver un ejemplo de las actividades raíz.
La pestaña Call Tree
Usa la pestaña Árbol de llamadas para ver las actividades raíz que generan más trabajo.
En la pestaña Call Tree, solo se muestran las actividades durante la parte seleccionada de la grabación. Consulta Cómo seleccionar una parte de una grabación para obtener información sobre cómo seleccionar las partes.
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 este ejemplo, Event causó el Function Call, que causó el button.addEventListener, que causó b, etcétera.
El tiempo propio representa el tiempo que se dedicó directamente a esa actividad. Total Time representa el tiempo dedicado a esa actividad o a cualquiera de sus actividades secundarias.
Haz clic en Tiempo propio, Tiempo total o Actividad para ordenar la tabla según esa columna.
Usa el cuadro Filtro para filtrar eventos por nombre de actividad.
De forma predeterminada, el menú Grouping está configurado en No Grouping. Usa el menú Grouping para ordenar la tabla de actividades según varios criterios.
Haz clic en Show Heaviest Stack
para mostrar otra tabla a la derecha de Activity. Haz clic en una actividad para propagar la tabla Pila más pesada. En la tabla Pila más pesada, se muestra qué elementos secundarios de la actividad seleccionada tardaron más tiempo en ejecutarse.
La pestaña Bottom-Up
Usa la pestaña Bottom-Up para ver qué actividades directamente ocuparon más tiempo en conjunto.
La pestaña Bottom-Up solo muestra las actividades que ocurren durante la parte seleccionada de la grabación. Consulta Cómo seleccionar una parte de una grabación para obtener información sobre cómo seleccionar las partes.
En el gráfico de llama de seguimiento Main de este ejemplo, puedes ver que casi todo el tiempo se dedicó a ejecutar las tres llamadas a wait(). En consecuencia, la actividad principal en la pestaña Bottom-Up es wait. En el gráfico de llamas, el amarillo que aparece debajo de las llamadas a wait es, en realidad, miles de llamadas Minor GC. Por lo tanto, puedes ver que, en la pestaña 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 todos sus casos.
La columna Tiempo total representa el tiempo agregado que se dedicó a esa actividad o a cualquiera de sus actividades secundarias.
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 las actividades de la parte seleccionada de la grabación. Consulta Cómo seleccionar una parte de una grabación para obtener información sobre cómo seleccionar las partes.
La columna Start Time representa el punto en el que comenzó la actividad, en relación con el inicio del registro. La hora de inicio de 1573.0 ms para el elemento seleccionado 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 que se dedicó directamente a esa actividad.
Las columnas Total Time representan el tiempo que se pasó directamente en esa actividad o en cualquiera de sus elementos secundarios.
Haz clic en Start Time, Self Time o Total Time para ordenar la tabla según esa columna.
Usa el cuadro Filtro para filtrar actividades por nombre.
Usa el menú Duration para filtrar las actividades que tardaron menos de 1 ms o 15 ms. De forma predeterminada, el menú Duration está configurado en All, lo que significa que se muestran todas las actividades.
Inhabilita las casillas de verificación Loading, Scripting, Rendering o Painting para filtrar todas las actividades de esas categorías.
Ver tiempos
En el segmento Timings, consulta los marcadores importantes como los siguientes:
- Primer procesamiento de imagen (FP)
- Primer procesamiento de imagen con contenido (FCP)
- Procesamiento de imagen con contenido más grande (LCP)
- Evento DOMContentLoaded (DCL)
- Evento de carga (L)
- Tus llamadas personalizadas de
performance.mark()A continuación, a 813.44 ms, se muestra una marca individual con información sobre la herramienta, con la etiqueta Iniciando la ejecución de JavaScript. - Tus llamadas personalizadas de
performance.measure()A continuación, se muestra un intervalo amarillo, etiquetado como Interacción lenta.
Para ver más detalles en la pestaña Resumen, selecciona un marcador. Para ver la marca de tiempo del marcador, desplázate sobre él en el segmento Timing.
Ver interacciones
Consulta las interacciones de los usuarios en el segmento Interacciones para hacer un seguimiento de los posibles problemas de capacidad de respuesta.
Para ver las interacciones, sigue estos pasos:
- Abre Herramientas para desarrolladores, por ejemplo, en esta página de demostración.
- Abre el panel Rendimiento e inicia una grabación.
- Haz clic en un elemento (café) y detén la grabación.
- Busca el segmento Interacciones en el cronograma.
En este ejemplo, el segmento Interacciones muestra la interacción del Puntero. Las interacciones tienen bigotes que indican retrasos en las entradas y la 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 retraso de entrada, tiempo de procesamiento y retraso de presentación.
El segmento Interacciones también muestra advertencias de Interacción con la siguiente pintura (INP) para las interacciones de más de 200 milisegundos en la pestaña Resumen y en un cuadro de información sobre la herramienta cuando colocas el cursor sobre un elemento:
El segmento Interacciones marca las interacciones durante más de 200 milisegundos con un triángulo rojo en la esquina superior derecha.
Cómo ver la actividad de GPU
Consulta la actividad de la GPU en la sección GPU.
Cómo ver la actividad de la trama
Consulta la actividad de la trama en la sección Trama.
Cómo analizar fotogramas por segundo (FPS)
Herramientas para desarrolladores ofrece varias formas de analizar fotogramas por segundo:
- Usa la sección Fotogramas para ver cuánto tardó un fotograma en particular.
- Usa el medidor de FPS para obtener una estimación en tiempo real de los FPS a medida que se ejecuta la página. Consulta Cómo ver fotogramas por segundo en tiempo real con el medidor de FPS.
La sección Frames
En la sección Frames, se indica exactamente cuánto tiempo tardó un fotograma en particular.
Coloca el cursor sobre un marco para ver un cuadro de información adicional sobre él.
En este ejemplo, se muestra un cuadro de información sobre la herramienta cuando colocas el cursor sobre un marco.
En la sección Frames, se pueden mostrar cuatro tipos de marcos:
- Marco inactivo (blanco). Sin cambios.
- Marco (verde). Se renderiza como se espera y a tiempo.
- Marco presentado parcialmente (amarillo con un patrón de líneas de puntos anchos dispersos). 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 del lienzo) esté retrasado, pero el subproceso del compositor (desplazamiento) esté a tiempo.
- Marco descartado (de color rojo con un patrón denso de línea sólida). Chrome no puede renderizar el fotograma en un tiempo razonable.
En este ejemplo, se muestra información sobre la herramienta cuando colocas el cursor sobre un marco parcialmente presentado.
Haz clic en un marco para ver aún más información sobre él en la pestaña Resumen. Herramientas para desarrolladores delinea el marco seleccionado en azul.
Ver solicitudes de red
Expande la sección Red para ver una cascada de solicitudes de red que se produjeron durante la grabación.
Las solicitudes se codifican por color de la siguiente manera:
- HTML: Azul
- CSS: Púrpura
- JS: Amarillo
- Imágenes: Verde
Haz clic en una solicitud para ver más información al respecto en la pestaña Resumen. En el ejemplo anterior, la pestaña Resumen muestra información sobre la solicitud verde seleccionada.
Un cuadrado azul más oscuro en la parte superior izquierda de una solicitud significa que es una solicitud de mayor prioridad. Un cuadrado azul más claro significa una prioridad más baja. En el ejemplo anterior, la solicitud seleccionada es de prioridad alta, y la azul que aparece por encima de ella tiene la prioridad más alta.
La sección Resumen incluye los campos Prioridad inicial y Prioridad (final). Si sus valores difieren, la prioridad de recuperación de la solicitud cambió durante la grabación. Para obtener más información, consulta Cómo optimizar la carga de recursos con la API de Fetch Priority.
En el ejemplo anterior, 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 clara, y una línea a la derecha. En la siguiente captura de pantalla, se muestra la representación correspondiente de la misma solicitud en la pestaña Timing del panel Red.
A continuación, se muestra cómo estas dos representaciones se asignan entre sí:
- La línea de la izquierda corresponde a todo lo que incluye el grupo de eventos
Connection Start, inclusive. En otras palabras, es todo lo anterior aRequest Sent, exclusivo. - La parte luminosa de la barra es
Request SentyWaiting (TTFB). - La parte oscura de la barra es
Content Download. - La línea derecha es, básicamente, el tiempo dedicado a esperar el subproceso principal. Esto no se representa en la pestaña Cronograma.
En este ejemplo, se muestra la representación en la barra de líneas de la solicitud www.google.com.
En este ejemplo, se muestra la representación de la pestaña Timing de la solicitud www.google.com.
Cómo ver las métricas de memoria
Habilita la casilla de verificación Memory para ver las métricas de memoria de la última grabación.
Las Herramientas para desarrolladores mostrarán un gráfico nuevo de Memoria, arriba de la pestaña Resumen. También hay un gráfico nuevo debajo del gráfico NET, llamado HEAP. El gráfico HEAP proporciona la misma información que la línea Montón JS del gráfico Memoria.
En este ejemplo, se muestran las métricas de la memoria sobre la pestaña Resumen.
Las líneas de colores del gráfico se asignan a las casillas de verificación coloreadas que están encima del gráfico. Inhabilitar 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 de memoria solo muestra el uso de memoria del inicio de la grabación, hasta alrededor de la marca de 1,000 ms.
Cómo ver la duración de una parte de una grabación
Cuando analizas una sección como Red o Principal, a veces necesitas una estimación más precisa del tiempo que tardaron ciertos eventos. Mantén presionada la tecla Mayúsculas, mantén presionado y arrastra hacia la izquierda o la derecha para seleccionar una parte de la grabación. En la parte inferior de tu selección, Herramientas para desarrolladores muestra cuánto tiempo tomó esa parte.
En este ejemplo, la marca de tiempo 488.53ms en la parte inferior de la parte seleccionada indica cuánto tiempo tomó esa parte.
Ver una captura de pantalla
Consulta Cómo tomar capturas de pantalla durante la grabación para obtener información sobre cómo habilitar las capturas de pantalla.
Coloca el cursor sobre Descripción general del cronograma para ver una captura de pantalla de cómo se veía la página durante ese momento de la grabación. En Descripción general del cronograma, se encuentran los gráficos CPU, FPS y NET.
También puedes ver las capturas de pantalla haciendo clic en un marco de la sección Frames. Herramientas para desarrolladores muestra una versión pequeña de la captura de pantalla en la pestaña Resumen (Summary).
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.
En este ejemplo, se muestra una captura de pantalla con zoom después de hacer clic en su miniatura en la pestaña Resumen (Summary).
Cómo ver la información de las capas
Para ver la información de capas avanzadas sobre un marco:
- Habilita la instrumentación avanzada de procesamiento.
- Selecciona un marco en la sección Frames. Las Herramientas para desarrolladores muestran información sobre sus capas en la nueva pestaña Capas, junto a la pestaña Registro de eventos.
Coloca el cursor sobre una capa para destacarla en el diagrama.
En este ejemplo, se muestra la capa #39 destacada cuando colocas el cursor sobre ella.
Para mover el diagrama, haz lo siguiente:
- Haz clic en Modo de desplazamiento lateral
para desplazarte por los ejes X e Y. - Haz clic en Rotate Mode
para rotar a lo largo del eje Z. - Haz clic en Reset Transform
para restablecer el diagrama a su posición original.
Observa el análisis de capas en acción:
Ver generador de perfiles de pintura
Para ver información avanzada sobre un evento de pintura, haz lo siguiente:
- Habilita la instrumentación avanzada de procesamiento.
- Selecciona un evento Paint en el segmento Main.
Cómo analizar el rendimiento de 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 la página.
Abre la pestaña Renderización.
Visualiza 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 a medida que se ejecuta la página.
Consulta las 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 Escritura en la memoria flash.
Cómo ver una superposición de capas con los bordes de las capas
Usa la opción Bordes de capas para ver una superposición de mosaicos y bordes de capas en la parte superior de la página.
Consulta Bordes de la capa.
Cómo encontrar problemas de rendimiento de desplazamiento en tiempo real
Utiliza Desplazamiento de problemas de rendimiento para identificar los elementos de la página que tienen objetos de escucha de eventos relacionados con el desplazamiento que pueden afectar el rendimiento de la página. Herramientas para desarrolladores describe en verde azulado los elementos potencialmente problemáticos.