rebugger
A simple Compose Multiplatform library designed to print the reason for recomposition in your console/Logcat window."
View on GitHubDocumentation
🐞 Rebugger
Rebugger : A recomposition debugger
Being a “compose dev” our enemy number one is unnecessary recompositions 🤕. Often times we use tools like recompositionHighligher, LogComposition, and layout inspector to count the recomposition, but there’s no direct way to understand “why” the recomposition has happened.
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 {
...
mavenCentral()
}
dependencies {
// [latest version - i promise!]
implementation("io.github.theapache64:rebugger:1.0.1")
}
Groovy
repositories {
...
mavenCentral()
}
dependencies {
// [latest version - i promise!]
implementation 'io.github.theapache64:rebugger:1.0.1'
}
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.
https://user-images.githubusercontent.com/9678279/235495156-445e7ced-30fa-41dd-9b37-84b80502187f.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
),
)
Similar Libraries
Fragula
🧛 Fragula is a swipe-to-dismiss extension for navigation component library for Android
Showkase
🔦 Showkase is an annotation-processor based Android library that helps you organize, discover and search Jetpack Compose UI elements
Accompanist
A collection of extension libraries for Jetpack Compose
Compose Backstack
Simple composable for rendering transitions between back stacks.
Browse by Category
