#Rozenite for Web

Rozenite for Web lets you use React Native DevTools (RNDT) to debug React Native web applications, for example in Expo apps. Web browsers appear as debug targets in Metro alongside iOS and Android devices.

This integration requires two parts: the Rozenite Chrome extension (installed in your browser) and the @rozenite/web package (configured in your app).

Browser support: Chromium-based browsers only — Chrome, Brave, Arc, Opera, and others.

#Prerequisites

• React Native project with web support (e.g., Expo)
• Metro bundler

#Chrome extension setup

The Rozenite Chrome extension can be downloaded from the GitHub releases. Download the .crx file for the latest release.

#Installation

1. Download the .crx file from the releases page.
2. Open Chrome and go to chrome://extensions.
3. Enable Developer mode (toggle in the top-right corner).
4. Drag the .crx file onto the extensions page and confirm when prompted. If drag-and-drop does not work, rename the file to .zip, extract it, then click Load unpacked and select the extracted folder (the one containing manifest.json).
5. The extension acts as a bridge between your browser tab and RNDT and discovers Rozenite-enabled localhost tabs automatically.

For more details on loading extensions, see the Chrome extension loading guide.

#@rozenite/web package setup

#Installation

npm install -D @rozenite/web

yarn add -D @rozenite/web

pnpm add -D @rozenite/web

bun add -D @rozenite/web

deno add -D npm:@rozenite/web

#Metro configuration

Add withRozeniteWeb to the enhanceMetroConfig chain inside withRozenite:

const { withRozeniteWeb } = require('@rozenite/web/metro');

// Inside withRozenite options:
enhanceMetroConfig: composeMetroConfigTransformers(
  withRozeniteRequireProfiler,
  withRozeniteReduxDevTools,
  withRozeniteWeb,  // Add this
),

#Entry point

Add require('@rozenite/web') in your app entry point (e.g., main.tsx) or in the root _layout file when using Expo Router.

#Plugin support

Supported plugins:

• TanStack Query
• React Navigation
• Overlay

Unsupported plugins (still shown in the UI but will not work correctly):

• Redux DevTools
• Network Activity
• Require Profiler
• MMKV

This behavior may change in future releases.

If you developed a custom plugin to expose internals of your app to developers via Rozenite, it will work just fine in Rozenite for Web as long as you are not reaching to modules that are only present on mobile.

#Making plugins compatible with Rozenite for Web

If you maintain a plugin and want it to work on web:

1. Verify your plugin does not rely on native modules — native modules are missing on web and will cause runtime errors.
2. If your plugin is native-free or has a different implementation for web, update its react-native.ts entrypoint by removing the isWeb check. Plugins that exclude web via if (isDev && !isWeb && !isServer) will not load on web; removing the !isWeb condition enables them.

#Troubleshooting

• Ensure Metro is running and the extension is installed.
• Ensure the app is served from localhost (e.g., port 8081).