Flipper: qué es, funciones y aplicación

¿Qué es Flipper?

Flipper es una plataforma de depuración de aplicaciones móviles de código abierto creada por Facebook (Meta) en 2018. El proyecto se llamaba originalmente Sonar y estaba destinado a uso interno de la empresa, pero en 2019 Meta publicó el código fuente bajo la licencia MIT. La plataforma consta de dos componentes: una aplicación de escritorio basada en Electron y un SDK que se integra en proyectos de Android e iOS.

La principal diferencia entre Flipper y otras herramientas de depuración es su arquitectura modular. En lugar de un depurador monolítico, el desarrollador conecta solo los complementos que realmente se necesitan en el proyecto. Esto reduce la carga en la aplicación y simplifica la interfaz: el depurador muestra exactamente lo que el desarrollador ha elegido. Android Studio proporciona perfiles integrados, pero solo funcionan a través de ADB y no ofrecen el mismo nivel de personalización que Flipper.

Según Meta, Flipper se utiliza en más de 2000 proyectos dentro de la empresa y es compatible con Fresco, Litho, RxJava, Retrofit, OkHttp, Picasso, Realm, SQLite y otras bibliotecas populares. La plataforma es compatible con Android API 16+ e iOS 11+.

Arquitectura de Flipper: cómo funciona la comunicación escritorio-dispositivo

La arquitectura de Flipper se basa en un modelo cliente-servidor. La aplicación de escritorio actúa como servidor y los dispositivos móviles como clientes. La conexión se establece a través de USB o TCP/IP, después de lo cual comienza el intercambio bidireccional de mensajes utilizando el Protocolo Flipper basado en WebSocket.

En el lado de Android, la comunicación la proporciona la biblioteca android-client, que utiliza ADB para la tunelización del tráfico. El cliente de iOS se conecta a través de idb (iOS Device Bridge), un desarrollo propio de Meta para interactuar con dispositivos iOS sin Xcode. Dentro de la aplicación, cada complemento se registra en FlipperClient y recibe su propio canal de comunicación con su contraparte de escritorio.

El proceso de transferencia de datos funciona de la siguiente manera: el complemento en el dispositivo envía un evento a través de FlipperClient, el cliente lo serializa en JSON y lo transmite a través de WebSocket al escritorio. La aplicación de escritorio deserializa el mensaje y lo envía al complemento correspondiente en la interfaz. Según el blog técnico de Meta (2024), la latencia de transmisión de mensajes es inferior a 15 milisegundos con conexión USB.

Cómo instalar y configurar Flipper

La instalación de Flipper consta de tres pasos: instalar la aplicación de escritorio, agregar el SDK al proyecto e iniciar el depurador. La aplicación de escritorio se descarga del sitio web oficial fbflipper.com: hay versiones disponibles para Windows, macOS y Linux en formatos dmg, exe y AppImage. Después de la instalación, la aplicación descubre automáticamente los dispositivos conectados a través de ADB.

Para un proyecto de Android, Flipper se conecta a través de dependencias en build.gradle. Debe especificar la versión de Flipper que coincida con la versión del cliente de escritorio y agregar complementos para las bibliotecas utilizadas. A continuación se muestra un ejemplo de configuración para un proyecto en 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"
    )
}

Después de la sincronización de Gradle, debe inicializar FlipperClient en la clase Application. La inicialización se realiza en la compilación de depuración; la biblioteca no debe conectarse en la versión de lanzamiento para evitar exponer información de depuración a los usuarios.

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

Para iOS, Flipper se agrega a través de CocoaPods. En Podfile se especifican los frameworks Flipper y FlipperKit, así como Flipper-Folly y Flipper-PeerTalk para organizar el canal de comunicación. Después de pod install y ejecutar la aplicación en un simulador o dispositivo, el cliente de escritorio descubrirá automáticamente una nueva sesión.

Verificación de conexión

Después de iniciar la aplicación, abra Flipper de escritorio: aparecerá una lista de dispositivos conectados en el panel izquierdo. Si el dispositivo no aparece, verifique: si ADB está instalado, si la depuración USB está habilitada en Android o si el puente idb se está ejecutando para iOS. Cada dispositivo se muestra con el nombre del modelo y la versión del SO.

Complementos de Flipper para Android e iOS

Los complementos de Flipper son extensiones modulares que agregan paneles a la interfaz de escritorio para tareas específicas. Meta mantiene complementos oficiales para las bibliotecas más populares: Network Plugin para OkHttp y URLSession, Database Plugin para SQLite y Realm, Layout Inspector para la jerarquía de vistas, SharedPreferences Plugin y Crash Reporter.

Además de los oficiales, existe un ecosistema de complementos de terceros desarrollados por la comunidad. Por ejemplo, MMKV Plugin para depurar el almacenamiento de Tencent MMKV, Redux Debugger para React Native, LeakCanary Plugin para detectar fugas de memoria. Los complementos se distribuyen a través de Maven Central y CocoaPods y se conectan como dependencias regulares.

Una ventaja importante de Flipper es la posibilidad de escribir complementos personalizados. Un complemento consta de dos partes: una parte del lado del cliente (en Kotlin o Swift) que se registra en la aplicación móvil, y una parte del lado del escritorio (en TypeScript o JavaScript) que agrega un panel de UI a la interfaz. Meta proporciona una API para crear complementos personalizados con soporte para WebSocket y mensajes JSON.

Complementos principales para Android

Depuración de red a través de Flipper

Network Plugin es uno de los complementos más populares de Flipper. Intercepta todas las solicitudes HTTP/HTTPS que pasan por OkHttp en Android o URLSession en iOS, y las muestra en la interfaz de escritorio en tiempo real. Para cada solicitud están disponibles: URL, método, código de estado, encabezados de solicitud y respuesta, cuerpo de solicitud y respuesta, tiempo de ejecución y tamaño.

Para conectar Network Plugin en Android, simplemente agregue la dependencia flipper-network-plugin y pase OkHttpClient al constructor de NetworkFlipperPlugin. Flipper envuelve automáticamente OkHttpClient en un interceptor. En iOS, el complemento de integración con URLSession requiere configuración a través de FlipperNetworkInterceptor.

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

Una característica clave de Network Plugin es el soporte para búsqueda y filtrado de solicitudes. El desarrollador puede filtrar solicitudes por URL, método, código de estado o tipo de contenido. Se puede reintentar forzosamente cualquier solicitud desde la interfaz, lo que es útil para probar endpoints sin escribir una solicitud curl separada. Según una encuesta de desarrolladores de Meta (2024), Network Plugin se utiliza en el 78% de los proyectos donde está instalado Flipper.

Depuración de bases de datos y SharedPreferences

Database Plugin proporciona acceso a bases de datos SQLite y Realm directamente desde el cliente de escritorio. El desarrollador ve todas las tablas, su esquema y contenido en una vista tabular. Se pueden ejecutar consultas SQL arbitrarias, y se pueden agregar, editar y eliminar registros sin escribir código. Esto acelera significativamente la depuración de estados de la aplicación en comparación con el uso de adb shell.

SharedPreferences Plugin funciona de manera similar: muestra todas las claves y valores almacenados en SharedPreferences en Android. La edición ocurre instantáneamente: los cambios son visibles inmediatamente en la aplicación. Sin embargo, hay una limitación importante: después de reiniciar la aplicación, Flipper se reconecta y todos los cambios realizados a través del complemento se conservan porque se aplican directamente al archivo SharedPreferences.

Para iOS, el equivalente es NSUserDefaults Plugin. Funciona con UserDefaults y muestra todos los pares clave-valor guardados. El complemento admite la edición de cadenas, números, fechas y arreglos. Los cambios se aplican instantáneamente, ya que Flipper accede a UserDefaults a través de la interfaz de tiempo de ejecución.

Layout Inspector y registro

Layout Inspector de Flipper proporciona una representación visual de la jerarquía de vistas en Android. El desarrollador ve el árbol de componentes, sus atributos (ancho, alto, relleno, fondo, texto) y puede seleccionar interactivamente cualquier elemento en la pantalla del dispositivo. Esta es una alternativa al Layout Inspector integrado en Android Studio, pero con una diferencia importante: Flipper muestra la jerarquía en tiempo real sin detener la aplicación.

Para el registro se utiliza el Logs Plugin. Todos los registros de Logcat aparecen en la interfaz de escritorio con filtrado por nivel (Debug, Info, Warn, Error) y etiqueta. A diferencia de Android Studio Logcat, la interfaz de Flipper no satura la pantalla: los registros se agrupan por etiqueta y se resaltan por nivel. Se admiten la búsqueda y exportación de registros a JSON.

Otra característica útil es Console Plugin, que muestra console.log del código JavaScript en componentes React Native o WebView. Esto simplifica la depuración de aplicaciones híbridas: el desarrollador ve tanto los registros nativos como los registros JS en una sola interfaz. El complemento admite filtrado por fuente (Native o JS) y nivel de registro.

Configuración de complementos de Flutter

Para aplicaciones Flutter, Flipper se conecta a través del paquete flipper de pub.dev. El complemento flutter_flipper proporciona integración con la capa de red Dio, el almacenamiento SharedPreferences y la navegación de Flutter. La instalación requiere agregar la dependencia en pubspec.yaml e inicializar FlipperClient en la función main de la aplicación. Los complementos de Flutter aún son inferiores a los nativos en funcionalidad, pero cubren los principales escenarios de depuración.

Rendimiento durante la depuración

Flipper consume recursos del dispositivo y del escritorio proporcionalmente a la cantidad de complementos activos. Cuando todos los complementos están conectados simultáneamente en un emulador de Android, se observa una caída de rendimiento del 5–10% según las mediciones de Meta (2024). Se recomienda conectar solo los complementos necesarios y desactivar los no utilizados a través de la interfaz de la aplicación de escritorio.