Cómo depurar tu diseño con el Inspector de diseño

El Inspector de diseño de Android Studio te permite inspeccionar y depurar el diseño dentro de una app en ejecución en un emulador o dispositivo físico. Puedes inspeccionar los atributos de cada componente, comparar el diseño de tu app con los modelos de diseño y mostrar una vista ampliada de tu app.

android layout

También puedes usar el Inspector de diseño para verificar con qué frecuencia se recompone o se omite un elemento componible, lo que puede ayudar a identificar problemas con tu app. Por ejemplo, algunos errores de codificación podrían hacer que la IU se recomponga en exceso, lo que puede causar un rendimiento deficiente. Algunos errores de codificación pueden evitar que se recomponga la IU y, por lo tanto, evitar que los cambios de la IU aparezcan en la pantalla.

Para obtener más información, consulta Cómo depurar tu IU de Compose.

Comenzar

Para iniciar el Inspector de diseño, ejecuta tu app, ve a la ventana Running Devices y haz clic en Toggle Layout Inspector . Si cambias entre varios dispositivos o proyectos, el Inspector de diseño se conectará automáticamente a los procesos depurables que se ejecutan en primer plano en el dispositivo conectado.

A continuación, te mostramos cómo realizar algunas tareas comunes:

• Para ver la jerarquía de vistas e inspeccionar los atributos de cada componente, usa las ventanas de herramientas Component Tree y Attributes. Es posible que el Inspector de diseño requiera reiniciar la actividad para acceder a los atributos.
• Para seleccionar componentes, primero habilita Toggle Deep Inspect y, luego, haz clic en los componentes. También puedes navegar por el código haciendo doble clic en los componentes.
• Para interactuar con la app, inhabilita Toggle Deep Inspect .
• Para inspeccionar los dispositivos físicos, habilita la duplicación de dispositivos.
• Para habilitar las actualizaciones en vivo a medida que actualizas la IU de tu app, verifica que Ediciones en vivo esté habilitado.

Cómo seleccionar o aislar un componente

Por lo general, un componente muestra un elemento que el usuario puede ver y con el que puede interactuar. Component Tree muestra la jerarquía de tu app en tiempo real con cada componente componible, lo que te ayuda a depurar el diseño, ya que puedes visualizar los elementos dentro de la app y los valores asociados a ellos.

Para seleccionar un componente, haz clic en él en Component Tree o en Layout Display. Todos los atributos de diseño del componente seleccionado aparecen en el panel Attributes.

Si tu diseño incluye componentes superpuestos, puedes ver todos los componentes de una región cuando haces clic con el botón secundario en el modo Deep Inspect . Para seleccionar un componente que no está al frente, haz clic en él en Component Tree.

Para trabajar con diseños complejos, puedes aislar componentes individuales de manera que solo un subconjunto del diseño se muestre en Component Tree y se renderice en Layout Display. Para aislar un componente, haz clic con el botón derecho en el componente, en Component Tree, y selecciona Show Only Subtree o Show Only Parents. Para volver a la vista completa, haz clic con el botón derecho en el componente y selecciona Show All.

Cómo ocultar bordes de diseño y ver etiquetas

Para ocultar el cuadro delimitador o las etiquetas de los componentes de un elemento de diseño, haz clic en View Options en la parte superior de Layout Display y activa o desactiva Show Borders o Show View Label.

Cómo capturar instantáneas de jerarquía de diseño

El Inspector de diseño te permite guardar instantáneas de la jerarquía de diseño de tu app en ejecución para que puedas compartirlas con otras personas o consultarlas más adelante.

Las instantáneas capturan los datos que normalmente verías cuando usas el Inspector de diseño, lo que incluye una renderización detallada del diseño; el árbol de componentes de tu diseño de Compose, View o híbrido; y atributos detallados de cada componente de la IU. Para guardar una instantánea, haz clic en Snapshot Export/Import y, luego, en Export Snapshot.

Para cargar una instantánea del Inspector de diseño guardada anteriormente, haz clic en Import Snapshot.

Cómo comparar el diseño de la app con una superposición de imágenes de referencia

Para comparar el diseño de tu app con una imagen de referencia, como un modelo de IU, puedes cargar una superposición de imágenes de mapa de bits en el Inspector de diseño.

• Para cargar una superposición, selecciona la opción Load Overlay en la barra de herramientas del Inspector de diseño. Se escalará la superposición para que se adapte al diseño.
• Para ajustar la transparencia de la superposición, usa el control deslizante Overlay Alpha.
• Para quitar la superposición, haz clic en Clear Overlay.

Inspector de diseño independiente

Para obtener un rendimiento óptimo, te recomendamos que uses el Inspector de diseño en su modo integrado predeterminado. Si quieres quitar la incorporación del Inspector de diseño, ve a File (Android Studio en macOS) > Settings > Tools > Layout Inspector y desmarca la casilla de verificación Enable embedded Layout Inspector.

En el modo independiente, habilita las actualizaciones en vivo haciendo clic en la opción Live Updates en la barra de herramientas del Inspector de diseño.

Recursos adicionales

Mira contenido

• Cómo depurar tu diseño con el Inspector de diseño (vistas)