Loupe: a debug overlay that lives inside your React Native app

Loupe is an on-device debug overlay for React Native apps that displays network, logs, storage, and deep links within the app being built. It requires only one line to set up and is designed to be turned on and off without configuration or the need to turn it off. The overlay patches JavaScript network interceptors and wraps the root component, appearing as a draggable bubble to open the panel.

It is not included in release builds, as a debug tool that can leak into a release build can be a liability. Loupe's network panel is specifically designed for GraphQL apps, showing each request with an operation name, status, error count, and a copyable curl command. Storage values can be edited, filtered, and deleted within the panel, with sensitive values masked until the user chooses to reveal them.

The storage panel supports various backends and allows for custom storage layers. Deep links are displayed in a separate panel, showing any links the app receives, including those that start the app. Loupe can be added to production builds for testers by importing a separate entry point, which does not start the overlay on import and requires explicit activation from a build meant for distribution to testers.