react-native-inapp-inspector 2.4.0 → 2.4.2

package/README.ar.md

@@ -0,0 +1,163 @@
+# React Native In-App Inspector (مصحح الأخطاء وفاحص الشبكة داخل التطبيق)
+
+<p align="center">
+  <b><a href="./README.md">English</a></b> |
+  <b><a href="./README.zh-CN.md">简体中文</a></b> |
+  <b><a href="./README.hi.md">हिन्दी</a></b> |
+  <b><a href="./README.ja.md">日本語</a></b> |
+  <b><a href="./README.es.md">Español</a></b> |
+  <b><a href="./README.de.md">Deutsch</a></b> |
+  <b><a href="./README.fr.md">Français</a></b> |
+  <b><a href="./README.pt-BR.md">Português</a></b> |
+  <b><a href="./README.ko.md">한국어</a></b> |
+  <b><a href="./README.ru.md">Русский</a></b> |
+  <b><a href="./README.ar.md">العربية</a></b>
+</p>
+
+<p align="center">
+  <picture>
+    <source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/vengatmacuser/react-native-inapp-inspector/main/assets/banner_light.svg">
+    <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/vengatmacuser/react-native-inapp-inspector/main/assets/banner_dark.svg">
+    <img alt="React Native In-App Inspector Banner" src="https://raw.githubusercontent.com/vengatmacuser/react-native-inapp-inspector/main/assets/banner_dark.svg" width="100%">
+  </picture>
+</p>
+
+<p align="center">
+  <a href="https://www.npmjs.com/package/react-native-inapp-inspector"><img src="https://img.shields.io/npm/v/react-native-inapp-inspector?color=6366f1&label=npm&logo=npm" alt="npm version" /></a>
+  <a href="https://www.npmjs.com/package/react-native-inapp-inspector"><img src="https://img.shields.io/npm/dm/react-native-inapp-inspector?color=3b82f6&label=downloads" alt="npm downloads" /></a>
+  <a href="https://github.com/vengatmacuser/react-native-inapp-inspector"><img src="https://img.shields.io/github/stars/vengatmacuser/react-native-inapp-inspector?color=f59e0b&label=stars&logo=github" alt="GitHub stars" /></a>
+  <a href="https://github.com/vengatmacuser/react-native-inapp-inspector/blob/main/LICENSE"><img src="https://img.shields.io/badge/license-MIT-green" alt="license" /></a>
+</p>
+
+<p align="center">
+  <img src="https://img.shields.io/badge/Platform-iOS%20%7C%20Android%20%7C%20Expo-0284c7?logo=apple&logoColor=white" alt="platform" />
+  <img src="https://img.shields.io/badge/React%20Native-%E2%89%A50.60-61DAFB?logo=react&logoColor=white" alt="React Native" />
+  <img src="https://img.shields.io/badge/Expo-SDK%2048%2B%20%7C%2050%2B%20%7C%2051%2B%20%7C%2052%2B-000020?logo=expo&logoColor=white" alt="Expo" />
+  <img src="https://img.shields.io/badge/TypeScript-Strict%20Ready-3178c6?logo=typescript&logoColor=white" alt="TypeScript" />
+  <img src="https://img.shields.io/badge/Engine-Hermes%20%7C%20JSC-9333ea" alt="Engine" />
+</p>
+
+مجموعة أدوات فحص وتصحيح أخطاء متكاملة لتطبيقات **React Native و Expo** بدون الحاجة لأي إعدادات مسبقة. تتيح لك مراقبة حركة شبكة HTTP/HTTPS، وتدفقات WebSocket و Socket.IO في الوقت الفعلي، وسجلات وحدة التحكم مع مطابقة أسطر الكود الحقيقية عبر Metro، وتغييرات حالة Redux، وتعديل تخزين AsyncStorage و MMKV المباشر، وتتبع الإشعارات، وقياس استهلاك الذاكرة والبطارية، وتسجيل الشاشة فيديو من هاتفك مباشرة ودون الحاجة لأي كابلات.
+
+> 🚀 **البديل العصري والأخف لأدوات Flipper و Charles و Proxyman و Chucker** — يعمل بشكل مستقل على الأجهزة الحقيقية ونسخ الاختبار (APK / TestFlight) بدون برامج كمبيوتر مساعدة.
+
+<p align="center">
+  <img src="https://raw.githubusercontent.com/vengatmacuser/react-native-inapp-inspector/main/assets/walkthrough.gif" alt="React Native In-App Inspector Walkthrough" width="360" style="border-radius: 20px; box-shadow: 0 12px 36px rgba(0,0,0,0.5);" />
+</p>
+
+<p align="center">
+  🎬 <b><a href="https://raw.githubusercontent.com/vengatmacuser/react-native-inapp-inspector/main/docs/video_walkthrough.mp4">مشاهدة الفيديو التوضيحي الكامل (MP4)</a></b> | <b><a href="https://raw.githubusercontent.com/vengatmacuser/react-native-inapp-inspector/main/docs/video_walkthrough.mov">الملف الأصلي MOV</a></b>
+</p>
+
+---
+
+## ⚡ مقارنة الميزات
+
+| الميزة | **react-native-inapp-inspector** | Flipper | Charles / Proxyman | RN Debugger |
+| :--- | :---: | :---: | :---: | :---: |
+| **يعمل على الجهاز ذاتياً (دون كمبيوتر أو كابلات)** | ✅ | ❌ | ❌ | ❌ |
+| **صفر استهلاك للخلفية (0% CPU عند الإغلاق)** | ✅ | ❌ | ❌ | ❌ |
+| **فحص شبكة HTTP/HTTPS (Fetch / Axios / XHR)** | ✅ | ✅ | ✅ | ✅ |
+| **مخطط الشلال الزمني وقياسات P95** | ✅ | ⚠️ | ⚠️ | ❌ |
+| **نسخ فوري لأوامر cURL وأكواد Fetch** | ✅ | ⚠️ | ⚠️ | ❌ |
+| **مراقبة حزم WebSocket و Socket.IO الحية** | ✅ | ❌ | ⚠️ | ⚠️ |
+| **فحص وتعديل التخزين مباشرة (AsyncStorage & MMKV)** | ✅ (CRUD كامل) | ⚠️ (قراءة فقط) | ❌ | ⚠️ |
+| **سجل إشعارات الدفع (APNs, FCM, Salesforce)** | ✅ | ❌ | ❌ | ❌ |
+| **سجلات برقم السطر الدقيق عبر Metro** | ✅ (رقم السطر الفعلي) | ✅ | ❌ | ✅ |
+| **فروقات حالة Redux وسجل الأفعال الزمني** | ✅ | ⚠️ | ❌ | ✅ |
+| **حماية من الانهيار ومسار الأحداث (Breadcrumbs)** | ✅ | ❌ | ❌ | ❌ |
+| **قياسات العتاد والذاكرة (RAM والبطارية والمساحة)**| ✅ | ⚠️ | ❌ | ❌ |
+| **تسجيل فيديو للشاشة والتقاط صور (MP4 / GIF)** | ✅ | ❌ | ❌ | ❌ |
+| **يدعم 25 لغة عالمية مع قائمة سفلية لاختيار الدولة** | ✅ | ❌ (إنجليزية فقط) | ❌ | ❌ |
+
+---
+
+## 📦 التثبيت
+
+```bash
+npm install --save-dev react-native-inapp-inspector react-native-svg
+# أو
+yarn 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
+```
+
+---
+
+## 🚀 البدء السريع
+
+في الملف الرئيسي لتطبيقك (`App.tsx` أو `index.js`):
+
+```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';
+
+// ⚡ التهيئة قبل تحميل التطبيق لتسجيل كافة الطلبات الأولية
+setupNetworkLogger();
+setupConsoleLogger();
+setupSocketLogger();
+
+if (store) connectReduxStore(store);
+connectAsyncStorage(AsyncStorage);
+
+export default function App() {
+  return (
+    <SafeAreaView style={{ flex: 1 }}>
+      <YourAppRoot />
+
+      {/* إظهار الفاحص العائم أثناء التطوير فقط */}
+      {__DEV__ && (
+        <NetworkInspector
+          enabled={true}
+          environment="DEV"
+        />
+      )}
+    </SafeAreaView>
+  );
+}
+```
+
+---
+
+## 🔎 صيغة البحث المتقدمة (DevTools)
+
+```text
+method:POST status:200         # تصفية طلبات POST الناجحة برمز 200
+url:api.myapp.com -analytics   # البحث في واجهة التطبيق واستبعاد التتبع
+header:authorization           # تصفية الطلبات المحتوية على توكن
+body:"orderId"                 # البحث داخل حزم JSON
+page:CheckoutScreen            # التصفية بحسب الشاشة النشطة
+file:ProfileView.tsx           # البحث عن سجلات قادمة من ملف معين
+```
+
+## 🔍 كلمات البحث لمطوري الشرق الأوسط (Keywords)
+
+مُحسّن وموجّه للمطورين في العالم العربي (الإمارات، السعودية، مصر، قطر، المغرب، وباقي الدول العربية):
+
+* **كلمات البحث الشائعة**: فاحص الشبكة رياكت نيتف، مصحح أخطاء الموبايل، مراقب الشبكة، أدوات مطور رياكت نيتف، فاحص الشبكة المحمول، تسجيل حزم البيانات.
+* **البدائل الشهيرة**: بديل فليبر (Flipper alternative)، بديل تشارلز بروكسي (Charles Proxy alternative)، شوكر رياكت نيتف (Chucker)، بديل بروكسي مان، بديل رياكتوترون.
+* **المميزات الرئيسية**: فحص WebSocket مباشر، محرر MMKV و AsyncStorage، تصحيح الأخطاء عبر Metro، تصوير وتسجيل شاشة الهاتف مباشرة.
+
+---
+
+## 📄 الترخيص
+
+MIT © [vengatmacuser](LICENSE)
+

package/README.de.md

@@ -0,0 +1,163 @@
+# React Native In-App Inspector (In-App-Debugger für React Native & Expo)
+
+<p align="center">
+  <b><a href="./README.md">English</a></b> |
+  <b><a href="./README.zh-CN.md">简体中文</a></b> |
+  <b><a href="./README.hi.md">हिन्दी</a></b> |
+  <b><a href="./README.ja.md">日本語</a></b> |
+  <b><a href="./README.es.md">Español</a></b> |
+  <b><a href="./README.de.md">Deutsch</a></b> |
+  <b><a href="./README.fr.md">Français</a></b> |
+  <b><a href="./README.pt-BR.md">Português</a></b> |
+  <b><a href="./README.ko.md">한국어</a></b> |
+  <b><a href="./README.ru.md">Русский</a></b> |
+  <b><a href="./README.ar.md">العربية</a></b>
+</p>
+
+<p align="center">
+  <picture>
+    <source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/vengatmacuser/react-native-inapp-inspector/main/assets/banner_light.svg">
+    <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/vengatmacuser/react-native-inapp-inspector/main/assets/banner_dark.svg">
+    <img alt="React Native In-App Inspector Banner" src="https://raw.githubusercontent.com/vengatmacuser/react-native-inapp-inspector/main/assets/banner_dark.svg" width="100%">
+  </picture>
+</p>
+
+<p align="center">
+  <a href="https://www.npmjs.com/package/react-native-inapp-inspector"><img src="https://img.shields.io/npm/v/react-native-inapp-inspector?color=6366f1&label=npm&logo=npm" alt="npm version" /></a>
+  <a href="https://www.npmjs.com/package/react-native-inapp-inspector"><img src="https://img.shields.io/npm/dm/react-native-inapp-inspector?color=3b82f6&label=downloads" alt="npm downloads" /></a>
+  <a href="https://github.com/vengatmacuser/react-native-inapp-inspector"><img src="https://img.shields.io/github/stars/vengatmacuser/react-native-inapp-inspector?color=f59e0b&label=stars&logo=github" alt="GitHub stars" /></a>
+  <a href="https://github.com/vengatmacuser/react-native-inapp-inspector/blob/main/LICENSE"><img src="https://img.shields.io/badge/license-MIT-green" alt="license" /></a>
+</p>
+
+<p align="center">
+  <img src="https://img.shields.io/badge/Platform-iOS%20%7C%20Android%20%7C%20Expo-0284c7?logo=apple&logoColor=white" alt="platform" />
+  <img src="https://img.shields.io/badge/React%20Native-%E2%89%A50.60-61DAFB?logo=react&logoColor=white" alt="React Native" />
+  <img src="https://img.shields.io/badge/Expo-SDK%2048%2B%20%7C%2050%2B%20%7C%2051%2B%20%7C%2052%2B-000020?logo=expo&logoColor=white" alt="Expo" />
+  <img src="https://img.shields.io/badge/TypeScript-Strict%20Ready-3178c6?logo=typescript&logoColor=white" alt="TypeScript" />
+  <img src="https://img.shields.io/badge/Engine-Hermes%20%7C%20JSC-9333ea" alt="Engine" />
+</p>
+
+Das **konfigurationsfreie All-in-One-In-App-Debugging-Toolkit für React Native & Expo**. Überwachen Sie HTTP/HTTPS-Netzwerkanfragen, WebSocket- & Socket.IO-Verbindungen, Konsolenprotokolle mit Metro-Source-Map-Zeilennummern, Redux-Statusänderungen, AsyncStorage- & MMKV-Speicher, Push-Benachrichtigungen und Hardware-Telemetrie direkt auf Ihrem Mobilgerät – ohne Kabel oder externe Desktop-Tools.
+
+> 🚀 **Die moderne Alternative zu Flipper, Charles und Chucker** — funktioniert eigenständig auf Geräten, in Test-Builds (APK / TestFlight) und ohne offene Debugger-Ports.
+
+<p align="center">
+  <img src="https://raw.githubusercontent.com/vengatmacuser/react-native-inapp-inspector/main/assets/walkthrough.gif" alt="React Native In-App Inspector Walkthrough" width="360" style="border-radius: 20px; box-shadow: 0 12px 36px rgba(0,0,0,0.5);" />
+</p>
+
+<p align="center">
+  🎬 <b><a href="https://raw.githubusercontent.com/vengatmacuser/react-native-inapp-inspector/main/docs/video_walkthrough.mp4">Vollständiges Demo-Video ansehen (MP4)</a></b> | <b><a href="https://raw.githubusercontent.com/vengatmacuser/react-native-inapp-inspector/main/docs/video_walkthrough.mov">Originales MOV</a></b>
+</p>
+
+---
+
+## ⚡ Vergleich mit anderen Tools
+
+| Funktion | **react-native-inapp-inspector** | Flipper | Charles / Proxyman | RN Debugger |
+| :--- | :---: | :---: | :---: | :---: |
+| **Standalone auf dem Gerät (Kein PC/Kabel nötig)** | ✅ | ❌ | ❌ | ❌ |
+| **Null CPU-Overhead im Hintergrund (0% Aktivität)** | ✅ | ❌ | ❌ | ❌ |
+| **HTTP/HTTPS Netzwerk-Logger (Fetch / Axios / XHR)** | ✅ | ✅ | ✅ | ✅ |
+| **Timing-Wasserfall & P95-Telemetrie** | ✅ | ⚠️ | ⚠️ | ❌ |
+| **Sofortiges Kopieren von cURL- & Fetch-Snippets** | ✅ | ⚠️ | ⚠️ | ❌ |
+| **WebSocket & Socket.IO Paket-Inspektor** | ✅ | ❌ | ⚠️ | ⚠️ |
+| **Speicher-Editor (AsyncStorage & MMKV)** | ✅ (CRUD) | ⚠️ (Nur Lesen) | ❌ | ⚠️ |
+| **Push-Benachrichtigungs-Logger (APNs, FCM)** | ✅ | ❌ | ❌ | ❌ |
+| **Metro-Symbolisierung mit genauen Zeilennummern** | ✅ (Genaue Zeile) | ✅ | ❌ | ✅ |
+| **Redux State Diffs & Action-Timeline** | ✅ | ⚠️ | ❌ | ✅ |
+| **Absturzschutz & Breadcrumb-Verlauf** | ✅ | ❌ | ❌ | ❌ |
+| **Hardware-Telemetrie (RAM, Heap, Speicher, Akku)** | ✅ | ⚠️ | ❌ | ❌ |
+| **Bildschirmaufzeichnung & Screenshots (MP4 / GIF)** | ✅ | ❌ | ❌ | ❌ |
+| **25 Sprachen inkl. Deutsch (Bottom-Sheet-Auswahl)** | ✅ | ❌ (Nur Englisch) | ❌ | ❌ |
+
+---
+
+## 📦 Installation
+
+```bash
+npm install --save-dev react-native-inapp-inspector react-native-svg
+# oder
+yarn add -D react-native-inapp-inspector react-native-svg
+```
+
+#### iOS CocoaPods
+```bash
+cd ios && pod install && cd ..
+```
+
+### Expo Projekte
+```bash
+npx expo install react-native-inapp-inspector react-native-svg
+```
+
+---
+
+## 🚀 Schnelleinbindung
+
+In der Einstiegsdatei (`App.tsx` oder `index.js`):
+
+```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';
+
+// ⚡ Vor dem Rendern der App initialisieren
+setupNetworkLogger();
+setupConsoleLogger();
+setupSocketLogger();
+
+if (store) connectReduxStore(store);
+connectAsyncStorage(AsyncStorage);
+
+export default function App() {
+  return (
+    <SafeAreaView style={{ flex: 1 }}>
+      <YourAppRoot />
+
+      {/* Floating Overlay in der Entwicklungsumgebung */}
+      {__DEV__ && (
+        <NetworkInspector
+          enabled={true}
+          environment="DEV"
+        />
+      )}
+    </SafeAreaView>
+  );
+}
+```
+
+---
+
+## 🔎 DevTools Suchsyntax
+
+```text
+method:POST status:200         # POST-Anfragen mit 200 OK filtern
+url:api.myapp.com -analytics   # Ziel-API suchen und Tracking ausschließen
+header:authorization           # Anfragen mit Authentifizierungs-Headern
+body:"orderId"                 # JSON-Body tiefgehend durchsuchen
+page:CheckoutScreen            # Nach React Navigation-Bildschirm filtern
+file:ProfileView.tsx           # Konsolen-Logs nach Quelldatei filtern
+```
+
+## 🔍 Suchbegriffe für Entwickler (Keywords)
+
+Optimiert für Entwickler in Deutschland, Österreich und der Schweiz (DACH-Region):
+
+* **Häufige Suchbegriffe**: Netzwerk-Logger, In-App-Debugger Deutschland, Entwicklertools React Native, Paketmitschnitt Mobil, Netzwerk-Mitschnitt, Fehlersuche Mobil, App-Inspektor.
+* **Beliebte Alternativen**: Flipper-Alternative, Charles Proxy Alternative, Chucker für React Native, Proxyman Alternative, Reactotron Alternative.
+* **Kernfunktionen**: WebSocket-Mitschnitt, MMKV-Editor, AsyncStorage-Viewer, Metro-Symbolisierung für Stacktraces, On-Device Bildschirmaufnahme.
+
+---
+
+## 📄 Lizenz
+
+MIT © [vengatmacuser](LICENSE)
+

package/README.es.md

@@ -0,0 +1,164 @@
+# React Native In-App Inspector (Inspector de Depuración en la App)
+
+<p align="center">
+  <b><a href="./README.md">English</a></b> |
+  <b><a href="./README.zh-CN.md">简体中文</a></b> |
+  <b><a href="./README.hi.md">हिन्दी</a></b> |
+  <b><a href="./README.ja.md">日本語</a></b> |
+  <b><a href="./README.es.md">Español</a></b> |
+  <b><a href="./README.de.md">Deutsch</a></b> |
+  <b><a href="./README.fr.md">Français</a></b> |
+  <b><a href="./README.pt-BR.md">Português</a></b> |
+  <b><a href="./README.ko.md">한국어</a></b> |
+  <b><a href="./README.ru.md">Русский</a></b> |
+  <b><a href="./README.ar.md">العربية</a></b>
+</p>
+
+<p align="center">
+  <picture>
+    <source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/vengatmacuser/react-native-inapp-inspector/main/assets/banner_light.svg">
+    <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/vengatmacuser/react-native-inapp-inspector/main/assets/banner_dark.svg">
+    <img alt="React Native In-App Inspector Banner" src="https://raw.githubusercontent.com/vengatmacuser/react-native-inapp-inspector/main/assets/banner_dark.svg" width="100%">
+  </picture>
+</p>
+
+<p align="center">
+  <a href="https://www.npmjs.com/package/react-native-inapp-inspector"><img src="https://img.shields.io/npm/v/react-native-inapp-inspector?color=6366f1&label=npm&logo=npm" alt="npm version" /></a>
+  <a href="https://www.npmjs.com/package/react-native-inapp-inspector"><img src="https://img.shields.io/npm/dm/react-native-inapp-inspector?color=3b82f6&label=downloads" alt="npm downloads" /></a>
+  <a href="https://github.com/vengatmacuser/react-native-inapp-inspector"><img src="https://img.shields.io/github/stars/vengatmacuser/react-native-inapp-inspector?color=f59e0b&label=stars&logo=github" alt="GitHub stars" /></a>
+  <a href="https://github.com/vengatmacuser/react-native-inapp-inspector/blob/main/LICENSE"><img src="https://img.shields.io/badge/license-MIT-green" alt="license" /></a>
+</p>
+
+<p align="center">
+  <img src="https://img.shields.io/badge/Platform-iOS%20%7C%20Android%20%7C%20Expo-0284c7?logo=apple&logoColor=white" alt="platform" />
+  <img src="https://img.shields.io/badge/React%20Native-%E2%89%A50.60-61DAFB?logo=react&logoColor=white" alt="React Native" />
+  <img src="https://img.shields.io/badge/Expo-SDK%2048%2B%20%7C%2050%2B%20%7C%2051%2B%20%7C%2052%2B-000020?logo=expo&logoColor=white" alt="Expo" />
+  <img src="https://img.shields.io/badge/TypeScript-Strict%20Ready-3178c6?logo=typescript&logoColor=white" alt="TypeScript" />
+  <img src="https://img.shields.io/badge/Engine-Hermes%20%7C%20JSC-9333ea" alt="Engine" />
+</p>
+
+El **conjunto de herramientas de depuración todo en uno y sin configuración para React Native y Expo**. Inspecciona el tráfico de red HTTP/HTTPS, flujos de WebSocket y Socket.IO en tiempo real, registros de consola con número de línea exacto mediante Metro, cambios de estado en Redux, almacenamiento en vivo de AsyncStorage y MMKV, notificaciones push, métricas de hardware del dispositivo y captura de pantalla/video directamente en el teléfono sin cables.
+
+> 🚀 **La alternativa moderna y ligera a Flipper, Charles, Proxyman y Chucker** — funciona de forma autónoma en el dispositivo, en compilaciones de prueba (APK/TestFlight) y sin necesidad de conectar cables a la computadora.
+
+<p align="center">
+  <img src="https://raw.githubusercontent.com/vengatmacuser/react-native-inapp-inspector/main/assets/walkthrough.gif" alt="React Native In-App Inspector Walkthrough" width="360" style="border-radius: 20px; box-shadow: 0 12px 36px rgba(0,0,0,0.5);" />
+</p>
+
+<p align="center">
+  🎬 <b><a href="https://raw.githubusercontent.com/vengatmacuser/react-native-inapp-inspector/main/docs/video_walkthrough.mp4">Ver Video de Demostración Completo (MP4)</a></b> | <b><a href="https://raw.githubusercontent.com/vengatmacuser/react-native-inapp-inspector/main/docs/video_walkthrough.mov">MOV Original</a></b>
+</p>
+
+---
+
+## ⚡ Comparación con Otras Herramientas
+
+| Característica | **react-native-inapp-inspector** | Flipper | Charles / Proxyman | RN Debugger |
+| :--- | :---: | :---: | :---: | :---: |
+| **Funciona en el dispositivo (sin PC ni cables)** | ✅ | ❌ | ❌ | ❌ |
+| **Cero consumo en reposo (0% CPU en segundo plano)** | ✅ | ❌ | ❌ | ❌ |
+| **Inspección de red HTTP/HTTPS (Fetch / Axios / XHR)** | ✅ | ✅ | ✅ | ✅ |
+| **Cascada de tiempos y percentil P95** | ✅ | ⚠️ | ⚠️ | ❌ |
+| **Copia instantánea de snippets cURL y Fetch** | ✅ | ⚠️ | ⚠️ | ❌ |
+| **Monitoreo de WebSocket y Socket.IO bidireccional** | ✅ | ❌ | ⚠️ | ⚠️ |
+| **Editor de almacenamiento en vivo (AsyncStorage y MMKV)** | ✅ (CRUD) | ⚠️ (Solo lectura) | ❌ | ⚠️ |
+| **Registro de notificaciones push (APNs, FCM, Salesforce)**| ✅ | ❌ | ❌ | ❌ |
+| **Logs con resolución de líneas reales con Metro** | ✅ (Línea exacta) | ✅ | ❌ | ✅ |
+| **Diferencias de Redux y línea de tiempo de acciones** | ✅ | ⚠️ | ❌ | ✅ |
+| **Protección contra cierres y rastro de migas (Breadcrumbs)**| ✅ | ❌ | ❌ | ❌ |
+| **Telemetría de hardware (RAM, heap, disco, batería)** | ✅ | ⚠️ | ❌ | ❌ |
+| **Captura y grabación de video en el dispositivo (MP4/GIF)**| ✅ | ❌ | ❌ | ❌ |
+| **25 idiomas con selector en hoja inferior (Bottom Sheet)**| ✅ | ❌ (Solo inglés) | ❌ | ❌ |
+
+---
+
+## 📦 Instalación
+
+### Proyectos React Native
+```bash
+npm install --save-dev react-native-inapp-inspector react-native-svg
+# o
+yarn add -D react-native-inapp-inspector react-native-svg
+```
+
+#### Configuración de CocoaPods en iOS
+```bash
+cd ios && pod install && cd ..
+```
+
+### Proyectos Expo
+```bash
+npx expo install react-native-inapp-inspector react-native-svg
+```
+
+---
+
+## 🚀 Inicio Rápido
+
+En tu archivo principal (`App.tsx` o `index.js`):
+
+```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';
+
+// ⚡ Inicializa los registradores antes del renderizado de componentes
+setupNetworkLogger();
+setupConsoleLogger();
+setupSocketLogger();
+
+if (store) connectReduxStore(store);
+connectAsyncStorage(AsyncStorage);
+
+export default function App() {
+  return (
+    <SafeAreaView style={{ flex: 1 }}>
+      <YourAppRoot />
+
+      {/* Activa el inspector flotante en desarrollo */}
+      {__DEV__ && (
+        <NetworkInspector
+          enabled={true}
+          environment="DEV"
+        />
+      )}
+    </SafeAreaView>
+  );
+}
+```
+
+---
+
+## 🔎 Sintaxis de Búsqueda Estilo DevTools
+
+```text
+method:POST status:200         # Filtrar peticiones POST con respuesta 200 OK
+url:api.miapp.com -analytics   # Buscar peticiones excluyendo analítica
+header:authorization           # Buscar peticiones con tokens de autenticación
+body:"orderId"                 # Búsqueda en el cuerpo JSON de petición o respuesta
+page:CheckoutScreen            # Filtrar por pantalla activa en React Navigation
+file:ProfileView.tsx           # Filtrar logs de consola por archivo fuente
+```
+
+## 🔍 Palabras Clave de Búsqueda (Keywords)
+
+Optimizado para desarrolladores en España y toda Latinoamérica (México, Colombia, Argentina, Chile, Perú, etc.):
+
+* **Términos de búsqueda**: Depurador React Native, captura de red móvil, registro de red, herramientas de desarrollo React Native, monitor de tráfico móvil, depuración en dispositivo, inspector en app.
+* **Alternativas populares**: Alternativa a Flipper, alternativa a Charles Proxy, Chucker para React Native, alternativa a Proxyman, alternativa a Reactotron.
+* **Características**: Captura de WebSocket, visor de MMKV, editor de AsyncStorage, logs con symbolication Metro, grabador de pantalla para reportar bugs.
+
+---
+
+## 📄 Licencia
+
+MIT © [vengatmacuser](LICENSE)
+

package/README.fr.md

@@ -0,0 +1,163 @@
+# React Native In-App Inspector (Inspecteur et Débogueur Intégré)
+
+<p align="center">
+  <b><a href="./README.md">English</a></b> |
+  <b><a href="./README.zh-CN.md">简体中文</a></b> |
+  <b><a href="./README.hi.md">हिन्दी</a></b> |
+  <b><a href="./README.ja.md">日本語</a></b> |
+  <b><a href="./README.es.md">Español</a></b> |
+  <b><a href="./README.de.md">Deutsch</a></b> |
+  <b><a href="./README.fr.md">Français</a></b> |
+  <b><a href="./README.pt-BR.md">Português</a></b> |
+  <b><a href="./README.ko.md">한국어</a></b> |
+  <b><a href="./README.ru.md">Русский</a></b> |
+  <b><a href="./README.ar.md">العربية</a></b>
+</p>
+
+<p align="center">
+  <picture>
+    <source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/vengatmacuser/react-native-inapp-inspector/main/assets/banner_light.svg">
+    <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/vengatmacuser/react-native-inapp-inspector/main/assets/banner_dark.svg">
+    <img alt="React Native In-App Inspector Banner" src="https://raw.githubusercontent.com/vengatmacuser/react-native-inapp-inspector/main/assets/banner_dark.svg" width="100%">
+  </picture>
+</p>
+
+<p align="center">
+  <a href="https://www.npmjs.com/package/react-native-inapp-inspector"><img src="https://img.shields.io/npm/v/react-native-inapp-inspector?color=6366f1&label=npm&logo=npm" alt="npm version" /></a>
+  <a href="https://www.npmjs.com/package/react-native-inapp-inspector"><img src="https://img.shields.io/npm/dm/react-native-inapp-inspector?color=3b82f6&label=downloads" alt="npm downloads" /></a>
+  <a href="https://github.com/vengatmacuser/react-native-inapp-inspector"><img src="https://img.shields.io/github/stars/vengatmacuser/react-native-inapp-inspector?color=f59e0b&label=stars&logo=github" alt="GitHub stars" /></a>
+  <a href="https://github.com/vengatmacuser/react-native-inapp-inspector/blob/main/LICENSE"><img src="https://img.shields.io/badge/license-MIT-green" alt="license" /></a>
+</p>
+
+<p align="center">
+  <img src="https://img.shields.io/badge/Platform-iOS%20%7C%20Android%20%7C%20Expo-0284c7?logo=apple&logoColor=white" alt="platform" />
+  <img src="https://img.shields.io/badge/React%20Native-%E2%89%A50.60-61DAFB?logo=react&logoColor=white" alt="React Native" />
+  <img src="https://img.shields.io/badge/Expo-SDK%2048%2B%20%7C%2050%2B%20%7C%2051%2B%20%7C%2052%2B-000020?logo=expo&logoColor=white" alt="Expo" />
+  <img src="https://img.shields.io/badge/TypeScript-Strict%20Ready-3178c6?logo=typescript&logoColor=white" alt="TypeScript" />
+  <img src="https://img.shields.io/badge/Engine-Hermes%20%7C%20JSC-9333ea" alt="Engine" />
+</p>
+
+La **suite d'outils de débogage intégrée tout-en-un et sans configuration pour React Native & Expo**. Inspectez le trafic réseau HTTP/HTTPS, les flux WebSocket & Socket.IO, les journaux de console avec résolution précise des lignes source via Metro, les différences d'état Redux, le stockage AsyncStorage & MMKV en direct, les notifications push et la télémétrie matérielle directement sur votre appareil, sans aucun câble.
+
+> 🚀 **L'alternative moderne et autonome à Flipper, Charles et Chucker** — fonctionne directement sur simulateurs et appareils réels, sans logiciel compagnon sur PC ni configuration de proxy.
+
+<p align="center">
+  <img src="https://raw.githubusercontent.com/vengatmacuser/react-native-inapp-inspector/main/assets/walkthrough.gif" alt="React Native In-App Inspector Walkthrough" width="360" style="border-radius: 20px; box-shadow: 0 12px 36px rgba(0,0,0,0.5);" />
+</p>
+
+<p align="center">
+  🎬 <b><a href="https://raw.githubusercontent.com/vengatmacuser/react-native-inapp-inspector/main/docs/video_walkthrough.mp4">Regarder la vidéo de démonstration complète (MP4)</a></b> | <b><a href="https://raw.githubusercontent.com/vengatmacuser/react-native-inapp-inspector/main/docs/video_walkthrough.mov">Fichier MOV Original</a></b>
+</p>
+
+---
+
+## ⚡ Comparatif des Fonctionnalités
+
+| Fonctionnalité | **react-native-inapp-inspector** | Flipper | Charles / Proxyman | RN Debugger |
+| :--- | :---: | :---: | :---: | :---: |
+| **Autonome sur l'appareil (Sans PC ni câble)** | ✅ | ❌ | ❌ | ❌ |
+| **0% d'impact CPU en arrière-plan** | ✅ | ❌ | ❌ | ❌ |
+| **Inspecteur réseau HTTP/HTTPS (Fetch / Axios / XHR)** | ✅ | ✅ | ✅ | ✅ |
+| **Cascade de temps et télémétrie P95** | ✅ | ⚠️ | ⚠️ | ❌ |
+| **Copie instantanée cURL et Fetch** | ✅ | ⚠️ | ⚠️ | ❌ |
+| **Inspecteur de paquets WebSocket & Socket.IO** | ✅ | ❌ | ⚠️ | ⚠️ |
+| **Édition du stockage en direct (AsyncStorage & MMKV)** | ✅ (CRUD) | ⚠️ (Lecture seule) | ❌ | ⚠️ |
+| **Historique des notifications push (APNs, FCM)** | ✅ | ❌ | ❌ | ❌ |
+| **Logs symbolisés Metro avec fichier et ligne exacts** | ✅ (Ligne exacte) | ✅ | ❌ | ✅ |
+| **Diffs d'état Redux & chronologie des actions** | ✅ | ⚠️ | ❌ | ✅ |
+| **Protection anti-crash & fil d'Ariane (Breadcrumbs)** | ✅ | ❌ | ❌ | ❌ |
+| **Télémétrie matérielle (RAM, heap, stockage, batterie)**| ✅ | ⚠️ | ❌ | ❌ |
+| **Enregistrement vidéo & capture d'écran (MP4 / GIF)** | ✅ | ❌ | ❌ | ❌ |
+| **25 langues disponibles avec sélecteur Bottom Sheet** | ✅ | ❌ (Anglais seul) | ❌ | ❌ |
+
+---
+
+## 📦 Installation
+
+```bash
+npm install --save-dev react-native-inapp-inspector react-native-svg
+# ou
+yarn add -D react-native-inapp-inspector react-native-svg
+```
+
+#### Configuration iOS CocoaPods
+```bash
+cd ios && pod install && cd ..
+```
+
+### Projets Expo
+```bash
+npx expo install react-native-inapp-inspector react-native-svg
+```
+
+---
+
+## 🚀 Démarrage Rapide
+
+Dans votre fichier d'entrée (`App.tsx` ou `index.js`) :
+
+```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';
+
+// ⚡ Initialisation avant le montage de l'interface
+setupNetworkLogger();
+setupConsoleLogger();
+setupSocketLogger();
+
+if (store) connectReduxStore(store);
+connectAsyncStorage(AsyncStorage);
+
+export default function App() {
+  return (
+    <SafeAreaView style={{ flex: 1 }}>
+      <YourAppRoot />
+
+      {/* Affichage de la bulle flottante en environnement de dev */}
+      {__DEV__ && (
+        <NetworkInspector
+          enabled={true}
+          environment="DEV"
+        />
+      )}
+    </SafeAreaView>
+  );
+}
+```
+
+---
+
+## 🔎 Syntaxe de Recherche Avancée (DevTools)
+
+```text
+method:POST status:200         # Filtrer les requêtes POST avec réponse 200 OK
+url:api.myapp.com -analytics   # Cibler votre API en excluant les trackers
+header:authorization           # Filtrer les requêtes contenant un token
+body:"orderId"                 # Rechercher dans le corps JSON
+page:CheckoutScreen            # Filtrer par écran actif React Navigation
+file:ProfileView.tsx           # Filtrer les logs par fichier source
+```
+
+## 🔍 Mots-Clés de Recherche (Keywords)
+
+Optimisé pour les développeurs en France, au Canada (Québec), en Belgique et en Suisse :
+
+* **Termes recherchés**: Débogueur React Native, inspecteur réseau mobile, outils de développement, capture paquets mobile, journal réseau, analyseur réseau mobile, dépannage mobile React Native.
+* **Alternatives populaires**: Alternative à Flipper, alternative à Charles Proxy, Chucker pour React Native, alternative à Proxyman, alternative à Reactotron.
+* **Fonctionnalités clés**: Analyseur WebSocket, éditeur MMKV, inspecteur AsyncStorage, journalisation des notifications push, capture d'écran vidéo sur appareil.
+
+---
+
+## 📄 Licence
+
+MIT © [vengatmacuser](LICENSE)
+