๐ Rebugger
Rebugger : A recomposition debugger
Being a โcompose devโ our enemy number one is unnecessary recompositions
Rebugger is a simple compose utility function that can track the change in the given arguments. Itโll print the reason for recomposition in your Logcat window.
โจ๏ธ Demo
Usage
1. Add dependencies
Kotlin Script
repositories {
...
maven { url = uri("https://jitpack.io") } // Add jitpack
}
dependencies {
implementation("com.github.theapache64:rebugger:<latest.version>")
}Groovy
repositories {
...
maven { url 'https://jitpack.io' } // Add jitpack
}
dependencies {
implementation 'com.github.theapache64:rebugger:<latest.version>'
}2. Add Rebugger call
Call
Rebuggerwith the states or args you want to track
@Composable
fun VehicleUi(
car: Car,
bike: Bike,
) {
var human by remember { mutableStateOf(Human("John")) }
// Call Rebugger and pass the states you want to track.
// It could be a function arg or a state
Rebugger(
trackMap = mapOf(
"car" to car,
"bike" to bike,
"human" to human
),
)
//...3. See LogCat
Search for
Rebugger
๐ฅ Sample Outputs
- When Rebugger hooked into your composable, itโll print something like this
- When VehicleUi recomposes due to car instance change
- When VehicleUi recomposes due to both car and bike instance change
- When VehicleUi recomposes due to human instance change (State within the composable)
๐จ Customization
You can use the RebuggerConfig.init function to override default properties of Rebugger.
class App : Application() {
// ...
override fun onCreate() {
super.onCreate()
// ...
RebuggerConfig.init(
tag = "MyAppRebugger", // changing default tag
logger = { tag, message -> Timber.i(tag, message) } // use Timber for logging
)
}
}๐ Plugin
You can use the Rebugger IntelliJ plugin to generate the Rebugger function call.
Screen.Recording.2023-05-01.at.10.42.57.PM.mov
๐ Limitation
Auto Name Picking
When Rebugger is placed deep inside the composable, it may not be able to pick the correct composable name. For example, if I place the Rebugger somewhere inside the Button lambda like this
@Composable
fun VehicleUi(
car: Car,
bike: Bike,
) {
// ...
Column {
// ...
Button(
onClick = {
//...
}
) {
// ๐ Inside Button's content lambda
Rebugger(
trackMap = mapOf(
"car" to car,
"bike" to bike,
"human" to human
),
)
// ...
}
}
}Itโll print something like this
The Fix
To fix this, you can pass composableName argument to override the automatic name picking behaviour
Rebugger(
composableName = "Button's body",
trackMap = mapOf(
"car" to car,
"bike" to bike,
"human" to human
),
)๐ TODO
โ IDE plugin : To generateRebuggercall (vote here)