调试技巧 (Debugging)

Compose 的声明式特性使得传统的“打断点”调试变得有些困难（因为你不知道重组何时发生）。以下是一些实用的调试技巧。

1. Layout Inspector

Android Studio 内置工具。

• 实时更新: 可以看到 UI 树的实时变化。
• 重组计数: 在 Component Tree 中，每个节点右侧会显示重组次数（Recomposition Count）和跳过次数（Skipped Count）。
  • 如果重组次数飙升，说明存在性能问题。
  • 如果跳过次数为 0，说明该组件不是可跳过的（Unstable）。

2. LogCompositions

这是一个常用的调试 Helper 函数，用于打印日志来观察重组。

class Ref(var value: Int)

@Composable
inline fun LogCompositions(tag: String, msg: String) {
    if (BuildConfig.DEBUG) {
        val ref = remember { Ref(0) }
        SideEffect { ref.value++ }
        Log.d(tag, "Compositions: $msg ${ref.value}")
    }
}

// 使用
@Composable
fun MyScreen() {
    LogCompositions("MyScreen", "Recomposing")
    // ...
}

3. recomposeHighlighter

这是一个“视觉调试”修饰符。当组件重组时，给它画一个闪烁的边框。

fun Modifier.recomposeHighlighter(): Modifier = this.then(if (BuildConfig.DEBUG) {
    composed {
        val numCompositions = remember { mutableIntStateOf(0) }
        val fadingAnimation = remember { Animatable(0f) }
        
        SideEffect {
            numCompositions.intValue += 1
            launch { fadingAnimation.snapTo(1f); fadingAnimation.animateTo(0f) }
        }

        this.drawWithContent {
            drawContent()
            drawRect(Color.Red.copy(alpha = fadingAnimation.value))
        }
    }
} else Modifier)

4. 调试 Modifier 链

有时你会困惑为什么样式不对。可以在 Modifier 链中插入调试点。

Modifier
    .padding(10.dp)
    .let { 
        // 在这里打断点查看 it (Modifier) 的状态
        it 
    }
    .background(Color.Red)