Compose 调试技巧：Layout Inspector 与性能分析

调试是开发过程中不可或缺的一环。Compose 提供了丰富的调试工具，从 Layout Inspector 到重组追踪，帮助你快速定位和解决问题。

一、Layout Inspector

Layout Inspector 是 Android Studio 内置的布局检查工具，支持 Compose 实时检查。

1. 运行应用到设备或模拟器
2. 菜单：View → Tool Windows → Layout Inspector
3. 选择正在运行的进程

可以查看：修饰符链、参数值、尺寸位置、重组次数。

二、重组追踪

@Composable
fun TrackedComposable(data: String) {
    SideEffect {
        Log.d("Recomposition", "Recomposed with: $data")
    }
    
    Text(text = data)
}

重组计数器

@Composable
fun RecompositionCounter(name: String) {
    val count = remember { mutableIntStateOf(0) }
    SideEffect { count.intValue++ }
    
    if (BuildConfig.DEBUG) {
        Text("$name: ${count.intValue}", color = Color.Red)
    }
}

三、编译器报告

// build.gradle.kts
composeCompiler {
    reportsDestination = layout.buildDirectory.dir("compose_reports")
    metricsDestination = layout.buildDirectory.dir("compose_metrics")
}

生成类稳定性信息和 Composable 函数详情。

四、常见问题调试

无限重组

// ❌ 错误：在组合中修改状态
@Composable
fun InfiniteRecomposition() {
    var count by remember { mutableIntStateOf(0) }
    count++ // 触发无限重组！
}

// ✅ 正确：在事件中修改状态
@Composable
fun CorrectRecomposition() {
    var count by remember { mutableIntStateOf(0) }
    Button(onClick = { count++ }) {
        Text("Count: $count")
    }
}

五、调试工具函数

fun Modifier.debugBorder(color: Color = Color.Red) = 
    if (BuildConfig.DEBUG) {
        this.border(1.dp, color)
    } else {
        this
    }

六、最佳实践

• ✅ 使用 Layout Inspector 检查层级
• ✅ 开启重组高亮定位问题
• ✅ 使用编译器报告分析稳定性
• ✅ 使用 CPU/Memory Profiler
• ✅ 使用 remember 避免重复创建对象
• ✅ 调试代码仅在 DEBUG 模式启用

总结

• Layout Inspector：检查 Compose 层级
• 重组追踪：定位不必要的重组
• 编译器报告：分析稳定性
• Profiler：性能和内存分析