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 las simulaciones de diseño y mostrar una vista ampliada de tu app.
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 se muestren 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.
Para realizar algunas tareas comunes, sigue estos pasos:
- 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. Como alternativa, haz doble clic en los componentes para navegar al código. - 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
Un componente suele mostrar 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 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 derecho 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 procese 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 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 Compose, de la vista o de un diseñ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 incorporado predeterminado. Si deseas quitar el 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.