🐞 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 {
    implementation("io.github.theapache64:rebugger:1.0.0-rc02")
}

Groovy

repositories {
    ...
    mavenCentral() 
}

dependencies {
    implementation 'io.github.theapache64:rebugger:1.0.0-rc02'
}

2. Add `Rebugger` call

Call Rebugger with 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
    ),
)

Best android open-source packages and libraries.

Rebugger