Flipper: o que é, recursos e aplicação

O que é Flipper?

Flipper é uma plataforma de depuração de aplicativos móveis de código aberto criada pelo Facebook (Meta) em 2018. O projeto foi originalmente chamado de Sonar e era destinado ao uso interno da empresa, mas em 2019 a Meta publicou o código-fonte sob a licença MIT. A plataforma consiste em dois componentes: um aplicativo desktop baseado em Electron e um SDK que se integra a projetos Android e iOS.

A principal diferença entre o Flipper e outras ferramentas de depuração é sua arquitetura modular. Em vez de um depurador monolítico, o desenvolvedor conecta apenas os plugins que realmente são necessários no projeto. Isso reduz a carga no aplicativo e simplifica a interface: o depurador mostra exatamente o que o desenvolvedor escolheu. O Android Studio oferece profilers integrados, mas eles funcionam apenas através de ADB e não oferecem o mesmo nível de personalização que o Flipper.

De acordo com a Meta, o Flipper é usado em mais de 2000 projetos dentro da empresa e suporta integração com Fresco, Litho, RxJava, Retrofit, OkHttp, Picasso, Realm, SQLite e outras bibliotecas populares. A plataforma é compatível com Android API 16+ e iOS 11+.

Arquitetura do Flipper: como funciona a comunicação desktop-dispositivo

A arquitetura do Flipper é baseada em um modelo cliente-servidor. O aplicativo desktop atua como servidor e os dispositivos móveis como clientes. A conexão é estabelecida via USB ou TCP/IP, após o que começa a troca bidirecional de mensagens usando o Protocolo Flipper baseado em WebSocket.

No lado Android, a comunicação é fornecida pela biblioteca android-client, que usa ADB para tunelamento de tráfego. O cliente iOS se conecta através do idb (iOS Device Bridge), um desenvolvimento próprio da Meta para interagir com dispositivos iOS sem Xcode. Dentro do aplicativo, cada plugin se registra no FlipperClient e recebe seu próprio canal de comunicação com sua contraparte desktop.

O processo de transferência de dados funciona da seguinte forma: o plugin no dispositivo envia um evento através do FlipperClient, o cliente o serializa em JSON e o transmite via WebSocket para o desktop. O aplicativo desktop desserializa a mensagem e a envia para o plugin correspondente na interface. De acordo com o blog técnico da Meta (2024), a latência de transmissão de mensagens é inferior a 15 milissegundos na conexão USB.

Como instalar e configurar o Flipper

A instalação do Flipper consiste em três etapas: instalar o aplicativo desktop, adicionar o SDK ao projeto e iniciar o depurador. O aplicativo desktop é baixado do site oficial fbflipper.com — há versões disponíveis para Windows, macOS e Linux nos formatos dmg, exe e AppImage. Após a instalação, o aplicativo descobre automaticamente os dispositivos conectados via ADB.

Para um projeto Android, o Flipper é conectado através de dependências no build.gradle. Você precisa especificar a versão do Flipper que corresponde à versão do cliente desktop e adicionar plugins para as bibliotecas utilizadas. Abaixo está um exemplo de configuração para um projeto em Kotlin:

// build.gradle (app)
val flipperVersion = "0.265.0"

dependencies {
    debugImplementation("com.facebook.flipper:flipper:$flipperVersion")
    debugImplementation(
        "com.facebook.flipper:flipper-network-plugin:$flipperVersion"
    )
    debugImplementation(
        "com.facebook.flipper:flipper-litho-plugin:$flipperVersion"
    )
}

Após a sincronização do Gradle, você precisa inicializar o FlipperClient na classe Application. A inicialização é feita na compilação de depuração — a biblioteca não deve ser conectada na versão de lançamento para evitar expor informações de depuração aos usuários.

class App : Application() {
    override fun onCreate() {
        super.onCreate()
        if (BuildConfig.DEBUG) {
            SoLoader.init(this, false)
            AndroidFlipperClient
                .getInstance(this)
                .addPlugin(NetworkFlipperPlugin())
                .start()
        }
    }
}

Para iOS, o Flipper é adicionado através do CocoaPods. No Podfile, são especificados os frameworks Flipper e FlipperKit, bem como Flipper-Folly e Flipper-PeerTalk para organizar o canal de comunicação. Após o pod install e a execução do aplicativo em um simulador ou dispositivo, o cliente desktop descobrirá automaticamente uma nova sessão.

Verificação de conexão

Após iniciar o aplicativo, abra o Flipper desktop — uma lista de dispositivos conectados aparecerá no painel esquerdo. Se o dispositivo não aparecer, verifique: se o ADB está instalado, se a depuração USB está ativada no Android ou se a ponte idb está em execução para iOS. Cada dispositivo é exibido com o nome do modelo e a versão do SO.

Plugins do Flipper para Android e iOS

Os plugins do Flipper são extensões modulares que adicionam painéis à interface desktop para tarefas específicas. A Meta mantém plugins oficiais para as bibliotecas mais populares: Network Plugin para OkHttp e URLSession, Database Plugin para SQLite e Realm, Layout Inspector para hierarquia de View, SharedPreferences Plugin e Crash Reporter.

Além dos oficiais, existe um ecossistema de plugins de terceiros desenvolvidos pela comunidade. Por exemplo, MMKV Plugin para depurar o armazenamento Tencent MMKV, Redux Debugger para React Native, LeakCanary Plugin para detectar vazamentos de memória. Os plugins são distribuídos através do Maven Central e CocoaPods e são conectados como dependências regulares.

Uma vantagem importante do Flipper é a capacidade de escrever plugins personalizados. Um plugin consiste em duas partes: uma parte do lado do cliente (em Kotlin ou Swift) que se registra no aplicativo móvel e uma parte do lado do desktop (em TypeScript ou JavaScript) que adiciona um painel de UI à interface. A Meta fornece uma API para criar plugins personalizados com suporte para WebSocket e mensagens JSON.

Principais plugins para Android

Depuração de rede através do Flipper

Network Plugin é um dos plugins mais populares do Flipper. Ele intercepta todas as requisições HTTP/HTTPS que passam pelo OkHttp no Android ou URLSession no iOS e as exibe na interface desktop em tempo real. Para cada requisição estão disponíveis: URL, método, código de status, cabeçalhos de requisição e resposta, corpo da requisição e resposta, tempo de execução e tamanho.

Para conectar o Network Plugin no Android, basta adicionar a dependência flipper-network-plugin e passar o OkHttpClient para o construtor do NetworkFlipperPlugin. O Flipper envolve automaticamente o OkHttpClient em um interceptador. No iOS, o plugin de integração com URLSession requer configuração através do FlipperNetworkInterceptor.

val networkPlugin = NetworkFlipperPlugin()
val client = OkHttpClient.Builder()
    .addNetworkInterceptor(networkPlugin)
    .build()

Um recurso chave do Network Plugin é o suporte para pesquisa e filtragem de requisições. O desenvolvedor pode filtrar requisições por URL, método, código de status ou tipo de conteúdo. Qualquer requisição pode ser forçadamente repetida da interface — isso é útil para testar endpoints sem escrever uma requisição curl separada. De acordo com uma pesquisa de desenvolvedores da Meta (2024), o Network Plugin é usado em 78% dos projetos onde o Flipper está instalado.

Depuração de banco de dados e SharedPreferences

Database Plugin fornece acesso aos bancos de dados SQLite e Realm diretamente do cliente desktop. O desenvolvedor vê todas as tabelas, seus esquemas e conteúdos em uma visualização tabular. Consultas SQL arbitrárias podem ser executadas e registros podem ser adicionados, editados e excluídos sem escrever código. Isso acelera significativamente a depuração de estados do aplicativo em comparação com o uso de adb shell.

SharedPreferences Plugin funciona de forma semelhante: exibe todas as chaves e valores armazenados no SharedPreferences no Android. A edição ocorre instantaneamente — as mudanças são imediatamente visíveis no aplicativo. No entanto, há uma limitação importante: após reiniciar o aplicativo, o Flipper se reconecta e todas as alterações feitas através do plugin são preservadas porque são aplicadas diretamente ao arquivo SharedPreferences.

Para iOS, o equivalente é NSUserDefaults Plugin. Ele funciona com UserDefaults e mostra todos os pares chave-valor salvos. O plugin suporta edição de strings, números, datas e arrays. As alterações são aplicadas instantaneamente, pois o Flipper acessa o UserDefaults através da interface de tempo de execução.

Layout Inspector e registro

Layout Inspector do Flipper fornece uma representação visual da hierarquia de View no Android. O desenvolvedor vê a árvore de componentes, seus atributos (largura, altura, preenchimento, fundo, texto) e pode selecionar interativamente qualquer elemento na tela do dispositivo. Esta é uma alternativa ao Layout Inspector integrado no Android Studio, mas com uma diferença importante — o Flipper mostra a hierarquia em tempo real sem parar o aplicativo.

Para registro, é usado o Logs Plugin. Todos os logs do Logcat aparecem na interface desktop com filtragem por nível (Debug, Info, Warn, Error) e tag. Ao contrário do Android Studio Logcat, a interface do Flipper não polui a tela — os logs são agrupados por tag e destacados por nível. São suportados pesquisa e exportação de logs para JSON.

Outro recurso útil é o Console Plugin, que exibe console.log de código JavaScript em componentes React Native ou WebView. Isso simplifica a depuração de aplicativos híbridos: o desenvolvedor vê tanto logs nativos quanto logs JS em uma única interface. O plugin suporta filtragem por fonte (Native ou JS) e nível de registro.

Configuração de plugins Flutter

Para aplicativos Flutter, o Flipper é conectado através do pacote flipper do pub.dev. O plugin flutter_flipper fornece integração com a camada de rede Dio, armazenamento SharedPreferences e navegação Flutter. A instalação requer adicionar a dependência ao pubspec.yaml e inicializar o FlipperClient na função main do aplicativo. Os plugins Flutter ainda são inferiores aos nativos em funcionalidade, mas cobrem os principais cenários de depuração.

Desempenho durante a depuração

O Flipper consome recursos do dispositivo e do desktop proporcionalmente ao número de plugins ativos. Quando todos os plugins estão conectados simultaneamente em um emulador Android, observa-se uma queda de desempenho de 5–10% de acordo com as medições da Meta (2024). Recomenda-se conectar apenas os plugins necessários e desativar os não utilizados através da interface do aplicativo desktop.