¿Te suena esto familiar? Estás depurando un problema de rendimiento en Herramientas para desarrolladores de Chrome, pero la gran cantidad de información del panel Rendimiento dificulta enfocarte solo en las partes más relevantes y prácticas. Entre la longitud del cronograma, la profundidad del gráfico de llama y la amplitud de muchos segmentos de datos diferentes, puede ser un desafío navegar. Por muy potente que sea el panel de rendimiento, su utilidad no debe ser a costa de la usabilidad.
Como parte de nuestra iniciativa para mejorar las herramientas de rendimiento de Chrome, recientemente lanzamos tres funciones nuevas que tienen como objetivo reducir la densidad de la información y ayudar a los desarrolladores a personalizar sus flujos de trabajo:
- Oculta partes irrelevantes del cronograma
- Oculta las partes irrelevantes del gráfico tipo llama
- Ocultar segmentos irrelevantes
En esta publicación, analizaremos cada una de estas funciones y te mostraremos cómo puedes usarlas para enfocarte solo en la información más importante.
Oculta las partes irrelevantes del cronograma
El rendimiento web opera en una escala de milisegundos, por lo que, incluso si la grabación de rendimiento dura solo unos segundos, hay muchas oportunidades de perder tu lugar.
En Chrome 122, agregamos la capacidad de crear rutas de navegación. Esta función te permite restringir los límites de la línea de tiempo para que solo puedas hacer zoom o desplazarte por un área de interés que hayas establecido. Restringir el cronograma de esta manera puede ser especialmente útil si estás tratando de depurar problemas de capacidad de respuesta, por ejemplo, para poder enfocar tu atención en una sola interacción o tarea larga problemática.
En la captura de pantalla anterior, se muestra un primer plano de la descripción general del cronograma, que visualiza la actividad del subproceso principal, como la ejecución de secuencias de comandos y el trabajo de presentación. Cuando mantengas el puntero sobre él, aparecerá un nuevo botón que establecerá los límites del cronograma en la ventana actual. El botón se etiqueta con el ancho del período, en milisegundos, y el ícono . Las rutas de navegación se encuentran sobre la descripción general del cronograma y cada una está etiquetada por el tamaño de su período.
Para usar esta función, sigue estos pasos:
- Acerca y desplázate por el cronograma hasta un área de interés.
- Haz clic en el ícono de lupa en la descripción general del cronograma para restringirlo y establecer una ruta de navegación.
- Repite la acción según sea necesario para acercar un área de interés anidada.
- Haz clic en el pan de breadcrumbs para volver a las áreas de interés anteriores o al rango completo del cronograma.
Reducir el cronograma ayuda a garantizar que nunca te desplaces fuera de los límites por accidente hacia una parte irrelevante del cronograma. Sin embargo, cuando lo necesites, puedes hacer clic en el pan de miga para alejar la imagen. Otro beneficio es que la descripción general del cronograma se mantendrá alineada con los siguientes segmentos. Esto puede facilitar mucho la detección de oportunidades de rendimiento, como los reprocesamientos forzados, y la identificación de su causa raíz en el gráfico tipo llama.
Ocultar las partes irrelevantes del gráfico tipo llama
Analizar la actividad del subproceso principal no es poca cosa. Esta parte del panel Rendimiento se conoce como gráfico tipo llama, debido a la longitud y la capacidad de las pilas de llamadas. En algunos casos extremos, estas pilas pueden ser tan difíciles de manejar que es difícil comprender todo el proceso y enfocarse en lo que se intenta optimizar.
A partir de Chrome 124, puedes personalizar exactamente qué entradas del gráfico tipo llama quieres ocultar, para que puedas enfocarte en la información más práctica.
Cuando haces clic con el botón derecho en una función del gráfico tipo llama, aparece un menú contextual con varias opciones para ocultar las entradas:
- Ocultar función: Quita la función seleccionada del gráfico de llama. Sus elementos secundarios se moverán hacia arriba para aparecer inmediatamente después de la función superior.
- Ocultar elementos secundarios: Reduce el gráfico tipo llama en la función seleccionada, ocultando todos sus elementos secundarios.
- Ocultar elementos secundarios repetidos: Quita todas las instancias de la función seleccionada del resto del gráfico de llama.
También hay varias combinaciones de teclas útiles que puedes usar cuando se selecciona una función:
- H: Oculta la función seleccionada.
- C: ocultar los elementos secundarios de la función seleccionada
- R: Oculta instancias de la función seleccionada más adelante en la pila.
- U: Mostrar los elementos secundarios ocultos de la función seleccionada
Ocultar de forma permanente las secuencias de comandos irrelevantes
La opción Agregar secuencia de comandos a la lista de elementos ignorados oculta la función seleccionada del gráfico de llama, así como todas las demás funciones definidas en el mismo archivo de secuencia de comandos. La secuencia de comandos también se agrega a la lista de elementos ignorados, que el depurador de DevTools usa para omitir funciones y no tener en cuenta las excepciones que provienen de la secuencia de comandos.
Las secuencias de comandos que se agregaron a la lista de elementos ignorados se mantienen, por lo que permanecerán ocultos del gráfico tipo llama en los nuevos seguimientos. Las secuencias de comandos que están fuera de tu control serían buenas candidatas para la lista de elementos ignorados. Por otro lado, ocultar funciones individuales es temporal para el seguimiento actual y depende más de la situación. Por ejemplo, es posible que quieras ocultar una pila complicada de llamadas a funciones recursivas para que sea más fácil trabajar con el seguimiento.
Para revertir la lista de elementos omitidos o cualquier otra función oculta en el gráfico de llama, puedes usar el menú contextual para restablecer los elementos secundarios de la función seleccionada o restablecer todas las funciones ocultas en todo el seguimiento. Las funciones con elementos secundarios ocultos se anotan con el ícono ▼, que también restablece los elementos secundarios cuando se hace clic en ellos.
Cualquier profundidad y complejidad innecesarias que puedas quitar del diagrama de llama lo hará mucho más fácil de usar. Cuando es necesario, tener la capacidad de personalizar las entradas que ves es una mejora ergonómica para ayudarte a centrar tu atención en la información más importante para la tarea en cuestión.
Cómo ocultar segmentos irrelevantes
La actividad del subproceso principal constituye solo un segmento del panel Rendimiento. Las pistas del panel Rendimiento visualizan la actividad de un proceso y están alineadas en un cronograma común para ayudar en la depuración. Además de la pista Principal, hay pistas individuales para los otros subfotogramas, subprocesos y trabajadores que usa la página, así como las pistas Red, Fotogramas, Animaciones e Interacciones. Aún más segmentos marcan la actividad de los procesos de Chrome de nivel inferior, como E/S, GPU y Compositor. Es mucha información. Sin embargo, en la mayoría de los flujos de trabajo de rendimiento, solo te preocupará la información de algunos segmentos a la vez.
A partir de Chrome 125, se produce un nuevo modo de configuración que te permite ocultar las pistas innecesarias o reorganizarlas a tu gusto. Por ejemplo, si quieres optimizar una interacción lenta, puedes ocultar todo excepto los segmentos de Interacciones, Principal y GPU.
Para editar los segmentos, haz clic con el botón derecho en el nombre de cualquiera de ellos y selecciona Configurar segmentos…. Se abrirá el modo de configuración, en el que podrás mostrar, ocultar o reorganizar pistas individuales. Haz clic en el botón Termina de configurar los segmentos para guardar tus preferencias.
Si configuras segmentos, podrás controlar la forma en que el panel Rendimiento presenta información fundamental a tu flujo de trabajo. Puedes usar esta configuración para ocultar la actividad de procesos no relacionados y mover los segmentos de modo que te brinden el acceso más fácil a los datos que necesitas.
Conclusión
Estas tres funciones te brindan nuevos controles ergonómicos potentes para personalizar tus flujos de trabajo de rendimiento. Si usas estas funciones y reduces la cantidad de ruido, estarás en una posición mucho mejor para encontrar lo que buscas y comprender los datos.
Nos encantaría saber qué funciona bien o cómo podríamos mejorar tu experiencia. Si tienes preguntas o comentarios generales, comunícate con nosotros a través de @ChromeDevTools. Si algo no funciona o tienes una sugerencia de funciones nuevas, deja un comentario sobre este problema abierto.
Este es solo el comienzo de nuestra iniciativa para mejorar las herramientas de rendimiento de Chrome, y nos complace compartir todo lo que tenemos en mente para que el panel de rendimiento sea más fácil de usar y más potente que nunca. Publicaremos nuestra próxima entrada en la que mostraremos el próximo lote de funciones aquí en el blog de Chrome para desarrolladores. Mientras tanto, consulta la página Novedades de Chrome para mantenerte al tanto de todas las novedades de Herramientas para desarrolladores y Chrome.