# React Native In-App Inspector (In-App Debugging-Toolkit)

Das **konfigurationsfreie All-in-One In-App-Debugging-Toolkit für React Native & Expo**. Überprüfen Sie HTTP/HTTPS-Netzwerkverkehr, WebSocket- & Socket.IO-Echtzeit-Streams, Konsolenprotokolle mit Metro-Dateizeilen, Redux-State-Diffs, AsyncStorage & MMKV-Speicher, Push-Benachrichtigungen, Hardware-Metriken und erstellen Sie Screenshots oder Videoaufnahmen mit integriertem Editor direkt auf dem Gerät ohne Kabel. > 🚀 **Die moderne, leichtgewichtige Alternative zu Flipper, Charles, Proxyman und Chucker** — funktioniert eigenständig auf dem Gerät, in Test-Builds und ohne Desktop-App oder USB-Kabel.

React Native In-App Inspector Walkthrough

🎬 Vollständiges Demo-Video ansehen (MP4) | Original MOV

---

💖 Mit Liebe für jeden Entwickler geschaffen, der jemals um 2 Uhr nachts nach Phantom-Bugs gesucht hat

„Wir haben react-native-inapp-inspector entwickelt, weil wir den Frust über Kabelsalat, unterbrochene Debugger-Verbindungen und schwer reproduzierbare Fehler in Test-Builds nur zu gut kennen. Wir haben zahllose schlaflose Nächte und pure Leidenschaft investiert, damit jeder Mobile-Entwickler und QA-Tester weltweit mühelos und frei auf echten Geräten debuggen kann.“

Wenn dieses Tool Ihnen Stunden an Fehlersuche erspart hat, geholfen hat, ein wichtiges Release pünktlich auszuliefern, oder Ihren Arbeitsalltag erleichtert hat — erwägen Sie bitte, das Projekt zu sponsern. Jeder noch so kleine Kaffee oder monatliche Beitrag bedeutet uns unglaublich viel und hält unabhängige Open-Source-Innovation am Leben. ☕✨

--- ## ⚡ Vergleich mit anderen Tools | Funktion | **react-native-inapp-inspector** | Flipper | Charles / Proxyman | RN Debugger | | :--- | :---: | :---: | :---: | :---: | | **Eigenständig auf dem Gerät (Kein PC/Kabel erforderlich)** | ✅ | ❌ | ❌ | ❌ | | **Null-Rendern im Leerlauf (0% Hintergrund-CPU)** | ✅ | ❌ | ❌ | ❌ | | **HTTP/HTTPS Netzwerk-Logger (Fetch / Axios / XHR)** | ✅ | ✅ | ✅ | ✅ | | **Timing-Wasserfall & P95-Latenz** | ✅ | ⚠️ | ⚠️ | ❌ | | **Sofortiger cURL- & Fetch-Code-Export** | ✅ | ⚠️ | ⚠️ | ❌ | | **Bidirektionaler WebSocket- & Socket.IO-Inspektor** | ✅ | ❌ | ⚠️ | ⚠️ | | **Live-Speicher-Editor (AsyncStorage & MMKV)** | ✅ (CRUD) | ⚠️ (Nur Lesen) | ❌ | ⚠️ | | **Push-Benachrichtigungs-Logger (APNs, FCM, Salesforce)** | ✅ | ❌ | ❌ | ❌ | | **Logs mit echten Dateizeilennummern via Metro** | ✅ (Exakte Zeile) | ✅ | ❌ | ✅ | | **Redux-State-Diffs & Aktions-Zeitleiste** | ✅ | ⚠️ | ❌ | ✅ | | **Analytics-Ereignis-Tracker (Firebase, Mixpanel)** | ✅ | ❌ | ❌ | ❌ | | **Absturzschutz & Multi-Typ Breadcrumbs** | ✅ | ❌ | ❌ | ❌ | | **Hardware-Telemetrie (RAM, Heap, Speicher, Akku, FPS)** | ✅ | ⚠️ | ❌ | ❌ | | **Medienaufnahme & Studio-Editor (Crop, Video Trim, Badges)** | ✅ (Komplettes Studio) | ❌ | ❌ | ❌ | | **Verschiebbarer FAB & Transparenz-Modus (Peek Mode)** | ✅ (0.05 - 1.0) | ❌ | ❌ | ❌ | | **Remote-Modulverwaltung via Firebase Remote Config** | ✅ | ❌ | ❌ | ❌ | | **25 Sprachen mit Bottom-Sheet-Auswahl** | ✅ | ❌ (Nur Englisch) | ❌ | ❌ | | **Expo (Bare / Managed) & React Native CLI** | ✅ | ⚠️ | ⚠️ | ⚠️ | --- ## ✨ Hauptmodule & Funktionen ### 🌐 1. Netzwerk-Inspektor & Timing-Wasserfall - **Universelles HTTP/HTTPS-Abfangen**: Unterstützt automatisch `fetch`, Axios-Instanzen und `XMLHttpRequest`. - **Latenz-Aufschlüsselung**: Proportionale Wasserfall-Balken, Geschwindigkeitseinstufung (Schnell `<200ms`, Moderat `200-800ms`, Langsam `>800ms`). - **Telemetrie-Leiste**: Echtzeit-Erfolgsrate (%), Durchschnittliche Latenz (ms) und P95-Latenz (ms). - **Payload-Viewer**: Formatierter JSON-Baum, Raw-Text, Header, Abfrageparameter und Aufruferquelle. - **Schnell-Export**: Mit einem Fingertipp als **cURL-Befehl**, **Fetch-Snippet** oder Bericht kopieren. ### ⚡ 2. WebSocket & Socket.IO Echtzeit-Stream-Inspektor - **Vollständige Protokollabdeckung**: Natives WebSocket (`ws://`, `wss://`) und Socket.IO (`v2`, `v3`, `v4`). - **Bidirektionale Frame-Zeitleiste**: Verfolgen von Paketen (⬆️ Gesendet, ⬇️ Empfangen) mit hochauflösenden Zeitstempeln. - **Typenerkennung**: Text, JSON-Nutzdaten, Binärgrößen (ArrayBuffer) und Ping/Pong-Heartbeats. - **Verbindungsmetadaten**: Status, Handshake-Parameter, Transportmodus (websocket/polling) und Wiederverbindungen. ### 💾 3. Speicher-Manager (AsyncStorage & MMKV) - **Einheitliche Speicher-Schnittstelle**: Für `@react-native-async-storage/async-storage` und `react-native-mmkv`. - **Live In-App CRUD**: Schlüssel direkt auf dem Bildschirm anzeigen, suchen, erstellen, bearbeiten und löschen. - **Intelligente Typerkennung**: Unterscheidet automatisch zwischen JSON-Objekten, Arrays, Booleans, Zahlen und Strings. ### 🔔 4. Push-Benachrichtigungs-Logger - **Multi-Provider-Unterstützung**: FCM, APNs, Salesforce Marketing Cloud, OneSignal und Notifee. - **App-Status-Erkennung**: Erkennt, ob Benachrichtigungen im Vordergrund, Hintergrund oder aus dem beendeten Zustand empfangen wurden. - **Payload-Inspektion**: Vollständige Datenparameter, Deep-Links, Titel, Texte und Kanal-IDs. ### 🪵 5. Konsolen-Logger & Metro Source-Map-Symbolisierung - **Exakte Zeilennummern**: Fängt `console.log`, `warn` und `error` ab und zeigt dank Metro Bundler die tatsächliche Quellcodedatei und Zeile an (`HomeScreen.tsx:42:15`). - **Argument-Aufschlüsselung**: Jedes Argument einzeln mit Typangabe prüfen. - **Call-Stack & Error-Stack**: Strukturierte Frames mit Funktionsnamen, Dateipfaden und Fehlertraces. - **Duplikatzusammenfassung**: Wiederholte Ausgaben werden automatisch mit Zähler (`×N`) gebündelt. ### 🔄 6. Redux State-Diffs & Aktions-Zeitleiste - **Redux Toolkit Integration**: Funktioniert nahtlos mit Redux Store, RTK Query und `redux-persist`. - **Aktions-Zeitleiste**: Chronologischer Verlauf aller Aktionen mit Dauer und Payload. - **Farbcodierte State-Diffs**: Änderungen sofort erkennen (**Grün** für Hinzufügungen, **Gelb** für Aktualisierungen, **Rot** für Entfernungen). ### 📊 7. Analytics-Ereignis-Tracker - **Firebase Analytics Auto-Hook**: Fängt `logEvent`, `logScreenView`, `setUserProperties` und `setUserId` automatisch ab. - **Plugin-Architektur**: Unterstützt Google Analytics 4, Mixpanel, Segment und Amplitude. - **Parameter-Prüfung**: Ereignisparameter, Benutzereigenschaften und Zeitstempel analysieren. ### 🛡️ 8. Absturzschutz & Globale Error-Boundary - **Isolierte Micro-UI**: Eigene Sandbox stellt sicher, dass der Inspektor niemals die Hauptanwendung zum Absturz bringt. - **Globale ErrorBoundary**: Fängt nicht behandelte React-Render-Abstürze mit Wiederherstellungs-UI ab. - **Breadcrumb-Historie**: Zeigt vorherige Navigationen, Netzwerkaufrufe und Redux-Aktionen vor einem Fehler. ### 📱 9. Native Hardware-, RAM- & Leistungs-Telemetrie - **Systemmetriken**: Gesamter & freier RAM, Nativer Heap, Freier Speicherplatz, Akkustand & Ladestatus, CPU-Architektur. - **Live-FPS-Zähler**: Kontinuierliche Überwachung der Bildschirm-Bildwiederholrate. - **Automatische Speicherbereinigung**: Gibt bei OS-Speicherwarnungen automatisch Puffer frei. - **Schüttel-Geste**: Gerät schütteln oder `Ctrl+Cmd+Z` / `Cmd+M` drücken, um den Inspektor zu öffnen. ### 📸 10. Native Medienaufnahme & In-App Studio-Editor - **Aufnahme direkt auf dem Gerät**: Hochauflösende Screenshots, flüssige MP4-Videoaufnahmen oder animierte GIFs erstellen. - **Vollständige Mediengalerie**: Durchsuchen, Filtern (Fotos, Videos, GIFs), Mehrfachauswahl und URI-Kopieren. - **Foto- & Video-Studio-Editor**: - **Zuschneiden & Skalieren**: Feste Seitenverhältnisse (1:1 Quadrat, 4:3, 16:9) und Größenanpassung für schnelles Hochladen. - **Video-Trimming & Audio**: Start-/Endzeitpunkte anpassen, Wiedergabegeschwindigkeit (0.5× – 2.0×) ändern oder stummschalten. - **PNG-Frame-Snapshot**: Beliebige Frames aus Videos mit einem Fingertipp als PNG exportieren. - **QA-Anmerkungen & Fehler-Markup**: - **Instagram 3×3 Raster**: Hilfslinien zur pixelgenauen Ausrichtungsprüfung einblenden. - **Nummerierte Schritt-Badges**: Schritt-für-Schritt-Badges (`1`, `2`, `3`...) für Reproduktionsschritte platzieren. - **Bug- & Notiz-Tags**: Farbige Fehler- (`🐛`), Notiz- (`📝`) und Warnsymbole platzieren. - **Text & QA-Wasserzeichen**: Eigene Hinweistexte schreiben und Gerätedaten-Wasserzeichen einblenden. - **Galerie-Import**: Bestehende Fotos oder Videos aus der Fotomediathek zur Bearbeitung importieren. ### 🎛️ 11. Ziehbarer schwebender FAB & Durchsichtigkeits-Modus (Peek Mode) - **Schwebender Launcher**: Frei verschiebbare Bubble mit Ungelesen-Zähler. - **Ausblend-Zone unten**: Zum Schließen einfach auf das leuchtende Ziel am unteren Bildschirmrand ziehen. - **Durchsichtigkeits-Modus**: Deckkraft von 0.05 bis 1.0 anpassen, um die App normal zu bedienen und gleichzeitig Datenströme zu beobachten. ### ☁️ 12. Firebase Remote Config Modulverwaltung - **Remote Feature Flags**: Inspektor-Module in Produktions- oder Test-Builds über Firebase Remote Config aus der Cloud steuern. ### 🌍 13. 25 globale Sprachen & Interaktives Bottom Sheet - **25 unterstützte Sprachen**: Deutsch, Englisch, Spanisch, Französisch, Italienisch, Portugiesisch, Russisch, Japanisch, Koreanisch, Chinesisch, Arabisch, Hindi u.v.m. - **Interaktives Bottom Sheet**: Tippen Sie auf `[ 🌐 DE ▾ ]` in der Kopfzeile für sofortigen Sprachwechsel mit Ländersuche. --- ## 🔎 DevTools-Suchsyntax ```text method:POST status:200 # Filter POST requests with 200 OK url:api.myapp.com -analytics # Filter domain and exclude analytics header:authorization # Filter requests containing auth header body:"orderId" # Search in request/response JSON body page:CheckoutScreen # Filter logs by screen/route name file:ProfileView.tsx # Filter console logs by source file -healthcheck -socket.io # Exclude unwanted logs ``` --- ## 📦 Installation ```bash npm install --save-dev react-native-inapp-inspector react-native-svg # or yarn add -D react-native-inapp-inspector react-native-svg # or pnpm add -D react-native-inapp-inspector react-native-svg ``` #### iOS CocoaPods ```bash cd ios && pod install && cd .. ``` ### Expo ```bash npx expo install react-native-inapp-inspector react-native-svg ``` --- ## 🚀 Schnellstart ```tsx import React from 'react'; import { SafeAreaView } from 'react-native'; import NetworkInspector, { setupNetworkLogger, setupConsoleLogger, setupSocketLogger, connectReduxStore, connectAsyncStorage, } from 'react-native-inapp-inspector'; import AsyncStorage from '@react-native-async-storage/async-storage'; import { store } from './src/store'; // ⚡ Initialize interceptors before app mount setupNetworkLogger(); setupConsoleLogger(); setupSocketLogger(); if (store) connectReduxStore(store); connectAsyncStorage(AsyncStorage); export default function App() { return ( {/* Mount In-App Inspector in DEV builds */} {__DEV__ && ( )} ); } ```