¿Esto te suena familiar? Estás depurando un problema de rendimiento en las Herramientas para desarrolladores de Chrome, pero la cantidad abrumadora de información en el panel de rendimiento hace que sea difícil enfocarse solo en las partes más relevantes y prácticas. La navegación puede ser un desafío entre la longitud de la línea de tiempo, la profundidad del gráfico tipo llama y la amplitud de muchas pistas de datos diferentes. Aunque el panel Rendimiento sea increíblemente potente, su utilidad no debería afectar la usabilidad.
Como parte de nuestra iniciativa para mejorar las herramientas de rendimiento de Chrome, recientemente lanzamos tres funciones nuevas destinadas a reducir la densidad de la información y ayudar a los desarrolladores a personalizar sus flujos de trabajo:
- Oculta las partes irrelevantes del cronograma
- Oculta las partes irrelevantes del gráfico tipo llama
- Oculta las pistas irrelevantes
En esta publicación, analizaremos con más detalle cada una de estas funciones y te mostraremos cómo puedes usarlas para centrarnos solo en la información más importante.
Ocultar las partes irrelevantes del cronograma
El rendimiento web opera en milisegundos. Por lo tanto, incluso si tu grabación dura solo unos segundos, existen muchas oportunidades de que pierdas 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 dentro de un área de interés que establezcas. 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 centrar la atención en una sola interacción o una tarea larga problemática.
En la captura de pantalla anterior, se muestra un acercamiento de la descripción general del cronograma, que visualiza la actividad del subproceso principal, como la ejecución de la secuencia de comandos y el trabajo de presentación. Cuando mantienes el puntero sobre él, aparece un nuevo botón que establece los límites de la línea de tiempo 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, haz lo siguiente:
- Haz zoom en la línea de tiempo y desplázate lateralmente por 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 las rutas de navegación para volver a las áreas de interés anteriores o al intervalo completo del cronograma.
Recortar la línea de tiempo ayuda a garantizar que nunca te desplaces fuera de los límites por accidente en una parte irrelevante de la línea de tiempo. Sin embargo, cuando lo necesites, puedes hacer clic en las rutas de navegación 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 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 el ancho de las pilas de llamadas. En algunos casos extremos, estas pilas pueden ser tan difíciles de manejar que resulta difícil darle sentido a todo y enfocarse en lo que se intenta optimizar.
A partir de Chrome 124, puedes personalizar exactamente qué entradas del gráfico tipo llama 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 entradas:
- Ocultar función: Quita la función seleccionada del gráfico tipo llama. Sus elementos secundarios se moverán hacia arriba para aparecer inmediatamente después de su función superior.
- Ocultar elementos secundarios: Reduce el gráfico tipo llama en la función seleccionada y oculta todos sus elementos secundarios.
- Ocultar elementos secundarios repetidos: Quita todas las instancias de la función seleccionada del resto del gráfico tipo llama.
También existen varias combinaciones de teclas útiles que puedes usar cuando se selecciona una función:
- H: Ocultar la función seleccionada
- C: Oculta los elementos secundarios de la función seleccionada.
- R: Oculta las instancias de la función seleccionada más adelante en la pila.
- U: Muestra los elementos secundarios ocultos de la función seleccionada.
Oculta 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 tipo llama, así como todas las demás funciones definidas dentro del mismo archivo de secuencia de comandos. La secuencia de comandos también se agrega a la lista de elementos ignorados, que el depurador de Herramientas para desarrolladores usa para omitir funciones y poder ignorar las excepciones que se originan en la secuencia de comandos.
Las secuencias de comandos agregadas a la lista de elementos ignorados se conservan, por lo que permanecerán ocultas del gráfico tipo llama en seguimientos nuevos. Las secuencias de comandos 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 engorrosa de llamadas recursivas a funciones para que sea más fácil trabajar con el seguimiento.
Para revertir la lista de elementos ignorados o cualquier otra función oculta en el gráfico tipo llama, puedes usar el menú contextual para restablecer los elementos secundarios de la función seleccionada o restablecer todas las funciones ocultas en 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 gráfico tipo llama lo hará mucho más utilizable. Cuando sea necesario, tener la capacidad de personalizar las entradas que ves es una mejora ergonómica que te ayudará a centrar tu atención en la información más significativa para la tarea en cuestión.
Ocultar pistas irrelevantes
La actividad del subproceso principal constituye un solo segmento del panel Performance. Los seguimientos del panel Rendimiento permiten visualizar la actividad de un proceso. Todos están alineados con un cronograma común para ayudar en la depuración. Además del segmento Main, hay segmentos individuales para los otros submarcos, subprocesos y trabajadores que usa la página, así como los segmentos Network, Frames, Animations e Interactions. Incluso más pistas marcan la actividad de los procesos de Chrome de nivel inferior, como IO, GPU y Compositor. Es mucha información. Sin embargo, para la mayoría de los flujos de trabajo de rendimiento, solo deberás preocuparte por la información de algunos segmentos a la vez.
A partir de Chrome 125, se incluye un nuevo modo de configuración que te permite ocultar las pistas innecesarias o reorganizarlas como desees. Por ejemplo, si optimizas una interacción lenta, puedes optar por ocultar todo, excepto los seguimientos Interactions, Main y GPU.
Para editar los segmentos, haz clic con el botón derecho en el nombre de cualquier segmento 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 Terminar de configurar pistas 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 recorridos de una manera que te brinde 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 estás buscando y darle sentido a los datos.
Nos encantaría saber qué está funcionando bien o cómo podrías mejorar tu experiencia. Si tienes preguntas o comentarios generales, comunícate con @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. Nos entusiasma compartir todo lo que hemos preparado para que el panel Performance sea más fácil de usar y más potente que nunca. Publicaremos nuestra próxima publicación sobre el próximo lote de funciones aquí en el blog de Chrome for Developers. Mientras tanto, consulta la página Novedades de Chrome para mantenerte al tanto de todas las novedades de Herramientas para desarrolladores y Chrome.