CLI and web UI to inspect React Native console, Redux, AsyncStorage, network traffic, and navigation state via Metro and DevTools.
npm install rn-inspector
rn-inspector is a focused CLI + Web UI that helps you debug React Native apps by:
- Proxying Metro messages.
- Attaching to DevTools targets (single or multiple devices/emulators).
- Streaming console logs, network requests, navigation state, and selected storage state into a modern, glassy web UI.
This package is the CLI entry point you install globally.
---
Install globally from npm:
``bash`
npm install -g rn-inspector
After installing, the rn-inspector command is available in your shell.
---
1. Start your React Native app as usual (Metro running, app open in simulator or device).
2. In another terminal, run:
`bash`
rn-inspector
3. By default this will:
- Connect to Metro on port 8081.ws://localhost:9230/inspector
- Start a WebSocket proxy for the UI at .http://localhost:4173
- Serve the UI at .
- Auto-discover any available DevTools targets (for connected devices/emulators).
4. Open the UI in your browser (or use the o keyboard shortcut), pick a device from the header, and start inspecting Console and Network events.
---
`bash`
rn-inspector \
[--port 8081 | --port=8081] \
[--ui-port 4173 | --ui-port=4173] \
[--ui-ws-port 9230 | --ui-ws-port=9230] \
[--devtools-url ws://...] \
[--version]
- --port / --port=
- Metro port to connect to.
- Default: .METRO_PORT
- This is also affected by the environment variable (see below).
- --ui-port / --ui-port=
- HTTP port where the Web UI is served.
- Default: .http://localhost:
- The UI will be available at .
- --ui-ws-port / --ui-ws-port=
- WebSocket port used between the CLI proxy and the Web UI.
- Default: .ws://localhost:
- The UI connects to .
- --devtools-url / --devtools-url=
- Explicit DevTools websocket URL to attach to (for advanced usage).
- If omitted, will auto-discover DevTools targets via http:// on a range of ports (starting around the Metro port) and attach to all matching targets.
- --version
- Print the CLI version and exit.
- METRO_PORT
- If set, this overrides the default Metro port.
- Equivalent to passing .
- RN_INSPECTOR_DEVTOOLS_URL
- Default DevTools websocket URL if is not provided.ws://localhost:9229/devtools/page/XXXX-YYYY
- Example: .
---
rn-inspector is designed to work with multiple React Native targets at once:
- The CLI scans a set of ports (around the Metro port and some common DevTools ports) for /json endpoints.deviceId
- For each DevTools target it finds, it:
- Opens a WebSocket connection.
- Tags all console and network events with a .devices
- The CLI periodically sends a meta event over the UI WebSocket with a list of currently attached devices.
- The Web UI:
- Shows a global device selector in the header.
- Filters Console and Network events by the selected device while still showing Metro-only events.
If you prefer to control the DevTools connection manually, you can pass a --devtools-url instead of relying on auto-discovery.
---
When rn-inspector is running, the UI is served from:
`text`
http://localhost:
By default this is http://localhost:4173.
The UI includes:
- Console page
- Live console logs from Metro and DevTools.
- Level filters (log/info/warn/error).
- Detail drawer with copy-to-clipboard and timestamps.
- Network page
- HTTP requests captured via an injected fetch wrapper / DevTools Network domain.
- Detail drawer with headers, payload, and response preview (including text, JSON, images, and some binary types).
- Navigation page
- Real-time navigation state inspection.
- Current route information and navigation history.
- Navigate to any available route with parameters.
- Deep link testing and navigation controls.
- Automatic route discovery from your React Navigation setup.
- Storage page
- AsyncStorage key/value inspection.
- Redux state visualization (when exposed).
- Header controls
- Global device selector (backed by the deviceId tagging in the CLI).
- Global capture toggles for Console and Network streams.
- Global proxy WS status chip (shows connection status and basic stats; click to reconnect when disconnected).
- Global DevTools status chip (shows connected/closed/error and lets you request a DevTools reconnect from the UI).
---
The Storage page lets you inspect:
- AsyncStorage key/value pairs.
- Redux state (if you are using Redux).
To keep the CLI simple and avoid depending on your bundler setup, you need to expose these on the global object in your app:
In your React Native app (for example in App.tsx):
`ts
import AsyncStorage from '@react-native-async-storage/async-storage';
// Make AsyncStorage visible to rn-inspector storage helper
global.__RN_INSPECTOR_ASYNC_STORAGE__ = AsyncStorage;
`
Once this is set and the app is running with DevTools debugging enabled, the Storage page's AsyncStorage panel will show your keys and values.
If you use Redux, expose your store after you create it (anywhere in your app setup):
`ts
import { createStore } from 'redux';
const store = createStore(reducer);
// Expose Redux store for rn-inspector
(global as any).__RN_INSPECTOR_REDUX_STORE__ = store;
`
The Storage page's Redux State panel will then show store.getState() and update as your state changes.
If you do not expose these globals, the Storage page will show a helpful message explaining what to add in your app.
---
The Navigation page lets you inspect and control your React Navigation setup:
- Current Route information with name, key, params, and path.
- Navigation History with timestamps and route parameters.
- Available Routes automatically discovered from your navigation structure.
- Navigate to Route with support for route parameters and nested navigation.
- Reset Navigation State to restore specific navigation states.
- Deep Link Testing to test URL-based navigation.
- Navigation Controls including go back functionality.
To enable navigation inspection, add the following to your React Native app (for example in App.tsx):
`ts
import { NavigationContainer } from '@react-navigation/native';
function App() {
const navigationRef = useRef(null);
useEffect(() => {
if (global.__RN_INSPECTOR_NAVIGATION__) {
global.__RN_INSPECTOR_NAVIGATION__
.setNavigationRef(navigationRef.current);
}
}, []);
return (
{/ Your navigation stack /}
);
}
`
Once this is set and the app is running with DevTools debugging enabled, the Navigation page will show your current route, navigation history, and let you navigate to any available route.
- Automatic Route Discovery: Scans your navigation structure and lists all available routes.
- Nested Navigation Support: Handles complex navigation hierarchies with proper screen parameter passing.
- Real-time Updates: Navigation state updates automatically as you navigate in your app.
- Parameter Support: Pass route parameters when navigating programmatically.
- History Tracking: See your navigation history with timestamps and parameters.
- Deep Link Testing: Test deep links directly from the inspector UI.
If you do not set up the navigation ref, the Navigation page will show setup instructions.
While rn-inspector is running in a TTY, the CLI listens for a few simple shortcuts:
- o / O
- Open the Web UI in your default browser (using on Windows, open on macOS, or xdg-open on Linux).
- r / R
- Print a hint on how to fully reload the CLI:
- Press to stop the process, then run rn-inspector again.
- Ctrl+C
- Quit .
If the terminal does not support raw mode (no TTY), these shortcuts are safely disabled.
---
- If the Metro websocket closes or errors, the CLI logs a message and sends a small meta event to the UI so you can see the status.devtools
- For DevTools websockets (one per device):
- The CLI emits status meta events (open, closed, error) but does not auto-retry reconnecting./json
- The Web UI header exposes a DevTools status chip; clicking it sends a control message to the CLI to re-run DevTools discovery and attach again.
- When DevTools auto-discovery finds no targets, the CLI logs a message _and_ emits a warning meta` event so the UI can surface a toast like “DevTools auto-discovery found no /json targets (falling back to Metro-only mode)”.
---
This CLI is part of the RN Inspector Monorepo:
- GitHub:
Please open issues or pull requests in that repository for bugs, feature requests, or contributions.
---
Licensed under the MIT License.