Depuración en Jetpack Compose

En el artículo anterior sobre el alcance de la reorganización y la optimización del rendimiento en Jetpack Compose, presentamos principalmente cómo realizar algunas optimizaciones desde el nivel de código y mencionamos algunas optimizaciones notables. Este artículo es principalmente para comprender qué medios a nivel de herramienta se proporcionan oficialmente para ayudarnos a realizar Redactar depuración de rendimiento de depuración.

Modo de depuración regular

Este es el mismo que el método anterior, primero interrumpa el punto de interrupción y luego Adjunte el depurador, pero la información que se ve en el punto de interrupción es diferente a la anterior.

Un punto desagradable aquí es que la información del punto de interrupción que se ve en el panel cuando se activa el punto de interrupción es todo Java, por lo que en realidad no es fácil corresponder con el código Kotlin. en todos los aspectos, y naturalmente no está mal en las herramientas de depuración. Sin embargo, para Compose, dado que el compilador de Compose aplica mucha magia al código Composable, el código Java compilado puede ser bastante diferente del código fuente original de Kotlin, lo que puede causar que la vista real sea diferente del código.

Entonces, si intenta encontrar información útil relacionada con las funciones de Composable aquí, puede ser difícil.

El funcionario también se dio cuenta de esto, por lo que a partir de Android Studio Hedgehog | 2023.1.1 (nombre en clave: hedgehog), se realizó un pequeño cambio en el depurador del depurador: cuando se activa un punto de interrupción, el depurador enumerará los parámetros de la función Composable y su estado para que los desarrolladores puedan localizar más fácilmente los cambios que podrían causar la reorganización . Por ejemplo, cuando suspendes un Composable, el depurador puede decirte exactamente qué parámetros son " Changed" o permanecen " Unchanged", para que puedas confirmar de manera más eficiente qué causó la recomposición .

Puede ver que cada parámetro y el estado correspondiente se enumeran en Estado de recomposición La siguiente es la clasificación de estado de los parámetros:

• Estado sin cambios : este parámetro no ha cambiado
• Cambiado : el parámetro ahora tiene un valor diferente
• Incierto : Incierto, Compose todavía está evaluando si el parámetro ha cambiado
• Estático : Compose ha confirmado que este parámetro nunca cambiará
• Inestable : el parámetro es un tipo inestable

Inspector de diseño (Inspector de diseño)

Después de ejecutar la aplicación, seleccione Herramientas > Inspector de diseño

La interfaz se ve así por defecto:

Cuando se selecciona una etiqueta de componente, el árbol de componentes correspondiente se puede expandir en el lado izquierdo del panel y los valores de propiedad del componente actual se pueden ver en el lado derecho del panel.

NOTA: Si no ve el componente Redactar en el inspector de diseño, asegúrese de que no haya eliminado los archivos META-INF/androidx.compose.*.version del APK. Estos son necesarios para que funcione el inspector de diseño.

Marque la opción desplegable del botón del icono del ojo Mostrar bordes para eliminar los bordes adicionales

vista previa en 3D

Haga clic en el botón del icono debajo de la pequeña mano en la esquina inferior derecha para ingresar al modo de vista previa en 3D y deslice el mouse para ver los efectos de varias perspectivas

El efecto es genial y no muy útil, pero es útil para comprender la jerarquía del diseño. Haga clic en la barra de progreso Espaciado de capas arriba para cambiar el espaciado de diferentes capas.

diseño aislado

Si el diseño que se va a ver es complejo, puede seleccionar una parte que desee ver en el panel Árbol de componentes de la izquierda y mostrar solo esa parte. Específicamente, haga clic con el botón derecho en la etiqueta del componente y seleccione Mostrar solo subárbol o Mostrar solo padres .

Para restaurar la vista completa, haga clic con el botón derecho en la vista y seleccione Mostrar todo .

Actualizaciones en vivo

Para habilitar el Inspector de diseño en vivo, seleccione el botón Actualizaciones en vivo de la barra de herramientas del Inspector de diseño. (Requiere un dispositivo o emulador con API 29+)

El Live Layout Inspector contiene una jerarquía de diseño dinámica que actualiza el árbol de componentes y la visualización de diseño a medida que cambian las vistas en el dispositivo. (tarjeta de comparación de experiencia real)

Exportar e importar instantáneas de jerarquía de diseño

La función de instantánea captura los datos que normalmente vería al usar el inspector de diseño, incluida una representación 3D detallada del diseño, el árbol de componentes de la vista, el diseño compuesto o híbrido y las propiedades detalladas de cada componente en la interfaz.

Para capturar una instantánea, haga clic en el ícono Exportar instantánea en la barra de herramientas del Inspector de diseño, asegurándose de *.liguardar el archivo con la extensión. Al importar, haga clic en el icono Importar instantánea y también seleccione *.liel archivo con la extensión.

obtener el recuento de recombinación

Al depurar un diseño de Compose, es importante saber cuándo se recombinan los elementos componibles para saber si la interfaz de usuario se implementó correctamente. Por ejemplo, su aplicación puede estar haciendo un trabajo innecesario si hay demasiadas reorganizaciones. Por otro lado, si los componentes no se reestructuran de la forma esperada, puede provocar un comportamiento inesperado.

A medida que interactúa con la aplicación, el inspector de diseño muestra cuándo se reorganizan o se omiten los componibles. En Android Studio Flamingo, sus reorganizaciones se resaltan para ayudarlo a identificar dónde se reorganizan los componibles en la interfaz de usuario.

Primero, marque Mostrar recuentos de recomposición como se muestra en la figura a continuación

Luego, debe habilitar las actualizaciones en vivo como se mencionó anteriormente .

Luego, opere la interfaz Compose en el dispositivo y verá el conteo de reorganización y el conteo de omisión de recombinación:

En el árbol de componentes , se muestran dos columnas junto a la jerarquía de diseño. La primera columna muestra el número de combinaciones para cada nodo y la segunda columna muestra el número de saltos para cada nodo.

Si cree que un componente con tiempos de reorganización frecuentes es sospechoso, haga doble clic en el componente en el panel Árbol de componentes y accederá al código correspondiente para su análisis.

Nota: Para ver los recuentos de recomposición, asegúrese de que su aplicación utilice la API de destino 29+ o Compose 1.2.0 o superior.

Al seleccionar un nodo componible, se muestran las dimensiones y los parámetros del componible, a menos que sea una función en línea, en cuyo caso no se pueden mostrar los parámetros. También puede ver información similar en el panel de propiedades a la derecha cuando se selecciona un componible .

Restablecer recuentos puede ayudarlo a comprender las reorganizaciones o los saltos durante interacciones específicas con su aplicación. Si desea restablecer el conteo , haga clic en el botón Restablecer cerca de la parte superior del panel Árbol de componentes .

Evitar reinicio de actividad

El inspector de diseño requiere una de las siguientes configuraciones globales para funcionar correctamente. Si no especifica una configuración global, el inspector de diseño la establece automáticamente.

• adb shell settings put global debug_view_attributes_application_package <processname>Esta opción genera información adicional para verificar el proceso especificado.

• adb shell settings put global debug_view_attributes 1Esta opción genera información adicional que examina todos los procesos en el dispositivo.

Cambiar la configuración global puede hacer que la actividad se reinicie. Para evitar reiniciar la actividad, puede cambiar la configuración correspondiente en Android Studio o cambiar las opciones de desarrollador en la configuración del dispositivo .

Para habilitar la actualización automática en Android Studio, abra Ejecutar /Depurar configuraciones seleccionando Ejecutar > Editar configuraciones en el menú . Luego, vaya a la pestaña Varios y marque la casilla de verificación Conectar al Inspector de diseño sin reiniciar la actividad en Opciones del Inspector de diseño .

Rastreo de composición

System Trace es una herramienta de Android que guarda un registro de la actividad del dispositivo en un archivo de seguimiento que proporciona una imagen general de los procesos del sistema de una aplicación durante un período de tiempo determinado. A partir de Android Studio Flamingo , puede ver las funciones de redacción en el perfilador de seguimiento del sistema mediante la función de seguimiento de redacción . Compose Tracing le permite disfrutar de seguimientos del sistema con bajo nivel de ruido y obtener detalles a nivel de seguimiento de métodos sobre su composición, lo que le ayuda a comprender qué funciones de Compose se están recomponiendo realmente.

Para comenzar a usar el seguimiento de reorganización, debe actualizar al menos a las siguientes versiones:

• Android Studio Flamenco Canarias 5
• Componer interfaz de usuario: 1.3.0-beta01
• Componer compilador: 1.3.0
• El dispositivo o emulador en ejecución debe tener al menos API 30.

Además, debe agregar las siguientes dependencias de Compose Runtime Tracing :

implementation("androidx.compose.runtime:runtime-tracing:1.0.0-alpha03")

Android admite dos niveles de seguimiento: system tracingy method tracing.

• Debido a que system tracingsolo rastrea tracingregiones específicamente marcadas, tiene una sobrecarga baja y no tendrá mucho impacto en el rendimiento de su aplicación. system tracingExcelente para ver cuánto tiempo se ha estado ejecutando una parte particular de su código.

• method tracingRastree cada llamada de función en su aplicación. Esto es muy costoso, por lo que puede afectar en gran medida el rendimiento de su aplicación, pero le brinda una imagen completa de lo que está sucediendo, qué funciones se están llamando y con qué frecuencia se están llamando.

De forma predeterminada, system tracinglas funciones componibles individuales no están incluidas. Están method tracingdisponibles en . Pero con Compose Tracing activado, cuando realiza un seguimiento del sistema que incluye la recomposición, puede ver automáticamente las funciones componibles en el seguimiento del sistema. Aprovecha tanto system tracingla baja intrusividad como method tracingel nivel de detalle de .

seguimiento del sistema

Para obtener un seguimiento del sistema y ver el nuevo seguimiento de reorganización en acción, siga estos pasos:

1. Abra el Perfilador :

2. Haga clic en la línea de tiempo de la CPU :

3. Seleccione la CPU, seleccione Seguimiento del sistema y haga clic en el botón Grabar :

4. Vaya a la aplicación para operar la interfaz de la interfaz de usuario que desea rastrear y luego haga clic en el botón Detener:

5. Ahora debería poder ver componibles en el seguimiento de reorganización. Puede acercar y desplazarse por la traza usando el teclado (WASD) y el mouse; hacer doble clic en un elemento combinable en el diagrama lo llevará a su código fuente.

Cuando vea en AS, mire principalmente el eje principal debajo de Subprocesos.

6. También puede ver componibles y archivos y números de línea en el gráfico de llamas:

Dado que el panel en AS es pequeño, parece inconveniente. También podemos optar por hacer clic con el botón derecho en el resultado del registro de seguimiento para exportar el archivo y luego seleccionar Abrir archivo de seguimiento en https://ui.perfetto.dev/ para importar el archivo. para ver. (Este sitio web es relativamente espacioso y fácil de operar)

Después de importar, encontramos el nombre del paquete (applicationId) de nuestra aplicación y nos enfocamos en Choreographer#doFrameel cuadro a continuación

Si hay un Gap que está en blanco durante mucho tiempo debajo de una determinada barra de Composable, significa que alguien está bloqueando la llamada de reorganización de Composable.

En este caso, puede deberse a que hay objetos grandes o existe un método que consume mucho tiempo:

traceLos lugares sospechosos se pueden marcar con :

Después de volver a ejecutar el seguimiento del sistema, se descubrió que el largo espacio en blanco estaba lleno de marcas sospechosas, lo que verificó la conjetura:

La solución es usar rememberla envoltura para que solo consuma la primera vez y las reorganizaciones posteriores no se recreen cada vez:

Por supuesto, también puede usar las corrutinas de Kotlin para ejecutar partes del hilo principal que consumen mucho tiempo.

Sobrecarga de tamaño de APK

Si bien nuestro objetivo es minimizar la sobrecarga de esta función, el tamaño del APK de las aplicaciones de Compose aumenta debido a las cadenas de seguimiento del compilador de Compose incrustadas en el APK. Este aumento de tamaño puede ser relativamente pequeño si su aplicación no usa mucho Compose o es una aplicación Compose completa más grande. Estas cadenas de seguimiento no se ofuscaron, por lo que pueden aparecer en las herramientas de seguimiento, como se mostró anteriormente. A partir de la versión 1.3.0, el compilador Compose los inyecta en todas las aplicaciones.

Las cadenas de seguimiento se pueden eliminar en las compilaciones de producción agregando la siguiente regla proguard:

-assumenosideeffects public class androidx.compose.runtime.ComposerKt {
    
    

   boolean isTraceInProgress();

   void traceEventStart(int,int,int,java.lang.String);

   void traceEventStart(int,java.lang.String);

   void traceEventEnd();
}

Estas características pueden cambiar en el futuro, pero cualquier cambio se mencionará en las notas de la versión de Compose.

Tenga en cuenta que mantenerlos, si bien incurre en un costo de tamaño de APK, garantiza que el APK que se analiza es el mismo que está ejecutando el usuario de la aplicación.

---

La referencia anterior es de: sitio web oficial Introducción de seguimiento de composición y depuración Jetpack Compose

Se recomienda usar la última versión de Android Studio para probar el rastreo de composición. Actualmente estoy usando Flamingo para seguir la configuración oficial para intentar y fallar al final. No hay problema con la configuración, pero el nombre de la función Composable no puede encontrarse en el registro de rastreo generado por el rastreo del sistema. Sin embargo, la función oficial también se está probando y debería haber una versión estable en el futuro.