# React Native In-App Inspector (Boîte à Outils de Débogage Intégrée)

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 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.

React Native In-App Inspector Walkthrough

🎬 Regarder la Démo Vidéo Complète (MP4) | Fichier MOV Original

---

💖 Conçu avec Amour pour Tous les Développeurs qui ont déjà Traqué un Bug à 2h du Matin

« 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é. »

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 — pensez à sponsoriser le projet. 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. ☕✨

--- ## ⚡ Comparaison avec les Autres Outils | Fonctionnalité | **react-native-inapp-inspector** | Flipper | Charles / Proxyman | RN Debugger | | :--- | :---: | :---: | :---: | :---: | | **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)** | ✅ | ✅ | ✅ | ✅ | | **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 ``` --- ## 📦 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 ``` --- ## 🚀 Démarrage Rapide ```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__ && ( )} ); } ```