Flipper: what it is, features and application

What is Flipper?

Flipper is an open-source mobile application debugging platform created by Facebook (Meta) in 2018. The project was originally called Sonar and was intended for internal company use, but in 2019 Meta released the source code under the MIT license. The platform consists of two components: a desktop application built on Electron and an SDK that integrates into Android and iOS projects.

The main difference between Flipper and other debugging tools is its modular architecture. Instead of a monolithic debugger, the developer connects only the plugins that are actually needed in the project. This reduces the load on the application and simplifies the interface: the debugger shows exactly what the developer has chosen. Android Studio provides built-in profilers, but they only work through ADB and do not offer the same level of customization as Flipper.

According to Meta, Flipper is used in more than 2000 projects within the company and supports integration with Fresco, Litho, RxJava, Retrofit, OkHttp, Picasso, Realm, SQLite, and other popular libraries. The platform is compatible with Android API 16+ and iOS 11+.

Flipper Architecture: how desktop-device communication works

Flipper Architecture is built on a client-server model. The desktop application acts as a server, and mobile devices act as clients. The connection is established via USB or TCP/IP, after which bidirectional message exchange begins using the Flipper Protocol based on WebSocket.

On the Android side, communication is provided by the android-client library, which uses ADB for traffic tunneling. The iOS client connects through idb (iOS Device Bridge) — Meta’s own development for interacting with iOS devices without Xcode. Inside the application, each plugin registers with the FlipperClient and receives its own communication channel with the desktop counterpart.

The data transfer process works as follows: the plugin on the device sends an event through FlipperClient, the client serializes it into JSON and transmits it via WebSocket to the desktop. The desktop application deserializes the message and sends it to the corresponding plugin in the interface. According to Meta’s technical blog (2024), message transmission latency is less than 15 milliseconds over USB connection.

How to install and configure Flipper

Installing Flipper consists of three steps: installing the desktop application, adding the SDK to the project, and launching the debugger. The desktop application is downloaded from the official website fbflipper.com — builds are available for Windows, macOS, and Linux in dmg, exe, and AppImage formats. After installation, the application automatically discovers connected devices via ADB.

For an Android project, Flipper is connected through dependencies in build.gradle. You need to specify the Flipper version that matches the desktop client version and add plugins for the libraries being used. Below is an example configuration for a Kotlin project:

// 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"
    )
}

After Gradle sync, you need to initialize FlipperClient in the Application class. Initialization is done in the debug build — the library should not be connected in the release version to avoid exposing debugging information to users.

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

For iOS, Flipper is added through CocoaPods. The Podfile specifies the Flipper and FlipperKit frameworks, as well as Flipper-Folly and Flipper-PeerTalk for organizing the communication channel. After pod install and running the application on a simulator or device, the desktop client will automatically discover a new session.

Connection Check

After launching the application, open the desktop Flipper — a list of connected devices will appear in the left panel. If the device is not displayed, check: whether ADB is installed, whether USB debugging is enabled on Android, or whether the idb bridge is running for iOS. Each device is displayed with the model name and OS version.

Flipper Plugins for Android and iOS

Flipper Plugins are modular extensions that add panels to the desktop interface for specific tasks. Meta maintains official plugins for the most popular libraries: Network Plugin for OkHttp and URLSession, Database Plugin for SQLite and Realm, Layout Inspector for View hierarchy, SharedPreferences Plugin, and Crash Reporter.

In addition to official ones, there is an ecosystem of third-party plugins developed by the community. For example, MMKV Plugin for debugging Tencent MMKV storage, Redux Debugger for React Native, LeakCanary Plugin for detecting memory leaks. Plugins are distributed through Maven Central and CocoaPods and are connected as regular dependencies.

An important advantage of Flipper is the ability to write custom plugins. A plugin consists of two parts: a client-side part (in Kotlin or Swift) that registers in the mobile application, and a desktop-side part (in TypeScript or JavaScript) that adds a UI panel to the interface. Meta provides an API for creating custom plugins with support for WebSocket and JSON messages.

Main Plugins for Android

Network Debugging via Flipper

Network Plugin is one of the most popular Flipper plugins. It intercepts all HTTP/HTTPS requests that go through OkHttp on Android or URLSession on iOS, and displays them in the desktop interface in real time. For each request, the following are available: URL, method, status code, request and response headers, request and response body, execution time, and size.

To connect Network Plugin on Android, simply add the flipper-network-plugin dependency and pass the OkHttpClient to the NetworkFlipperPlugin constructor. Flipper automatically wraps the OkHttpClient in an interceptor. On iOS, the URLSession integration plugin requires configuration through FlipperNetworkInterceptor.

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

A key feature of Network Plugin is support for searching and filtering requests. The developer can filter requests by URL, method, status code, or content type. Any request can be forcibly retried from the interface — this is useful for testing endpoints without writing a separate curl request. According to a Meta developer survey (2024), Network Plugin is used in 78% of projects where Flipper is installed.

Database and SharedPreferences Debugging

Database Plugin provides access to SQLite and Realm databases directly from the desktop client. The developer sees all tables, their schema, and contents in a tabular view. Arbitrary SQL queries can be executed, and records can be added, edited, and deleted without writing code. This significantly speeds up debugging application states compared to using adb shell.

SharedPreferences Plugin works similarly: it displays all keys and values stored in SharedPreferences on Android. Editing happens instantly — changes are immediately visible in the application. However, there is an important limitation: after restarting the application, Flipper reconnects, and all changes made through the plugin are preserved because they are applied directly to the SharedPreferences file.

For iOS, the equivalent is NSUserDefaults Plugin. It works with UserDefaults and shows all saved key-value pairs. The plugin supports editing strings, numbers, dates, and arrays. Changes are applied instantly, as Flipper accesses UserDefaults through the runtime interface.

Layout Inspector and Logging

Flipper Layout Inspector provides a visual representation of the View hierarchy on Android. The developer sees the component tree, their attributes (width, height, padding, background, text) and can interactively select any element on the device screen. This is an alternative to the built-in Layout Inspector in Android Studio, but with an important difference — Flipper shows the hierarchy in real time without stopping the application.

For logging, the Logs Plugin is used. All logs from Logcat appear in the desktop interface with filtering by level (Debug, Info, Warn, Error) and tag. Unlike Android Studio Logcat, the Flipper interface does not clutter the screen — logs are grouped by tag and highlighted by level. Search and export of logs to JSON are supported.

Another useful feature is Console Plugin, which displays console.log from JavaScript code in React Native or WebView components. This simplifies debugging hybrid applications: the developer sees both native logs and JS logs in one interface. The plugin supports filtering by source (Native or JS) and logging level.

Configuring Flutter Plugins

For Flutter applications, Flipper is connected through the flipper package from pub.dev. The flutter_flipper plugin provides integration with the Dio networking layer, SharedPreferences storage, and Flutter navigation. Installation requires adding the dependency to pubspec.yaml and initializing FlipperClient in the application’s main function. Flutter plugins are still inferior to native ones in terms of functionality, but they cover the main debugging scenarios.

Performance During Debugging

Flipper consumes device and desktop resources proportionally to the number of active plugins. When all plugins are connected simultaneously on an Android emulator, a performance drop of 5–10% is observed according to Meta’s measurements (2024). It is recommended to connect only the necessary plugins and disable unused ones through the desktop application interface.