> Markdown version of [/videos/451-headless-flipper-embeddable-mobile-devtools-for-your-ci-and-beyond](https://www.wearedevelopers.com/videos/451-headless-flipper-embeddable-mobile-devtools-for-your-ci-and-beyond). Every page supports `.md` or `Accept: text/markdown`. Links point to the HTML versions so they work for humans too. Agent guide: [/agents.md](https://www.wearedevelopers.com/agents.md). --- # Headless Flipper - embeddable mobile devtools for your CI and beyond Break your mobile devtools out of the local UI constraints. Discover how Flipper's headless architecture turns mobile debugging into a programmable backend service for automated CI pipelines. - **Speakers:** Andrey Goncharov - **Event:** World Congress 2022 - **Published:** June 15, 2022 - **Duration:** 32:52 - **URL:** https://www.wearedevelopers.com/videos/451-headless-flipper-embeddable-mobile-devtools-for-your-ci-and-beyond ## Summary Flipper, Meta’s open-source debugging platform, functions as "Chrome DevTools for your mobile hardware," relying on a device discovery service, a WebSocket message bus, and a rich plugin ecosystem to visualize complex application states and simulate custom hardware. Historically bound to an Electron monolith, Flipper's reliance on hosting plugin state within the UI severely restricted its utility in automated workflows, command-line usage, and remote cloud infrastructure. To overcome these constraints, Flipper has been structurally reimagined to operate headlessly. By decoupling the UI into an embeddable web application and migrating plugin state management directly to a underlying Node.js server process, developers can bypass limitations like lagging remote desktop protocols. This architectural shift allows Flipper UI to be rendered anywhere—such as an iframe within VS Code—while the core engine runs seamlessly in remote development environments. This evolution transforms Flipper from a manual developer companion into a robust backend service for continuous integration. Headless Flipper exposes an RPC-like API, enabling custom scripts and CLI tools to control mobile devices and query software states programmatically. At Meta, this headless architecture powers sophisticated CI pipelines, driving automated UI design verification by scripting remote screenshot captures against mockups, and integrating directly alongside Jest test suites to inspect granular, real-time application states when end-to-end tests fail. **Keywords:** flipper debugging platform, headless devtools, mobile application state, react native debugging, electron architecture refactoring, websocket message bus, remote development environments, automated ui verification, e2e testing automation, jest test debugging, ci pipeline integration, hardware simulation plugins, cross-platform debugging, rpc api integration, node.js plugin server ## Chapters 1. **Overview of Flipper as a debugging platform** (00:05) — Flipper acts as a device discovery service and message bus for debugging mobile and hardware applications. 1. **Cross-platform plugin architecture and device communication** (05:09) — Writing a single desktop user interface allows cross-platform reuse across various mobile device clients via websocket connections. 1. **Extending debugging with specialized custom plugins** (11:26) — Custom plugins enable real-time tracking of complex application state, automated screen navigation, and hardware event simulation. 1. **Addressing Electron monolith limitations with headless architecture** (14:16) — Separating the user interface into a web application solves remote development challenges and allows embedding Flipper anywhere. 1. **Extracting plugin state for command-line access** (20:13) — Relocating plugin state from the visual interface to a shared node process enables interaction strictly through scripts and terminal commands. 1. **Walkthrough of building a headless-compatible plugin** (23:16) — A tic-tac-toe application demonstrates how to separate core logic and state computation from the frontend. 1. **Exposing the plugin API for terminal interaction** (26:29) — Wrapping plugin functions exposes a remote procedure call interface that handles JSON messages directly from standard command-line tools. 1. **Utilizing headless Flipper for verification and testing** (28:31) — Exposing state and UI automation tasks inside a continuous integration pipeline improves design verification and simplifies test debugging. ## Related Moments - [Debugging and analyzing native applications with Flipper](https://www.wearedevelopers.com/videos/448-challenges-of-building-react-and-react-native-apps) (from "Challenges of building React and React Native apps") - [Visualizing and inspecting application state with Flipper](https://www.wearedevelopers.com/videos/277-hands-on-react-native-from-zero-to-hero) (from "Hands-on React Native: From Zero to Hero") - [Mastering advanced browser developer tools for deeper JavaScript debugging](https://www.wearedevelopers.com/videos/1753-wearedevelopers-live-spicy-vanilla-web-css-magic-more) (from "WeAreDevelopers LIVE – Spicy Vanilla Web, CSS Magic & More") - [Answering questions on micro-frontend adoption and tooling](https://www.wearedevelopers.com/videos/299-micro-frontends-anti-patterns) (from "Micro-frontends anti-patterns") - [Evolution of web platform features and native capabilities](https://www.wearedevelopers.com/videos/774-why-lit-is-fire) (from "Why LIT is Fire") - [Exploring alternative build tools and experimental web components](https://www.wearedevelopers.com/videos/118-how-to-stop-choosing-javascript-frameworks-and-start-living) (from "How to Stop Choosing JavaScript Frameworks and Start Living") ## Related Articles - [Dev Digest 132 - Binging WADFlix?](https://www.wearedevelopers.com/magazine/473-dev-digest-132-binging-wadflix) - [Dev Digest 121 - AI goes offline](https://www.wearedevelopers.com/magazine/456-dev-digest-121-ai-goes-offline) - [Dev Digest 118 - not a total recall](https://www.wearedevelopers.com/magazine/452-dev-digest-118-not-a-total-recall) - [Dev Digest 106 - DHH in HD](https://www.wearedevelopers.com/magazine/394-dev-digest-106-dhh-in-hd) ## Related Jobs - [Remote Senior Full-Stack Engineer](https://www.wearedevelopers.com/jobs/ext/679408-remote-senior-full-stack-engineer) at **Edge Impulse** - [Remote Senior Full-Stack Engineer](https://www.wearedevelopers.com/jobs/ext/643147-remote-senior-full-stack-engineer) at **Edge Impulse** - [Junior Frontend Engineer](https://www.wearedevelopers.com/jobs/ext/1532351-junior-frontend-engineer) at **Almedia** - [Remote Senior Full-Stack Engineer](https://www.wearedevelopers.com/jobs/ext/646086-remote-senior-full-stack-engineer) at **Edge Impulse** - [Remote Senior Full-Stack Engineer](https://www.wearedevelopers.com/jobs/ext/682327-remote-senior-full-stack-engineer) at **Edge Impulse** - [Remote Senior Full-Stack Engineer](https://www.wearedevelopers.com/jobs/ext/644637-remote-senior-full-stack-engineer) at **Edge Impulse**