androidintellij-ideaandroid-jetpack-compose

Is there a way to see all the elements being drawn in Jetpack Compose


Using Jetpack Compose, I am having trouble seeing which composables and elements are causing the rendering of certain items on the screen. The browser development tools let you see what is being generated for HTML, and allows you to hover over and inspect each item so that you can tell exactly what rendered data is coming from where. I am wondering if there is something similar to that for Android Jetpack Compose in IntelliJ.


Solution

  • If you use Android Studio as your IDE you can use the built-in Layout Inspector for a graphical and tabluar representation of the UI elements that are being recomposed.

    There are also third-party tools that can provide the reason why recompositions take place, f.e. Rebugger.

    To better diagnose recompositions you can also analyze the stability of your composable's parameters with a dedicated Compose compiler report.