# React Native In-App Inspector (أداة فحص وتصحيح الأخطاء داخل التطبيق)

**مجموعة أدوات فحص وتصحيح الأخطاء الشاملة داخل التطبيق وبدون أي إعدادات مسبقة لتطبيقات React Native و Expo**. تتبع حركة مرور شبكة HTTP/HTTPS، وتدفقات WebSocket و Socket.IO اللحظية، وسجلات وحدة التحكم مع أرقام الأسطر الدقيقة عبر Metro، وفروقات حالة Redux، والتخزين الحي لـ AsyncStorage و MMKV، والإشعارات اللحظية، ومؤشرات أداء العتاد، والتقاط لقطات الشاشة أو تسجيلات الفيديو مع استوديو تحرير متكامل مباشرة على هاتفك وبدون أي كابلات. > 🚀 **البديل الحديث وخفيف الوزن لأدوات Flipper و Charles و Proxyman و Chucker** — يعمل بشكل مستقل تماماً على الجهاز، وفي إصدارات الاختبار (APK/TestFlight) وبدون الحاجة لربط الجهاز بالكمبيوتر عبر كابل.

React Native In-App Inspector Walkthrough

🎬 مشاهدة فيديو العرض التوضيحي الكامل (MP4) | ملف MOV الأصلي

---

💖 صُنع بحب لكل مبرمج سهر حتى الثانية صباحاً يطارد خطأً برمجياً غامضاً

«قمنا بابتكار react-native-inapp-inspector لأننا ندرك تماماً معاناة الكابلات المتشابكة، والمنافذ المعطلة، والانهيارات المفاجئة في نسخ الاختبار. لقد سكبنا ليالي لا تحصى من العمل المتواصل وشغفاً لا ينتهي حتى يتمكن كل مهندس تطبيقات ومختبر جودة في العالم من تصحيح الأخطاء بحرية وسلاسة تامة.»

إذا كانت هذه الأداة قد وفرت عليك ساعات من الإحباط والجهد، أو ساعدتك في إطلاق تطبيقك في الموعد المحدد — فنرجو منك التكرم برعاية ودعم هذا المشروع. فنجان قهوة بسيط أو رعاية شهرية يمثلان فارقاً هائلاً ويضمنان استمرار هذا العمل مفتوح المصدر ومتاحاً للجميع مجاناً. ☕✨

--- ## ⚡ المقارنة مع الأدوات الأخرى | الميزة | **react-native-inapp-inspector** | Flipper | Charles / Proxyman | RN Debugger | | :--- | :---: | :---: | :---: | :---: | | **يعمل مستقلاً على الجهاز (بدون كمبيوتر أو كابلات)** | ✅ | ❌ | ❌ | ❌ | | **استهلاك صفري عند الخمول (0% معالج في الخلفية)** | ✅ | ❌ | ❌ | ❌ | | **فحص شبكة HTTP/HTTPS (Fetch / Axios / XHR)** | ✅ | ✅ | ✅ | ✅ | | **مخطط زمن الاستجابة والنسبة المئوية P95** | ✅ | ⚠️ | ⚠️ | ❌ | | **نسخ فوري لأوامر cURL وشفرات Fetch** | ✅ | ⚠️ | ⚠️ | ❌ | | **مراقبة ثنائية الاتجاه لـ WebSocket و Socket.IO** | ✅ | ❌ | ⚠️ | ⚠️ | | **محرر التخزين الحي (AsyncStorage و MMKV)** | ✅ (CRUD كامل) | ⚠️ (قراءة فقط) | ❌ | ⚠️ | | **مسجل الإشعارات اللحظية (APNs, FCM, Salesforce)** | ✅ | ❌ | ❌ | ❌ | | **سجلات مع أرقام الأسطر الحقيقية عبر Metro** | ✅ (السطر الدقيق) | ✅ | ❌ | ✅ | | **فروقات حالة Redux والجدول الزمني للإجراءات** | ✅ | ⚠️ | ❌ | ✅ | | **متتبع أحداث التحليلات (Firebase, Mixpanel)** | ✅ | ❌ | ❌ | ❌ | | **الحماية من الانهيار ومسار التتبع (Breadcrumbs)** | ✅ | ❌ | ❌ | ❌ | | **القياس عن بُعد للعتاد (الذاكرة، القرص، البطارية، FPS)** | ✅ | ⚠️ | ❌ | ❌ | | **التقاط الوسائط واستوديو التحرير (قص، تقليم فيديو، شارات)** | ✅ (استوديو متكامل) | ❌ | ❌ | ❌ | | **زر عائم قابل للسحب ووضع الشفافية (Peek Mode)** | ✅ (0.05 - 1.0) | ❌ | ❌ | ❌ | | **إدارة الوحدات عن بعد عبر Firebase Remote Config** | ✅ | ❌ | ❌ | ❌ | | **25 لغة مع لوحة اختيار سفلية تفاعلية (Bottom Sheet)** | ✅ | ❌ (الإنجليزية فقط) | ❌ | ❌ | | **Expo (Bare / Managed) و React Native CLI** | ✅ | ⚠️ | ⚠️ | ⚠️ | --- ## ✨ أبرز الوحدات والمميزات ### 🌐 1. فاحص الشبكة ومخطط زمن الاستجابة التنازلي - **اعتراض شامل لـ HTTP/HTTPS**: يدعم تلقائياً `fetch`، ومثيلات Axios، و `XMLHttpRequest`. - **تفصيل زمن الاستجابة**: أشرطة شلالية متناسبة وتصنيف للسرعة (سريع `<200ms`، متوسط `200-800ms`، بطيء `>800ms`). - **شريط القياس اللحظي**: نسبة النجاح (%)، متوسط زمن الاستجابة (ms)، وزمن الاستجابة P95 (ms). - **عارض البيانات**: شجرة JSON منسقة، وعرض البيانات الخام، وترويسات الطلب والاستجابة، والمعلمات، ومصدر الاستدعاء. - **تصدير بنقرة واحدة**: نسخ فوري كأمر **cURL**، أو شفرة **Fetch**، أو تقرير ملخص. ### ⚡ 2. فاحص تدفقات WebSocket و Socket.IO في الوقت الفعلي - **تغطية كاملة للبروتوكولات**: دعم كامل لـ WebSocket الأصلي (`ws://`, `wss://`) و Socket.IO (`v2`, `v3`, `v4`). - **جدول زمني ثنائي الاتجاه**: تتبع الحزم (⬆️ المرسلة، ⬇️ المستقبلة) مع طوابع زمنية عالية الدقة. - **تحديد أنواع الحزم**: نصوص، بيانات JSON، أحجام البيانات الثنائية (ArrayBuffer)، ونبضات Ping/Pong. - **بيانات الاتصال الوصفية**: حالة الاتصال، معلمات المصافحة، نوع النقل (websocket/polling)، وأحداث إعادة الاتصال. ### 💾 3. مدير التخزين المحلي (AsyncStorage و MMKV) - **واجهة تخزين موحدة**: دعم `@react-native-async-storage/async-storage` و `react-native-mmkv`. - **عمليات CRUD حية داخل التطبيق**: استعراض، والبحث، وإنشاء، وتعديل، وحذف المفاتيح مباشرة من شاشة الهاتف. - **تحليل ذكي للأنواع**: التعرف التلقائي على كائنات JSON، والمصفوفات، والقيم المنطقية، والأرقام، والنصوص. ### 🔔 4. مسجل الإشعارات اللحظية (Push Notifications) - **دعم موفرين متعددين**: FCM، و APNs، و Salesforce Marketing Cloud، و OneSignal، و Notifee. - **تتبع حالة التطبيق**: يحدد ما إذا تم استلام الإشعار في الواجهة (**Foreground**)، أو الخلفية (**Background**)، أو عند فتح التطبيق من حالة الإغلاق (**Killed**). - **فحص البيانات المرفقة**: فحص المعلمات، والروابط العميقة (Deep Links)، والعناوين، والنصوص، ومعرفات القنوات. ### 🪵 5. مسجل وحدة التحكم ومطابقة خرائط المصدر (Metro Symbolication) - **أرقام أسطر دقيقة**: يعترض `console.log` و `warn` و `error` ويعرض الملف الحقيقي ورقم السطر عبر Metro (`HomeScreen.tsx:42:15`). - **تفصيل المعاملات**: فحص كل معامل تم تمريره على حدة مع تحديد نوعه. - **تتبع الاستدعاءات والأخطاء**: بطاقات هيكلية لأسماء الدوال والملفات ومسارات تتبع الأخطاء. - **تجميع التكرارات**: طي المخرجات المكررة المتتالية مع عداد (`×N`). ### 🔄 6. تتبع تغييرات حالة Redux والجدول الزمني للإجراءات - **تكامل تام مع Redux Toolkit**: دعم Redux Store، و RTK Query، و `redux-persist`. - **الجدول الزمني للإجراءات**: سجل زمني للإجراءات المرسلة مع مدة التنفيذ والبيانات المرفقة. - **مقارنة مرئية ملونة للحالات**: تمييز التغييرات بالألوان (**الأخضر** للإضافة، **الأصفر** للتعديل، **الأحمر** للحذف). ### 📊 7. متتبع أحداث التحليلات (Analytics Tracker) - **تتبع تلقائي لـ Firebase Analytics**: اعتراض تلقائي لـ `logEvent`، و `logScreenView`، و `setUserProperties`، و `setUserId`. - **بنية معمارية قابلة للتوسع**: دعم سهل لـ Google Analytics 4 و Mixpanel و Segment و Amplitude. - **فحص المعلمات**: استعراض معلمات الأحداث، وخصائص المستخدم، والطوابع الزمنية. ### 🛡️ 8. الحماية من الانهيار وحاجز الأخطاء الشامل (Error Boundary) - **بيئة معزولة بالكامل**: يعمل الفاحص في بيئة معزولة تضمن عدم التسبب في انهيار التطبيق المضيف أبداً. - **حاجز أخطاء شامل**: التقاط أخطاء العرض غير المعالجة في React مع شاشة استرداد تفاعلية. - **مسار التتبع (Breadcrumbs)**: استعراض التنقلات السابقة وطلبات الشبكة وإجراءات Redux التي سبقت حدوث الخطأ. ### 📱 9. القياس عن بعد للأجهزة والذاكرة (RAM) ومعدل الإطارات (FPS) - **مؤشرات النظام**: إجمالي والذاكرة المتاحة، وذاكرة التخزين المؤقت، والمساحة التخزينية الخالية، والبطارية، ومعمارية المعالج. - **عداد FPS في الوقت الفعلي**: مراقبة مستمرة لمعدل تحديث الشاشة. - **تنظيف تلقائي عند انخفاض الذاكرة**: تحرير السجلات المحفوظة تلقائياً عند تلقي تحذيرات النظام. - **إيماءة الهز**: هز الجهاز الفعلي أو الضغط على `Ctrl+Cmd+Z` / `Cmd+M` لفتح الفاحص. ### 📸 10. التقاط الوسائط الأصلي واستوديو التحرير داخل التطبيق - **التقاط مباشر على الجهاز**: إنشاء لقطات شاشة عالية الدقة، وتسجيلات فيديو MP4 سلسة، وصور GIF متحركة. - **معرض وسائط متكامل**: تصفح، وتصفية (صور، فيديو، GIF)، وحذف مجمع، ونسخ مسارات URI. - **استوديو تحرير الصور والفيديو**: - **القص وتغيير الحجم**: أبعاد قياسية (مربع 1:1، 4:3، 16:9) وتصغير الدقة لتقليل الحجم قبل الرفع. - **تقليم الفيديو والصوت**: ضبط نقاط البداية/النهاية، وتعديل سرعة التشغيل (0.5× – 2.0×)، أو كتم الصوت. - **استخراج إطارات PNG**: استخراج لقطات PNG عالية الدقة من أي فيديو بنقرة واحدة. - **أدوات فحص الجودة والتأشير على الأخطاء**: - **شبكة 3×3 لضبط المحاذاة**: شبكة إرشادية لفحص دقة التصميم بالبكسل. - **شارات خطوات مرقمة**: وضع شارات مرقمة (`1`، `2`، `3`...) لتوثيق خطوات تكرار الخطأ. - **وسوم للأخطاء والملاحظات**: إضافة علامات الأخطاء (`🐛`) والملاحظات (`📝`) والتنبيهات. - **نصوص وعلامة مائية لـ QA**: كتابة ملاحظات توضيحية وإضافة علامة مائية بموديل الجهاز وإصدار النظام. - **استيراد من ألبوم الصور**: استيراد صور أو مقاطع فيديو من مكتبة صور الجهاز للتحرير والفحص. ### 🎛️ 11. زر عائم قابل للسحب (FAB) ووضع الشفافية التفاعلي (Peek Mode) - **زر تشغيل عائم**: فقاعة قابلة للسحب لأي زاوية مع مؤشر وعداد للإشعارات غير المقروءة. - **منطقة إخفاء سفلية**: اسحب الزر نحو المنطقة المضيئة أسفل الشاشة لإخفائه بسلاسة. - **وضع الشفافية (Peek Mode)**: تعديل الشفافية من 0.05 إلى 1.0 للتفاعل مع التطبيق أثناء مراقبة تدفق البيانات والشبكة. ### ☁️ 12. إدارة الوحدات عبر Firebase Remote Config - **أعلام الميزات عن بُعد**: تفعيل أو تعطيل تبويبات الفاحص في بيئات الإنتاج أو الاختبار سحابياً بدون إعادة إصدار التطبيق. ### 🌍 13. دعم 25 لغة عالمية مع لوحة اختيار سفلية تفاعلية - **25 لغة مدعومة**: العربية، الإنجليزية، الإسبانية، الفرنسية، الألمانية، الإيطالية، البرتغالية، الروسية، اليابانية، الكورية، الصينية، الهندية وغيرها. - **لوحة اختيار سفلية**: اضغط على `[ 🌐 AR ▾ ]` في شريط الأدوات لفتح لوحة الاختيار المزودة بالأعلام والبحث الفوري. --- ## 🔎 صيغ البحث المتقدمة في 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 ``` --- ## 📦 التثبيت ```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 ``` --- ## 🚀 البدء السريع ```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__ && ( )} ); } ```