Tools for inspecting and debugging live Player UI experiences across web, Android, and iOS. Devtools is itself plugin-driven: a Devtools plugin runs inside the Player you want to inspect and publishes its state; a Devtools client renders that state and sends interactions back.
Every part of Devtools is wired together by the messenger — a
transport-agnostic, lossless protocol. A plugin on the Player side and a client
on the tooling side each run a Messenger; the plugin publishes Player state and
the client drives interactions.
Player (web / Android / iOS) Tooling
┌──────────────────────────────┐ ┌────────────────────────────┐
│ Devtools plugin │ │ Devtools client │
│ (basic, or your own) │◀────▶│ • browser extension │
│ taps Player hooks │ msgr │ • Flipper plugin (mobile) │
│ publishes flow/data/logs │ │ • MCP server (agents) │
└──────────────────────────────┘ └────────────────────────────┘
The content a plugin publishes is rendered by the clients as a Player experience itself, using the devtools-assets.
| Package | Platforms | Description |
|---|---|---|
messenger |
TS · JVM · iOS | The communication protocol all of Devtools is built on. |
types |
TS · iOS | Shared event, transaction, and state types. |
utils |
TS · iOS · SwiftUI | Shared utilities (e.g. dsetAssign). |
| Package | Platforms | Description |
|---|---|---|
plugin |
TS · React · Android · JVM · iOS · SwiftUI | Base classes for building Devtools plugins. |
plugins/basic |
all of the above | The standard plugin — exposes flow, data, logs, config; supports expression evaluation and flow overrides. The reference implementation. |
plugins/profiler |
all of the above | Profiles Player hook execution timing and exposes it as a flame graph. |
| Package | Platform | Description |
|---|---|---|
client |
Web/React | The Panel component that renders plugin content; embedded by the browser extension and Flipper plugin. |
flipper-plugin |
Flipper desktop | Client for inspecting mobile (Android/iOS) Players. |
mcp |
stdio / MCP | Client that exposes Devtools to AI agents as MCP tools. |
The browser-extension client lives in a separate repo: player-ui/browser-devtools.
To debug an existing Player, add the basic plugin for your platform and connect a client:
- Web — add
BasicReactDevtoolsPluginand activate the connection from the browser extension popup. - Mobile — add the platform basic plugin and connect Flipper (see Connecting to Flipper for the Android/iOS setup).
- Agents — run the MCP server against a running Flipper server.
To debug capabilities specific to your integration, build your own plugin on top
of the plugin base classes — the basic plugin is the best
reference.
Devtools is built with Bazel via
rules_player; common tasks are
wrapped in the repo justfile (e.g. just install-flipper-client, just mcp).
Each package's BUILD file uses the standard rules_player macros (js_pipeline,
kt_jvm, kt_android, ios_library, swiftui_plugin).