Fecha de publicación: 13 de noviembre de 2024
Imagina que observas un registro de rendimiento y quieres destacar un área específica, como la tarea más larga o una parte de trabajo innecesaria. Tal vez quieras tomar notas para consultarlas en el futuro o compartir tus conclusiones con un colega. ¿Cuál es la mejor manera de hacerlo?
Por supuesto, se trata de imprimir el seguimiento en una hoja de papel enorme y dibujar y escribir las notas de forma manual, o bien usar software de terceros para dibujar notas en una captura de pantalla de un seguimiento. (aunque esa era la mejor manera hasta ahora).
Como parte del compromiso de nuestro equipo con la optimización de los flujos de trabajo de los desarrolladores, nos complace presentar una alternativa a esas opciones: la capacidad de agregar anotaciones directamente al registro dentro del panel Rendimiento.
Ahora, puedes anotar los seguimientos en su lugar, navegar por esas anotaciones con facilidad y, además, guardarlas directamente en el archivo de seguimiento. Esto hace que compartir las estadísticas destacadas sea tan sencillo como enviar un archivo y, al mismo tiempo, elimina la necesidad de herramientas externas o soluciones alternativas. Las anotaciones no solo pueden ayudarte con el rendimiento de la depuración, sino que también pueden ayudarte a estar en sintonía rápidamente con tu colega o a mejorar su comprensión de lo que sucede sin mucho intercambio.
Existen tres tipos de anotaciones:
Períodos con anotaciones: Etiqueta cualquier período en el cronograma.
Entradas con anotaciones: Agregar una etiqueta a cualquier entrada del cronograma
Conexiones de entrada: Conecta dos entradas con una flecha para mostrar su relación.
Veamos cada tipo de anotación y las situaciones en las que pueden ser útiles.
Intervalos de tiempo con anotaciones
Un flujo de trabajo común en DevTools es grabar un registro para depurar una interacción lenta. La vista de seguimiento puede parecer abrumadora al principio, pero a medida que desgloses los controladores de eventos y las pilas de llamadas específicos, comenzará a tener sentido. Para facilitar el trabajo con la vista de seguimiento, puedes crear una anotación para etiquetar cómo se suele dedicar un bloque de tiempo. Por ejemplo, podría ser útil anotar el rango de tiempo para que la IU se actualice de manera significativa después de una interacción del usuario.
Para anotar un período, mantén presionada la tecla Mayús y arrastra desde el inicio de la interacción hasta la actualización de la IU. Luego, escribe una etiqueta para crear la anotación. Si el rango seleccionado no es correcto, haz clic fuera de él antes de escribir para cancelarlo. Para editar la etiqueta de una anotación, haz doble clic en ella. Por el momento, no puedes ajustar el intervalo de tiempo de una anotación existente. Si el período es incorrecto, borra la anotación y crea una nueva.
Con esta anotación, tendrás una visión más clara de todo el trabajo que se debe realizar antes de que se produzca el cambio visible para el usuario, de modo que puedas enfocar la depuración según corresponda.
Entradas con anotaciones
Para que el cambio visible para el usuario sea más obvio, también puedes anotar la tarea responsable de la transición con una etiqueta de entrada.
Para crear una etiqueta para la entrada, haz doble clic en la entrada seleccionada y escribe la etiqueta, o bien haz clic con el botón derecho en la entrada y selecciona "Etiquetar entrada" en el menú contextual. Para editar la etiqueta de una anotación, haz doble clic en la entrada o en la etiqueta. Como alternativa, selecciona la opción "Etiquetar entrada" en el menú contextual.
Con estas anotaciones de entrada, es más fácil detectar el trabajo que es (o no) fundamental para la interacción y cuánto tiempo lleva.
Conexiones de entrada
La tercera forma en que podemos anotar el registro es dibujar la conexión entre la interacción y la tarea larga responsable de la transición.
Para crear una conexión entre entradas, haz doble clic en la entrada que deseas conectar a otra y, luego, haz clic en la flecha que aparece a la derecha de esa entrada. A continuación, haz clic en la entrada a la que deseas conectarlo. Como alternativa, haz clic con el botón derecho en la entrada y selecciona "Vincular entradas" en el menú contextual de la entrada.
Por lo tanto, aunque la interacción en sí haya finalizado, puedes usar este tipo de anotación para mostrar con mayor claridad cómo se conecta con las tareas largas posteriores que, en última instancia, bloquean la IU.
Borra y oculta anotaciones
Todas las anotaciones se pueden borrar rápidamente desde la vista de lista de anotaciones en la barra lateral. Si colocas el cursor sobre una anotación, se mostrará un ícono de papelera . Haz clic en este ícono para borrar la anotación.
Como alternativa, para borrar las etiquetas de entrada y las anotaciones de conexión de entradas asociadas con un evento específico, haz clic con el botón derecho en el evento y selecciona "Borrar anotaciones". Las anotaciones con etiquetas también se pueden borrar quitando la etiqueta y guardando las anotaciones.
Si quieres ocultar las anotaciones sin borrarlas para que no te molesten mientras exploras el seguimiento, marca la casilla de verificación "Ocultar anotaciones" que se encuentra en la parte inferior de la barra lateral de anotaciones. Se guardará esta preferencia. Cuando cargues un registro con anotaciones mientras este parámetro de configuración esté habilitado, las anotaciones permanecerán ocultas hasta que quites la marca de verificación.
Cómo guardar o cargar seguimientos con anotaciones
Genial, agregaste todas esas anotaciones para ayudarte a ti y a otras personas a comprender el seguimiento. Próximos pasos
No es necesario tomar capturas de pantalla del seguimiento para enviarlas a un colega como antes, antes de las anotaciones. Solo guarda el archivo con anotaciones y envíaselo. Eso es todo. El equipo de asistencia puede subir el archivo al panel Rendimiento y ver todas las anotaciones que hiciste en el contexto del seguimiento, o incluso agregar más anotaciones y enviarte el archivo.
DevTools también guardará otros tipos de personalizaciones en la vista de seguimiento. Por ejemplo, puedes aislar un área de interés si acercas la imagen y estableces un breadcrumb, o bien puedes ocultar entradas en pilas de llamadas irrelevantes. El archivo de seguimiento conservará todos esos parámetros de configuración, lo que facilitará aún más la colaboración en la depuración del rendimiento. Con todas estas personalizaciones, puedes llamar la atención sobre lo que más importa y, al mismo tiempo, proporcionar el contexto de todo el seguimiento interactivo, a diferencia de una captura de pantalla.
Para conservar las anotaciones y otras personalizaciones, haz clic en la opción Guardar registro debajo del ícono de descarga . Cuando se cargue un registro, contendrá todas esas personalizaciones. La opción predeterminada es guardar con anotaciones, pero si solo deseas guardar el archivo de seguimiento sin procesar, selecciona la opción Guardar seguimiento sin anotaciones.
Conclusión
Puede parecer que es mucha información para absorber, pero no te preocupes. Las instrucciones para crear anotaciones se pueden encontrar en la pestaña de anotaciones de la barra lateral del panel Rendimiento. Esta pestaña proporciona instrucciones cuando no hay anotaciones y muestra una vista de lista de las anotaciones una vez que se crean.
Así, las anotaciones en el panel Rendimiento permiten a los desarrolladores identificar momentos cruciales dentro de un seguimiento y agregar contexto y estadísticas personalizados. Esto optimiza el proceso de análisis, lo que facilita la colaboración y el intercambio de optimizaciones de rendimiento. Prueba las anotaciones en el panel Rendimiento y danos tu opinión. Si tienes algún comentario, nos encantaría leerlo en el problema público.
Olvídate de la necesidad de herramientas externas y da la bienvenida a un flujo de trabajo más eficiente.