react-native-inapp-inspector 2.5.0 → 2.5.2

package/README.es.md

@@ -1,3 +1,9 @@
+<p align="center">
+  <a href="https://github.com/vengatmacuser/react-native-inapp-inspector">
+    <img src="https://raw.githubusercontent.com/vengatmacuser/react-native-inapp-inspector/main/assets/inapp_inspector_icon.gif" alt="React Native In-App Inspector Icon" width="120" height="120" style="border-radius: 28px; box-shadow: 0 10px 30px rgba(99, 102, 241, 0.45);" />
+  </a>
+</p>
+
 # React Native In-App Inspector (Inspector de Depuración en la App)
 
 <p align="center">
@@ -27,6 +33,7 @@
   <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>
+  <a href="https://github.com/sponsors/vengatmacuser"><img src="https://img.shields.io/badge/sponsor-GitHub%20Sponsors-ea4aaa?logo=githubsponsors&logoColor=white" alt="sponsor" /></a>
 </p>
 
 <p align="center">
@@ -37,7 +44,7 @@
   <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.
+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 con estudio de edición integrado 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.
 
@@ -51,6 +58,27 @@ El **conjunto de herramientas de depuración todo en uno y sin configuración pa
 
 ---
 
+<table align="center" width="100%">
+  <tr>
+    <td align="center" style="padding: 24px; background: linear-gradient(135deg, rgba(236,72,153,0.1), rgba(99,102,241,0.1)); border-radius: 16px; border: 1px solid rgba(236,72,153,0.35);">
+      <h3 align="center">💖 Hecho con Amor para Cada Desarrollador que Alguna Vez Persiguió un Bug a las 2 AM</h3>
+      <p align="center">
+        <i>“Creamos react-native-inapp-inspector porque conocemos de primera mano el dolor de los cables enredados, los puertos de depuración caídos y los errores inexplicables en producción. Dedicamos innumerables noches de desvelo y pasión para que cada desarrollador móvil y tester del mundo pueda depurar con total libertad, fluidez y alegría.”</i>
+      </p>
+      <p align="center">
+        Si esta herramienta te ahorró horas de frustración, te ayudó a lanzar una actualización a tiempo o hizo tu trabajo diario más ligero — <b>por favor considera patrocinar el proyecto</b>. Una pequeña taza de café o un patrocinio mensual marca una enorme diferencia y mantiene vivo el desarrollo de código abierto independiente. ☕✨
+      </p>
+      <p align="center">
+        <a href="https://github.com/sponsors/vengatmacuser">
+          <img src="https://img.shields.io/badge/Sponsor%20%40vengatmacuser-Patrocinar%20en%20GitHub%20Sponsors-ea4aaa?style=for-the-badge&logo=githubsponsors&logoColor=white" alt="Sponsor on GitHub Sponsors" />
+        </a>
+      </p>
+    </td>
+  </tr>
+</table>
+
+---
+
 ## ⚡ Comparación con Otras Herramientas
 
 | Característica | **react-native-inapp-inspector** | Flipper | Charles / Proxyman | RN Debugger |
@@ -62,31 +90,130 @@ El **conjunto de herramientas de depuración todo en uno y sin configuración pa
 | **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)**| ✅ | ❌ | ❌ | ❌ |
+| **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) | ❌ | ❌ |
+| **Rastreador de eventos de analítica (Firebase, Mixpanel)** | ✅ | ❌ | ❌ | ❌ |
+| **Protección contra cierres y rastro de migas (Breadcrumbs)** | ✅ | ❌ | ❌ | ❌ |
+| **Telemetría de hardware (RAM, heap, disco, batería, FPS)** | ✅ | ⚠️ | ❌ | ❌ |
+| **Captura y edición de medios en la app (Crop, Video Trim, Badges)** | ✅ (Estudio completo) | ❌ | ❌ | ❌ |
+| **Botón flotante arrastrable y modo transparente (Peek)** | ✅ (0.05 - 1.0) | ❌ | ❌ | ❌ |
+| **Gestión de módulos remota vía Firebase Remote Config** | ✅ | ❌ | ❌ | ❌ |
+| **25 idiomas con selector en hoja inferior (Bottom Sheet)** | ✅ | ❌ (Solo inglés) | ❌ | ❌ |
+| **Expo (Bare / Managed) & React Native CLI** | ✅ | ⚠️ | ⚠️ | ⚠️ |
+
+---
+
+## ✨ Características y Módulos Principales
+
+### 🌐 1. Inspector de Red y Cascada de Tiempos
+- **Interceptación Universal HTTP/HTTPS**: Compatible automáticamente con `fetch`, instancias de Axios y `XMLHttpRequest`.
+- **Desglose de Latencia**: Barras proporcionales de cascada, clasificación de velocidad (Rápido `<200ms`, Moderado `200-800ms`, Lento `>800ms`).
+- **Barra de Telemetría**: Tasa de éxito en tiempo real (%), Latencia promedio (ms) y Latencia P95 (ms).
+- **Visor de Carga Útil**: Árbol JSON formateado, vista sin formato (raw), encabezados, parámetros de consulta y origen del llamador.
+- **Exportación Rápida**: Copia en un toque como comando **cURL**, fragmento **Fetch** o informe resumido.
+
+### ⚡ 2. Inspector en Tiempo Real de WebSocket y Socket.IO
+- **Cobertura Completa**: Compatible con WebSocket nativo (`ws://`, `wss://`) y Socket.IO (`v2`, `v3`, `v4`).
+- **Línea de Tiempo Bidireccional**: Rastreo de paquetes (⬆️ Enviado, ⬇️ Recibido) con marcas de tiempo de alta precisión.
+- **Detección de Tipos**: Texto, JSON, tamaño binario (ArrayBuffer) y latidos Ping/Pong.
+- **Metadatos de Conexión**: Estado de conexión, parámetros de handshake, transporte (websocket/polling) y reconexiones.
+
+### 💾 3. Gestor de Almacenamiento (AsyncStorage y MMKV)
+- **Interfaz Unificada**: Visor interactivo para `@react-native-async-storage/async-storage` y `react-native-mmkv`.
+- **Operaciones CRUD en Vivo**: Lee, busca, crea, edita y elimina claves de almacenamiento directamente en la pantalla.
+- **Tipado Inteligente**: Distingue automáticamente objetos JSON, arreglos, booleanos, números y cadenas.
+
+### 🔔 4. Registro de Notificaciones Push
+- **Múltiples Proveedores**: Registra notificaciones de FCM, APNs, Salesforce Marketing Cloud, OneSignal y Notifee.
+- **Estado de la App**: Identifica si se recibió en Primer Plano (**Foreground**), Segundo Plano (**Background**) o desde estado Cerrado (**Killed**).
+- **Inspección de Payload**: Parámetros de datos, enlaces profundos (deep-links), títulos, cuerpos e IDs de canal.
+
+### 🪵 5. Registrador de Consola y Simbolización Metro
+- **Línea Exacta de Código**: Intercepta `console.log`, `warn` y `error`, resolviendo nombres de archivo y líneas reales mediante Metro (`HomeScreen.tsx:42:15`).
+- **Desglose de Argumentos**: Inspecciona cada argumento de forma individual con identificación de tipo.
+- **Pila de Llamadas y Errores**: Visualización estructurada de frames y trazas de error nativas.
+- **Agrupación Inteligente**: Contador de repeticiones (`×N`) para evitar inundaciones de logs.
+
+### 🔄 6. Diferencias de Estado y Acciones Redux
+- **Integración con Redux Toolkit**: Compatible con Redux Store, RTK Query y `redux-persist`.
+- **Línea de Tiempo de Acciones**: Registro cronológico de acciones despachadas con duración y payload.
+- **Diff Visual de Estados**: Código de colores para cambios (**Verde** para adiciones, **Ámbar** para cambios, **Rojo** para eliminaciones).
+
+### 📊 7. Rastreador de Eventos de Analítica
+- **Integración con Firebase Analytics**: Intercepta automáticamente `logEvent`, `logScreenView`, `setUserProperties` y `setUserId`.
+- **Arquitectura Extensible**: Compatible con Google Analytics 4, Mixpanel, Segment y Amplitude.
+- **Inspección de Parámetros**: Revisa parámetros de eventos, propiedades de usuario y marcas de tiempo.
+
+### 🛡️ 8. Protección contra Cierres y Límite de Errores Global
+- **Micro-UI Aislada**: El inspector no afecta ni detiene la aplicación principal en caso de error.
+- **Captura Global de Errores**: Maneja excepciones no controladas de React con opción de recuperación interactiva.
+- **Rastro de Migas (Breadcrumbs)**: Rastrea navegación previa, llamadas de red y acciones Redux antes de un error.
+
+### 📱 9. Telemetría de Hardware Nativo, RAM y Rendimiento
+- **Métricas de Sistema**: Memoria RAM total y disponible, Heap nativo, espacio de disco, batería y arquitectura CPU.
+- **Contador FPS en Tiempo Real**: Medición continua de fotogramas por segundo.
+- **Auto-Limpieza por Advertencia de Memoria**: Libera memoria automáticamente si el sistema operativo envía alertas.
+- **Gesto de Agitar**: Agita el dispositivo físico o pulsa `Ctrl+Cmd+Z` / `Cmd+M` para abrir el inspector.
+
+### 📸 10. Captura de Medios Nativa y Estudio de Edición en la App
+- **Captura en Dispositivo**: Captura capturas de pantalla en alta resolución, grabaciones de video MP4 y GIFs animados.
+- **Galería de Medios Completa**: Explora, filtra (Fotos, Videos, GIFs), selecciona por lotes y copia rutas URI.
+- **Estudio de Edición de Foto y Video**:
+  - **Recorte y Redimensionado**: Recorta a proporciones estándar (Cuadrado 1:1, 4:3, 16:9) y reduce resolución para subidas ligeras.
+  - **Edición de Video y Audio**: Ajusta puntos de inicio/fin, modifica velocidad de reproducción (0.5× – 2.0×) o silencia el audio.
+  - **Extracción de Fotogramas**: Extrae imágenes PNG en alta definición desde cualquier video con un solo toque.
+- **Marcadores de Control de Calidad (QA)**:
+  - **Cuadrícula 3×3 de Instagram**: Activa líneas guía para verificar alineaciones con precisión de píxel.
+  - **Insignias de Pasos Numerados**: Coloca números secuenciales (`1`, `2`, `3`...) para documentar pasos de reproducción de bugs.
+  - **Etiquetas de Bugs y Notas**: Agrega sellos gráficos de errores (`🐛`), notas (`📝`) y advertencias.
+  - **Texto y Marca de Agua QA**: Escribe anotaciones personalizadas y activa marcas de agua con modelo y SO del dispositivo.
+- **Importador de Galería**: Importa fotos o videos de la fototeca del dispositivo para editarlos y reportarlos.
+
+### 🎛️ 11. Botón Flotante Draggable (FAB) y Opacidad Transparente (Modo Peek)
+- **Lanzador Flotante**: Burbuja deslizable a cualquier esquina con indicadores de actividad y contador.
+- **Zona de Cierre Inferior**: Arrastra hacia la zona inferior brillante para ocultar el botón limpiamente.
+- **Modo Peek Transparente**: Ajusta la opacidad de 0.05 a 1.0 para interactuar con la app mientras monitoreas datos y tráfico.
+
+### ☁️ 12. Gestión de Módulos con Firebase Remote Config
+- **Banderas de Funcionalidad Remota**: Habilita o deshabilita pestañas del inspector en producción/pruebas desde la nube sin necesidad de actualizar la app.
+
+### 🌍 13. 25 Idiomas Globales y Selector Interactivo en Hoja Inferior
+- **25 Idiomas Soportados**: Español, Inglés, Francés, Alemán, Italiano, Portugués, Ruso, Japonés, Coreano, Chino Simplificado, Árabe, Hindi, Turco, Holandés, Polaco, Indonesio, Vietnamita, Bengalí, Tamil, Telugu, Maratí, Guyaratí, Canarés, Malabar y Panyabí.
+- **Selector Modal en Hoja Inferior**: Pulsa `[ 🌐 ES ▾ ]` para abrir la hoja interactiva con banderas y búsqueda instantánea.
+
+---
+
+## 🔎 Sintaxis de Búsqueda Estilo DevTools
+
+```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
+```
 
 ---
 
 ## 📦 Instalación
 
-### Proyectos React Native
 ```bash
 npm install --save-dev react-native-inapp-inspector react-native-svg
-# o
+# or
 yarn add -D react-native-inapp-inspector react-native-svg
+# or
+pnpm add -D react-native-inapp-inspector react-native-svg
 ```
 
-#### Configuración de CocoaPods en iOS
+#### iOS CocoaPods
 ```bash
 cd ios && pod install && cd ..
 ```
 
-### Proyectos Expo
+### Expo
 ```bash
 npx expo install react-native-inapp-inspector react-native-svg
 ```
@@ -95,8 +222,6 @@ 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';
@@ -110,7 +235,7 @@ import NetworkInspector, {
 import AsyncStorage from '@react-native-async-storage/async-storage';
 import { store } from './src/store';
 
-// ⚡ Inicializa los registradores antes del renderizado de componentes
+// ⚡ Initialize interceptors before app mount
 setupNetworkLogger();
 setupConsoleLogger();
 setupSocketLogger();
@@ -123,7 +248,7 @@ export default function App() {
     <SafeAreaView style={{ flex: 1 }}>
       <YourAppRoot />
 
-      {/* Activa el inspector flotante en desarrollo */}
+      {/* Mount In-App Inspector in DEV builds */}
       {__DEV__ && (
         <NetworkInspector
           enabled={true}
@@ -134,31 +259,3 @@ export default function App() {
   );
 }
 ```
-
----
-
-## 🔎 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

@@ -1,4 +1,10 @@
-# React Native In-App Inspector (Inspecteur et Débogueur Intégré)
+<p align="center">
+  <a href="https://github.com/vengatmacuser/react-native-inapp-inspector">
+    <img src="https://raw.githubusercontent.com/vengatmacuser/react-native-inapp-inspector/main/assets/inapp_inspector_icon.gif" alt="React Native In-App Inspector Icon" width="120" height="120" style="border-radius: 28px; box-shadow: 0 10px 30px rgba(99, 102, 241, 0.45);" />
+  </a>
+</p>
+
+# React Native In-App Inspector (Boîte à Outils de Débogage Intégrée)
 
 <p align="center">
   <b><a href="./README.md">English</a></b> |
@@ -27,6 +33,7 @@
   <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>
+  <a href="https://github.com/sponsors/vengatmacuser"><img src="https://img.shields.io/badge/sponsor-GitHub%20Sponsors-ea4aaa?logo=githubsponsors&logoColor=white" alt="sponsor" /></a>
 </p>
 
 <p align="center">
@@ -37,38 +44,157 @@
   <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.
+La **boîte à outils de débogage tout-en-un et sans configuration pour React Native & Expo**. Inspectez le trafic réseau HTTP/HTTPS, les flux temps réel WebSocket & Socket.IO, les logs de console avec numéros de lignes précis via Metro, les diffs d'état Redux, le stockage AsyncStorage & MMKV, les notifications push, les métriques matérielles et réalisez des captures ou enregistrements vidéo avec studio d'édition complet directement sur votre téléphone sans 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.
+> 🚀 **L'alternative moderne et légère à Flipper, Charles, Proxyman et Chucker** — fonctionne en totale autonomie sur l'appareil, en versions de test (APK/TestFlight) et sans câble USB.
 
 <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>
+  🎬 <b><a href="https://raw.githubusercontent.com/vengatmacuser/react-native-inapp-inspector/main/docs/video_walkthrough.mp4">Regarder la Démo Vidéo 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
+<table align="center" width="100%">
+  <tr>
+    <td align="center" style="padding: 24px; background: linear-gradient(135deg, rgba(236,72,153,0.1), rgba(99,102,241,0.1)); border-radius: 16px; border: 1px solid rgba(236,72,153,0.35);">
+      <h3 align="center">💖 Conçu avec Amour pour Tous les Développeurs qui ont déjà Traqué un Bug à 2h du Matin</h3>
+      <p align="center">
+        <i>« Nous avons créé react-native-inapp-inspector parce que nous connaissons parfaitement la douleur des câbles emmêlés, des proxies déconnectés et des plantages inexplicables sur les builds de test. Nous y avons mis des nuits blanches et toute notre passion pour que chaque ingénieur mobile et testeur QA dans le monde puisse déboguer en toute liberté, fluidité et sérénité. »</i>
+      </p>
+      <p align="center">
+        Si cet outil vous a fait gagner de précieuses heures, vous a aidé à livrer une mise en production cruciale à temps, ou a simplifié votre quotidien de développement — <b>pensez à sponsoriser le projet</b>. Un simple café ou un soutien mensuel fait toute la différence et permet de maintenir ce projet open source indépendant et gratuit pour tous. ☕✨
+      </p>
+      <p align="center">
+        <a href="https://github.com/sponsors/vengatmacuser">
+          <img src="https://img.shields.io/badge/Sponsor%20%40vengatmacuser-Soutenir%20sur%20GitHub%20Sponsors-ea4aaa?style=for-the-badge&logo=githubsponsors&logoColor=white" alt="Sponsor on GitHub Sponsors" />
+        </a>
+      </p>
+    </td>
+  </tr>
+</table>
+
+---
+
+## ⚡ Comparaison avec les Autres Outils
 
 | 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** | ✅ | ❌ | ❌ | ❌ |
+| **Autonome sur l’appareil (Pas de PC ni de câble)** | ✅ | ❌ | ❌ | ❌ |
+| **Zéro rendu en veille (0% 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) | ❌ | ❌ |
+| **Graphique en cascade & Latence P95** | ✅ | ⚠️ | ⚠️ | ❌ |
+| **Export instantané de snippets cURL et Fetch** | ✅ | ⚠️ | ⚠️ | ❌ |
+| **Moniteur bidirectionnel WebSocket & Socket.IO** | ✅ | ❌ | ⚠️ | ⚠️ |
+| **Éditeur de stockage en direct (AsyncStorage & MMKV)** | ✅ (CRUD) | ⚠️ (Lecture seule) | ❌ | ⚠️ |
+| **Enregistreur de notifications push (APNs, FCM, Salesforce)** | ✅ | ❌ | ❌ | ❌ |
+| **Logs avec vrais numéros de lignes via Metro** | ✅ (Ligne exacte) | ✅ | ❌ | ✅ |
+| **Diffs d’état Redux & Chronologie des actions** | ✅ | ⚠️ | ❌ | ✅ |
+| **Suivi des événements analytiques (Firebase, Mixpanel)** | ✅ | ❌ | ❌ | ❌ |
+| **Protection anti-crash & Fil d’Ariane (Breadcrumbs)** | ✅ | ❌ | ❌ | ❌ |
+| **Télémétrie matérielle (RAM, tas natif, disque, batterie, FPS)** | ✅ | ⚠️ | ❌ | ❌ |
+| **Capture multimédia & Studio d’édition (Crop, Video Trim, Badges)** | ✅ (Studio complet) | ❌ | ❌ | ❌ |
+| **Bouton flottant déplaçable & Mode transparence (Peek)** | ✅ (0.05 - 1.0) | ❌ | ❌ | ❌ |
+| **Gestion à distance des modules via Firebase Remote Config** | ✅ | ❌ | ❌ | ❌ |
+| **25 langues avec sélecteur en feuille inférieure (Bottom Sheet)** | ✅ | ❌ (Anglais uniquement) | ❌ | ❌ |
+| **Expo (Bare / Managed) & React Native CLI** | ✅ | ⚠️ | ⚠️ | ⚠️ |
+
+---
+
+## ✨ Modules et Fonctionnalités Clés
+
+### 🌐 1. Inspecteur Réseau & Graphique en Cascade des Latences
+- **Interception Universelle HTTP/HTTPS**: Prise en charge automatique de `fetch`, Axios et `XMLHttpRequest`.
+- **Détail des Latences**: Barres en cascade proportionnelles, évaluation de la vitesse (Rapide `<200ms`, Modéré `200-800ms`, Lent `>800ms`).
+- **Bandeau Télémetrique**: Taux de réussite (%), Latence moyenne (ms) et Latence P95 (ms) en direct.
+- **Visualiseur de Données**: Arbre JSON stylisé, texte brut, en-têtes requête/réponse, paramètres et fichier appelant.
+- **Export en Un Clic**: Copiez sous forme de commande **cURL**, snippet **Fetch** ou rapport synthétique.
+
+### ⚡ 2. Inspecteur de Flux en Temps Réel WebSocket & Socket.IO
+- **Couverture Protocoles Totale**: WebSocket natif (`ws://`, `wss://`) et Socket.IO (`v2`, `v3`, `v4`).
+- **Chronologie Bidirectionnelle**: Suivi des trames (⬆️ Envoyées, ⬇️ Reçues) avec horodatage haute précision.
+- **Détection des Types**: Texte, charges JSON, taille binaire (ArrayBuffer) et battements Ping/Pong.
+- **Métadonnées de Connexion**: État de connexion, paramètres de handshake, transport (websocket/polling) et reconnexions.
+
+### 💾 3. Gestionnaire de Stockage (AsyncStorage & MMKV)
+- **Interface Unifiée**: Compatible avec `@react-native-async-storage/async-storage` et `react-native-mmkv`.
+- **CRUD en Direct dans l'App**: Consultez, recherchez, créez, modifiez et supprimez des clés directement à l'écran.
+- **Typage Intelligent**: Reconnaissance automatique des objets JSON, tableaux, booléens, nombres et chaînes.
+
+### 🔔 4. Enregistreur de Notifications Push
+- **Multi-Fournisseurs**: FCM, APNs, Salesforce Marketing Cloud, OneSignal et Notifee.
+- **Suivi d'État de l'App**: Distingue les réceptions au Premier Plan (**Foreground**), en Arrière-Plan (**Background**) ou après Fermeture (**Killed**).
+- **Inspection des Données**: Paramètres complets, liens profonds (deep-links), titres, corps et identifiants de canaux.
+
+### 🪵 5. Enregistreur de Console & Symbolisation Metro Source-Map
+- **Numéros de Ligne Exacts**: Intercepte `console.log`, `warn` et `error` en affichant le vrai fichier source et la ligne exacte via Metro (`HomeScreen.tsx:42:15`).
+- **Décomposition des Arguments**: Chaque argument est inspecté individuellement avec son type.
+- **Pile d'Appel & Pile d'Erreur**: Cartes structurées avec noms de fonctions, chemins de fichiers et piles d'exceptions.
+- **Regroupement Intelligent**: Regroupe les logs identiques successifs avec un compteur (`×N`).
+
+### 🔄 6. Diffs d'État Redux & Chronologie des Actions
+- **Intégration Redux Toolkit**: Prise en charge fluide de Redux Store, RTK Query et `redux-persist`.
+- **Chronologie des Actions**: Historique ordonné des actions avec temps d'exécution et données transmises.
+- **Diffs Visuels Colorés**: Modifications mises en valeur (**Vert** pour ajouts, **Jaune** pour mises à jour, **Rouge** pour suppressions).
+
+### 📊 7. Suivi des Événements Analytiques
+- **Accroche Automatique Firebase**: Intercepte `logEvent`, `logScreenView`, `setUserProperties` et `setUserId`.
+- **Architecture Modulaire**: Connexion facile à Google Analytics 4, Mixpanel, Segment et Amplitude.
+- **Analyse des Paramètres**: Visualisez les paramètres d'événements, propriétés utilisateurs et horodatages.
+
+### 🛡️ 8. Protection Anti-Crash & Limite Globale d'Erreurs
+- **Micro-UI Isolée**: L'inspecteur fonctionne dans sa propre bulle et ne fera jamais planter l'application hôte.
+- **Limite d'Erreurs React (ErrorBoundary)**: Capture les plantages de rendu React non gérés avec écran de récupération.
+- **Fil d'Ariane (Breadcrumbs)**: Reconstitue les navigations, requêtes réseau et actions Redux précédant une erreur.
+
+### 📱 9. Télémétrie Matérielle Native, RAM & Performances
+- **Métriques Système**: RAM totale et disponible, Tas natif alloué, Espace disque libre, Batterie et architecture CPU.
+- **Compteur FPS en Direct**: Mesure continue du taux de rafraîchissement de l'écran.
+- **Purger sur Alerte Mémoire**: Libère automatiquement la mémoire tampon en cas d'avertissement système.
+- **Geste de Secousse**: Secouez l'appareil ou appuyez sur `Ctrl+Cmd+Z` / `Cmd+M` pour ouvrir l'inspecteur.
+
+### 📸 10. Capture Multimédia Native & Studio d'Édition Intégré
+- **Capture sur l'Appareil**: Réalisez des captures d'écran haute résolution, des vidéos MP4 fluides ou des GIFs animés.
+- **Galerie Multimédia Complète**: Parcourez, filtrez (Photos, Vidéos, GIFs), sélectionnez en lot et copiez les chemins d'accès.
+- **Studio d'Édition Photo & Vidéo**:
+  - **Recadrage & Redimensionnement**: Ratios prédéfinis (Carré 1:1, 4:3, 16:9) et réduction de taille pour des envois rapides.
+  - **Découpage Vidéo & Audio**: Ajustez les points de début/fin, modifiez la vitesse de lecture (0.5× – 2.0×) ou coupez le son.
+  - **Extraction d'Images PNG**: Extrayez instantanément une image PNG haute définition à n'importe quel moment de la vidéo.
+- **Outils d'Annotation et de Rapport QA**:
+  - **Grille 3×3 Style Instagram**: Affichez un quadrillage pour contrôler les alignements au pixel près.
+  - **Badges d'Étapes Numérotées**: Placez des pastilles chiffrées (`1`, `2`, `3`...) pour documenter les étapes de reproduction.
+  - **Tags Bug & Note**: Déposez des symboles visuels de bug (`🐛`), note (`📝`) ou alerte.
+  - **Texte & Filigrane QA**: Rédigez des notes explicatives et activez un filigrane contenant le modèle et l'OS du téléphone.
+- **Importateur de Galerie**: Importez des photos ou vidéos depuis la pellicule du téléphone pour les éditer.
+
+### 🎛️ 11. Bouton Flottant Déplaçable (FAB) & Mode Transparence (Peek Mode)
+- **Lanceur Flottant**: Bulle déplaçable dans tous les coins avec badge de notifications non lues.
+- **Zone de Fermeture Inférieure**: Faites glisser vers la zone lumineuse en bas de l'écran pour fermer proprement.
+- **Mode Transparence**: Réglez l'opacité de 0.05 à 1.0 pour continuer à utiliser l'application tout en observant les logs et le réseau.
+
+### ☁️ 12. Gestion des Modules par Firebase Remote Config
+- **Feature Flags à Distance**: Activez ou désactivez les onglets de l'inspecteur depuis la console Firebase sans déployer de mise à jour.
+
+### 🌍 13. 25 Langues Mondiales & Sélecteur en Feuille Inférieure
+- **25 Langues Supportées**: Français, Anglais, Espagnol, Allemand, Italien, Portugais, Russe, Japonais, Coréen, Chinois, Arabe, Hindi, etc.
+- **Sélecteur Moderne**: Appuyez sur `[ 🌐 FR ▾ ]` dans l'en-tête pour afficher la feuille de choix avec drapeaux et recherche instantanée.
+
+---
+
+## 🔎 Syntaxe de Recherche DevTools
+
+```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
+```
 
 ---
 
@@ -76,16 +202,18 @@ La **suite d'outils de débogage intégrée tout-en-un et sans configuration pou
 
 ```bash
 npm install --save-dev react-native-inapp-inspector react-native-svg
-# ou
+# or
 yarn add -D react-native-inapp-inspector react-native-svg
+# or
+pnpm add -D react-native-inapp-inspector react-native-svg
 ```
 
-#### Configuration iOS CocoaPods
+#### iOS CocoaPods
 ```bash
 cd ios && pod install && cd ..
 ```
 
-### Projets Expo
+### Expo
 ```bash
 npx expo install react-native-inapp-inspector react-native-svg
 ```
@@ -94,8 +222,6 @@ 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';
@@ -109,7 +235,7 @@ import NetworkInspector, {
 import AsyncStorage from '@react-native-async-storage/async-storage';
 import { store } from './src/store';
 
-// ⚡ Initialisation avant le montage de l'interface
+// ⚡ Initialize interceptors before app mount
 setupNetworkLogger();
 setupConsoleLogger();
 setupSocketLogger();
@@ -122,7 +248,7 @@ export default function App() {
     <SafeAreaView style={{ flex: 1 }}>
       <YourAppRoot />
 
-      {/* Affichage de la bulle flottante en environnement de dev */}
+      {/* Mount In-App Inspector in DEV builds */}
       {__DEV__ && (
         <NetworkInspector
           enabled={true}
@@ -133,31 +259,3 @@ export default function App() {
   );
 }
 ```
-
----
-
-## 🔎 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)
-