Jetpack ComposeDebuggingto fix performance problemsYahoo Japan Corpora+onAndroid App Developer, Yu Tanigawa© Yahoo Japan
View Slide
About Me• I’m an Android app engineer at Yahoo! JAPANsince 2021.• I’m developing PayPay Flea Market and Yahoo!AucCon app.• I have been developing personal Android appsince I was a student.© Yahoo Japan
AgendaIn this session, I will recap about “Debugging Jetpack Compose” lecture of GoogleI/O 2023.h"ps://io.google/2023/program/a3ed5302-d787-41bd-8623-54193d36caf0/intl/ja/© Yahoo Japan
Agenda• RecomposiCon State in Debugger• Layout Inspector• DemonstraCon• Summary© Yahoo Japan
01. Recomposi-on State in Debugger© Yahoo Japan
Recomposi3on State in Debugger• Android Studio Hedgehog or later can check the “RecomposiCon State” withinthe standard debugger• By checking the “RecomposiCon State”, it is possible to easily check theparameters that triggered the recomposiCon© Yahoo Japan
Recomposi3on State in Debugger• Android Studio (Hedgehog) からデバッグツールでComposableの検証がし易くなった• 「Recompositon State」というパラメータをデバッガで⾒れるようになった© Yahoo Japan
Recomposi3on State in Debugger• Android Studio Hedgehog or later can check the “RecomposiCon State” withinthe standard debugger• By checking the “RecomposiCon State”, it is possible to easily check theparameters that triggered the recomposiCon“isShowLikeBu-on”has Changed© Yahoo Japan
Recomposi3on State in Debugger• Unchanged• Changed• Uncertain• Sta.c• Unstable© Yahoo Japan
02. Layout Inspector© Yahoo Japan
Layout InspectorPros• Debug the scrolling of lists and ViewPager without stopping the app• It is possible to intuiCvely understand the recomposiCon count only within thistool.• Visual confirmaCon of the recomposed areaCons• Unable to idenCfy the parameter that triggered the recomposiCon© Yahoo Japan
Layout Inspector© Yahoo Japan
Layout InspectorRecompose count:Indicates that the parameters havebeen changed and redrawnSkipped count:Count of skipped composiCons,assuming no difference inparameters© Yahoo Japan
Layout Inspector• Recomposed Composable is highlighted in blue to visually confirm the extent ofthe redraw.© Yahoo Japan
03. Demonstra-on© Yahoo Japan
Demonstra3onIn this demonstraCon, I will add items to head of items list.© Yahoo Japan
Demonstra3ona© Yahoo Japan
Demonstra3onPass ITEM ID as the key in LazyVerCcalGrid items.© Yahoo Japan
Demonstra3onPass ITEM ID as the key in LazyVerCcalGrid items.items(items = items,key = { it.id }) { item ->Item(item = item, isShowLikeBubon = isShowLikeBubon, onClickLike = onClickLike)}© Yahoo Japan
Demonstra3on© Yahoo Japan
04. Summary© Yahoo Japan
Summary• Android Studio Hedgehog or later can check the status of recomposiCons withinthe standard debugger• Layout Inspector provides a method to check recomposiCon and skipped countwithout stopping the applicaCon.• Layout Inspector allows you to visually and clearly see the recomposed area whendata has changed.© Yahoo Japan
© Yahoo JapanThank you for listening!