🐞 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)