Hacking React Native DevTools & Building a Plugin Framework

Flipper let developers load custom tools such as Redux DevTools, but it had stability problems and was deprecated. React Native DevTools is more stable, but does not yet support plugins. Chmal built Rosennite as a temporary way to bring custom tools into the newer DevTools.

Chmal wanted to avoid maintaining a fork, keep DevTools usable if a plugin fails, let developers build plugin UIs with React, and reuse the existing device connection. He explains that React Native DevTools is a web app served locally through Metro, and that its communication uses the Chrome DevTools Protocol.

Rosennite monkey-patches `getDevToolsFrontendUrl` to replace the `debugger-frontend` path with its own URL, then uses Metro's `enhanceMiddleware` to serve the custom UI. It loads the current DevTools HTML at runtime and adds a script tag, avoiding a stale copy that could miss changes such as the CSS updates in React Native 0.81. The injected script uses DevTools UI classes to add a panel containing an iframe.

Each plugin has a React Native side, which Metro can handle, and a DevTools UI side, which needs to be bundled into browser-ready HTML and JavaScript. Rosennite's bridge uses different message handling in each environment: the plugin UI sends messages to the host with `postMessage`, and the injected script forwards them to the device. Chmal demonstrates a Network Activity plugin that inspects HTTP, WebSocket, and server-sent event traffic, including headers, response bodies, and JSON trees.

Chmal says Rosennite discovers and runs installed plugins and works with React Native CLI, Expo, Metro, and Re.Pack. It also includes official plugins. The documentation provides a quick-start guide and installation command.