Tools for debugging your Compose UI are available in Android Studio.

## Layout Inspector

Layout Inspector lets you inspect a Compose layout inside a running app in an
emulator or physical device. You can use the Layout Inspector to check how often
a composable is recomposed or skipped, which can help identify issues with your
app. For example, some coding errors might force your UI to recompose
excessively, which can cause [poor performance](https://developer.android.com/develop/ui/compose/performance).
Some coding errors can prevent your UI from recomposing and, therefore,
prevent your UI changes from showing up on the screen. If you're new to
Layout inspector, check the [guidance](https://developer.android.com/studio/debug/layout-inspector) on how to
run it.
| **Note:** If you're not seeing Compose components in layout inspector, make sure you are not removing `META-INF/androidx.compose.*.version` files from the APK. These are required for layout inspector to work.

### Get recomposition counts

When debugging your Compose layouts, knowing when composables
[recompose](https://developer.android.com/develop/ui/compose/mental-model#recomposition) is important in
understanding whether your UI is implemented properly. For example, if it's
recomposing too many times, your app might be doing more work than is necessary.
On the other hand, components that don't recompose when you anticipate them to
can lead to unexpected behaviors.

The Layout Inspector shows you when discrete composables in your layout
hierarchy have either recomposed or skipped, as you interact with your app. In
Android Studio, your recompositions are highlighted to help you determine
where in the UI your composables are recomposing.

**Figure 1.** Recompositions are highlighted in Layout Inspector.

The highlighted portion shows a gradient overlay of the composable in the image
section of the Layout Inspector, and gradually disappears so that you can get an
idea of where in the UI the composable with the highest recompositions can be
found. If one composable is recomposing at a higher rate than another
composable, then the first composable receives a stronger gradient overlay
color. If you double-click a composable in the layout inspector, you're taken to
the corresponding code for analysis.
| **Note:** To view recomposition counts, make sure your app is using an API level of 29 or higher, and `Compose 1.2.0` or higher. Then, deploy your app as you normally would.
![](https://developer.android.com/static/develop/ui/compose/images/li-recomposition-counts.png) **Figure 2.**The composition and skip counter in Layout Inspector.

Open the **Layout Inspector** window and connect to your app process. In the
**Component Tree** , there are two columns that appear next to the layout
hierarchy. The first column shows the number of compositions for each node and
the second column displays the number of skips for each node. Selecting a
composable node shows the dimensions and parameters of the composable, unless
it's an inline function, in which case the parameters can't be shown. You can
also see similar information in the **Attributes** pane when you select a
composable from the **Component Tree** or the **Layout Display**.

Resetting the count can help you understand recompositions or skips during a
specific interaction with your app. If you want to reset the count, click
**Reset** near the top of the **Component Tree** pane.
| **Note:** If you don't see the new columns in the **Component Tree** pane, you can view them by selecting **Show Recomposition Counts** from the **View Options** menu ![Layout Inspector View Options
| icon](https://developer.android.com/static/studio/images/buttons/live-layout-inspector-view-options-icon.png) near the top of the **Component Tree** pane, as shown in the following image.

![Enable the composition and skip counter in Layout
Inspector](https://developer.android.com/static/develop/ui/compose/images/li-show-recomposition-counts.png)

**Figure 3**. Enable the composition and skip counter in Layout Inspector.

### Compose semantics

In Compose, [Semantics](https://developer.android.com/develop/ui/compose/semantics) describe your UI in an
alternative manner that is understandable for
[Accessibility](https://developer.android.com/develop/ui/compose/accessibility) services and for the
[Testing](https://developer.android.com/develop/ui/compose/testing) framework. You can use the Layout Inspector
to inspect semantic information in your Compose layouts.
![Semantic information displayed using the Layout Inspector.](https://developer.android.com/static/develop/ui/compose/images/layout_inspector_semantics_new.png) **Figure 4.** Semantic information displayed using the Layout Inspector.

When selecting a Compose node, use the **Attributes** pane to check whether it
declares semantic information directly, merges semantics from its children, or
both. To quickly identify which nodes include semantics, either declared or
merged, use select the **View options** drop-down in the **Component Tree** pane
and select **Highlight Semantics Layers**. This highlights only the nodes in the
tree that include semantics, and you can use your keyboard to quickly navigate
between them.

## Compose UI Check

To help you build more adaptive and accessible UIs in Jetpack Compose, Android
Studio provides a UI Check mode in Compose Preview. This feature is similar
to [Accessibility Scanner](https://developer.android.com/guide/topics/ui/accessibility/testing#accessibility-scanner)
for views.

When you activate Compose UI check mode on a Compose Preview, Android Studio
automatically audits your Compose UI and suggests improvements to make your UI
more accessible and adaptive. Android Studio checks that your UI works across
different screen sizes. In the **Problems** panel, the tool shows the issues
that it detects, such as text stretched on large screens or low color contrast.

To access this feature, click the UI Check icon on Compose Preview:
![](https://developer.android.com/static/studio/images/design/compose-ui-check-entry.png) **Figure 5.** Entry point to UI check mode.

UI check automatically previews your UI in different configurations and
highlights issues found in different configurations. In the **Problems** panel,
when you click an issue, you can see the details of the issue, suggested fixes,
and the renderings that highlight the area of the issue.
![](https://developer.android.com/static/studio/images/design/compose-ui-check.png) **Figure 6.** UI check mode in action.