πŸŽ‰ PREMIUM DEV COMPANION

Self-Contained In-App Inspector for React Native

Intercept network requests, analyze console streams, track navigation routes, and monitor custom analytics events directly from your device screens. No debugger ports or cables required.

React Native In-App Inspector Banner

Built for Modern Mobile Developers

Everything you need to troubleshoot, audit, and verify your mobile application states in real-time.

🌐 Network Logger

Monitor raw HTTP packets, track headers, body payloads, latency, and status codes. Copy requests directly as Axios fetch or cURL commands.

πŸ’» Log Terminal

Interactive in-app logs window displaying React Native warnings, errors, and system logging messages in color-coded cards.

πŸ•ΈοΈ WebView Inspector

Audit scripts, styles, resources, navigation history, and console messages running inside nested web views dynamically.

πŸ“Š Analytics Event Tracker

Observe real-time events triggered inside Google Analytics, Firebase, or custom marketing platforms as they happen.

Experience the Interface

Interact with our simulation of the React Native inspector client. Toggle tabs to see mock network requests and logs.

RN-InApp-Inspector
GET 200 OK 45ms
https://api.example.com/users/profile
POST 201 Created 120ms
https://api.example.com/auth/login
GET 500 Server Error 88ms
https://api.example.com/analytics/v2/events
[App] HomeScreen mounted and tracking initialized.
[System] API request latency is above average (120ms).
[Critical] Simulated crash: DB connection timeout.
user_login_success 12:04:12
{ "method": "Google", "role": "Lead Architect" }
screen_view 12:04:08
{ "screen_name": "HomeScreen" }

Simple Integration

Add the inspector to your app in under three minutes.

1

Install Dependencies

Add the library as a dev dependency via npm or yarn package manager.

2

Mount the Inspector Component

Place the inspector at the root level overlay of your application.

3

Start Inspecting

Open your app, tap the floating overlay trigger, and explore the runtime details.

App.tsx
import React from 'react';
import { SafeAreaView } from 'react-native';
import NetworkInspector from 'react-native-inapp-inspector';

const App = () => {
  return (
    <SafeAreaView style={{ flex: 1 }}>
      {/* Your application components */}
      
      {/* Floating overlay UI */}
      <NetworkInspector />
    </SafeAreaView>
  );
};

export default App;