React Native Debug Inspector

This workspace contains a live local React Native network inspector intended to replace the old React Native Debugger network tab.

Developer Workflow

After publishing:

npx react-native-debug-inspector

Then in the React Native app:

import "react-native-debug-inspector/dev-register";

One-Line React Native Setup

For development builds, use:

import "react-native-debug-inspector/dev-register";

That entrypoint only activates in __DEV__, so it is the safest default to commit in an app project.

That auto-installs:

• network capture
• console capture

The auto-register flow tries to infer the correct host from the Metro bundle URL, so it works well for:

• iOS Simulator
• Android Emulator
• many device-on-LAN dev setups

Optional host override

If you need to force a specific host, set it before the import:

global.RN_NETWORK_INSPECTOR_HOST = "192.168.1.34";
import "react-native-debug-inspector/dev-register";

What it does

• Shows a list of captured requests
• Displays request and response headers
• Displays request and response payloads
• Supports filtering by method, URL, or status
• Streams records into the viewer in real time
• Keeps sample traffic as a fallback when the UI is opened directly as a file

Files

• server.js: local relay server and static file host
• index.html: web UI
• styles.css: layout and visual styling
• app.js: live viewer logic
• sample-data.js: mock network events for local preview
• react-native-network-monitor.js: React Native instrumentation and transport helper

Run the inspector

1. Start the local server:

npx react-native-debug-inspector

2. Open:

http://localhost:4318

3. In your React Native app:

import "react-native-debug-inspector/dev-register";

Use your computer's LAN IP, not localhost, when the app runs on a device or simulator that does not share the same loopback interface.

The monitor automatically ignores requests sent to the inspector's own /api/records endpoint so the tool does not capture its own transport traffic.

Safe App Integration

Recommended committed app-side setup:

global.RN_NETWORK_INSPECTOR_HOST = "192.168.1.34";
import "react-native-debug-inspector/dev-register";

If you do not want to commit your machine IP, keep only this in the app:

import "react-native-debug-inspector/dev-register";

And set the host locally through a small ignored file or local bootstrap before the import runs.

Android Real Device Setup

For a physical Android device over USB, the most reliable setup is:

1. Reverse the inspector port:

adb reverse tcp:4318 tcp:4318

2. In the React Native app entry file, set the host first and then require(...) the register entry:

if (__DEV__) {
  global.RN_NETWORK_INSPECTOR_HOST = "127.0.0.1";
  require("react-native-debug-inspector/register");
}

Use this in the real app entry file, typically index.js or index.ts, before the app is registered.

Why require(...) here:

• import statements are evaluated before file body code runs
• so a host override placed above an import "react-native-debug-inspector/register" line can still be too late
• require(...) guarantees the host override is set before the register module executes

This Android real-device flow is more reliable than a top-level import "react-native-debug-inspector/dev-register" when you need adb reverse and 127.0.0.1.

Intended architecture

Current shape:

1. Instrument fetch and XMLHttpRequest inside the React Native app.
2. Normalize every request into a shared event schema.
3. POST events to the local relay server.
4. Stream records from the relay server into the viewer over SSE.
5. Render a request timeline with payload and header inspection.

Event shape

Each network record should look like this:

{
  "id": "req_001",
  "url": "https://api.example.com/users",
  "method": "POST",
  "status": 201,
  "ok": true,
  "startedAt": "2025-04-30T10:00:00.000Z",
  "durationMs": 182,
  "requestHeaders": {
    "content-type": "application/json"
  },
  "requestBody": "{\"name\":\"Asha\"}",
  "responseHeaders": {
    "content-type": "application/json"
  },
  "responseBody": "{\"id\":\"u_42\",\"name\":\"Asha\"}",
  "error": null
}

Notes

• The relay stores the latest 500 records in memory.
• DELETE /api/records clears the current session.
• Opening index.html directly still works, but only with sample data.