react-native-inapp-inspector 2.5.0 → 2.5.2

package/README.ar.md

@@ -1,4 +1,10 @@
-# React Native In-App Inspector (مصحح الأخطاء وفاحص الشبكة داخل التطبيق)
+<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 (أداة فحص وتصحيح الأخطاء داخل التطبيق)
 
 <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>
 
-مجموعة أدوات فحص وتصحيح أخطاء متكاملة لتطبيقات **React Native و Expo** بدون الحاجة لأي إعدادات مسبقة. تتيح لك مراقبة حركة شبكة HTTP/HTTPS، وتدفقات WebSocket و Socket.IO في الوقت الفعلي، وسجلات وحدة التحكم مع مطابقة أسطر الكود الحقيقية عبر Metro، وتغييرات حالة Redux، وتعديل تخزين AsyncStorage و MMKV المباشر، وتتبع الإشعارات، وقياس استهلاك الذاكرة والبطارية، وتسجيل الشاشة فيديو من هاتفك مباشرة ودون الحاجة لأي كابلات.
+**مجموعة أدوات فحص وتصحيح الأخطاء الشاملة داخل التطبيق وبدون أي إعدادات مسبقة لتطبيقات React Native و Expo**. تتبع حركة مرور شبكة HTTP/HTTPS، وتدفقات WebSocket و Socket.IO اللحظية، وسجلات وحدة التحكم مع أرقام الأسطر الدقيقة عبر Metro، وفروقات حالة Redux، والتخزين الحي لـ AsyncStorage و MMKV، والإشعارات اللحظية، ومؤشرات أداء العتاد، والتقاط لقطات الشاشة أو تسجيلات الفيديو مع استوديو تحرير متكامل مباشرة على هاتفك وبدون أي كابلات.
 
-> 🚀 **البديل العصري والأخف لأدوات Flipper و Charles و Proxyman و Chucker** — يعمل بشكل مستقل على الأجهزة الحقيقية ونسخ الاختبار (APK / TestFlight) بدون برامج كمبيوتر مساعدة.
+> 🚀 **البديل الحديث وخفيف الوزن لأدوات 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>
+  🎬 <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>
 
 ---
 
-## ⚡ مقارنة الميزات
+<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">💖 صُنع بحب لكل مبرمج سهر حتى الثانية صباحاً يطارد خطأً برمجياً غامضاً</h3>
+      <p align="center">
+        <i>«قمنا بابتكار react-native-inapp-inspector لأننا ندرك تماماً معاناة الكابلات المتشابكة، والمنافذ المعطلة، والانهيارات المفاجئة في نسخ الاختبار. لقد سكبنا ليالي لا تحصى من العمل المتواصل وشغفاً لا ينتهي حتى يتمكن كل مهندس تطبيقات ومختبر جودة في العالم من تصحيح الأخطاء بحرية وسلاسة تامة.»</i>
+      </p>
+      <p align="center">
+        إذا كانت هذه الأداة قد وفرت عليك ساعات من الإحباط والجهد، أو ساعدتك في إطلاق تطبيقك في الموعد المحدد — <b>فنرجو منك التكرم برعاية ودعم هذا المشروع</b>. فنجان قهوة بسيط أو رعاية شهرية يمثلان فارقاً هائلاً ويضمنان استمرار هذا العمل مفتوح المصدر ومتاحاً للجميع مجاناً. ☕✨
+      </p>
+      <p align="center">
+        <a href="https://github.com/sponsors/vengatmacuser">
+          <img src="https://img.shields.io/badge/Sponsor%20%40vengatmacuser-%D8%A7%D8%AF%D8%B9%D9%85%20%D8%A7%D9%84%D9%85%D8%B4%D8%B1%D9%88%D8%B9%20%D8%B9%D8%A8%D8%B1%20GitHub%20Sponsors-ea4aaa?style=for-the-badge&logo=githubsponsors&logoColor=white" alt="Sponsor on GitHub Sponsors" />
+        </a>
+      </p>
+    </td>
+  </tr>
+</table>
+
+---
+
+## ⚡ المقارنة مع الأدوات الأخرى
 
 | الميزة | **react-native-inapp-inspector** | Flipper | Charles / Proxyman | RN Debugger |
 | :--- | :---: | :---: | :---: | :---: |
-| **يعمل على الجهاز ذاتياً (دون كمبيوتر أو كابلات)** | ✅ | ❌ | ❌ | ❌ |
-| **صفر استهلاك للخلفية (0% CPU عند الإغلاق)** | ✅ | ❌ | ❌ | ❌ |
+| **يعمل مستقلاً على الجهاز (بدون كمبيوتر أو كابلات)** | ✅ | ❌ | ❌ | ❌ |
+| **استهلاك صفري عند الخمول (0% معالج في الخلفية)** | ✅ | ❌ | ❌ | ❌ |
 | **فحص شبكة HTTP/HTTPS (Fetch / Axios / XHR)** | ✅ | ✅ | ✅ | ✅ |
-| **مخطط الشلال الزمني وقياسات P95** | ✅ | ⚠️ | ⚠️ | ❌ |
-| **نسخ فوري لأوامر cURL وأكواد Fetch** | ✅ | ⚠️ | ⚠️ | ❌ |
-| **مراقبة حزم WebSocket و Socket.IO الحية** | ✅ | ❌ | ⚠️ | ⚠️ |
-| **فحص وتعديل التخزين مباشرة (AsyncStorage & MMKV)** | ✅ (CRUD كامل) | ⚠️ (قراءة فقط) | ❌ | ⚠️ |
-| **سجل إشعارات الدفع (APNs, FCM, Salesforce)** | ✅ | ❌ | ❌ | ❌ |
-| **سجلات برقم السطر الدقيق عبر Metro** | ✅ (رقم السطر الفعلي) | ✅ | ❌ | ✅ |
-| **فروقات حالة Redux وسجل الأفعال الزمني** | ✅ | ⚠️ | ❌ | ✅ |
-| **حماية من الانهيار ومسار الأحداث (Breadcrumbs)** | ✅ | ❌ | ❌ | ❌ |
-| **قياسات العتاد والذاكرة (RAM والبطارية والمساحة)**| ✅ | ⚠️ | ❌ | ❌ |
-| **تسجيل فيديو للشاشة والتقاط صور (MP4 / GIF)** | ✅ | ❌ | ❌ | ❌ |
-| **يدعم 25 لغة عالمية مع قائمة سفلية لاختيار الدولة** | ✅ | ❌ (إنجليزية فقط) | ❌ | ❌ |
+| **مخطط زمن الاستجابة والنسبة المئوية 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
+```
 
 ---
 
@@ -76,16 +202,18 @@
 
 ```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
+#### iOS CocoaPods
 ```bash
 cd ios && pod install && cd ..
 ```
 
-### مشاريع 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
 
 ## 🚀 البدء السريع
 
-في الملف الرئيسي لتطبيقك (`App.tsx` أو `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';
 
-// ⚡ التهيئة قبل تحميل التطبيق لتسجيل كافة الطلبات الأولية
+// ⚡ Initialize interceptors before app mount
 setupNetworkLogger();
 setupConsoleLogger();
 setupSocketLogger();
@@ -122,7 +248,7 @@ export default function App() {
     <SafeAreaView style={{ flex: 1 }}>
       <YourAppRoot />
 
-      {/* إظهار الفاحص العائم أثناء التطوير فقط */}
+      {/* Mount In-App Inspector in DEV builds */}
       {__DEV__ && (
         <NetworkInspector
           enabled={true}
@@ -133,31 +259,3 @@ export default function App() {
   );
 }
 ```
-
----
-
-## 🔎 صيغة البحث المتقدمة (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

@@ -1,4 +1,10 @@
-# React Native In-App Inspector (In-App-Debugger für React Native & Expo)
+<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 (In-App Debugging-Toolkit)
 
 <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>
 
-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.
+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 Alternative zu Flipper, Charles und Chucker** — funktioniert eigenständig auf Geräten, in Test-Builds (APK / TestFlight) und ohne offene Debugger-Ports.
+> 🚀 **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.
 
 <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>
+  🎬 <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">Original MOV</a></b>
 </p>
 
 ---
 
+<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">💖 Mit Liebe für jeden Entwickler geschaffen, der jemals um 2 Uhr nachts nach Phantom-Bugs gesucht hat</h3>
+      <p align="center">
+        <i>„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.“</i>
+      </p>
+      <p align="center">
+        Wenn dieses Tool Ihnen Stunden an Fehlersuche erspart hat, geholfen hat, ein wichtiges Release pünktlich auszuliefern, oder Ihren Arbeitsalltag erleichtert hat — <b>erwägen Sie bitte, das Projekt zu sponsern</b>. Jeder noch so kleine Kaffee oder monatliche Beitrag bedeutet uns unglaublich viel und hält unabhängige Open-Source-Innovation am Leben. ☕✨
+      </p>
+      <p align="center">
+        <a href="https://github.com/sponsors/vengatmacuser">
+          <img src="https://img.shields.io/badge/Sponsor%20%40vengatmacuser-Auf%20GitHub%20Sponsors%20unterst%C3%BCtzen-ea4aaa?style=for-the-badge&logo=githubsponsors&logoColor=white" alt="Sponsor on GitHub Sponsors" />
+        </a>
+      </p>
+    </td>
+  </tr>
+</table>
+
+---
+
 ## ⚡ 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)** | ✅ | ❌ | ❌ | ❌ |
+| **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-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) | ❌ | ❌ |
+| **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
+```
 
 ---
 
@@ -76,8 +202,10 @@ Das **konfigurationsfreie All-in-One-In-App-Debugging-Toolkit für React Native
 
 ```bash
 npm install --save-dev react-native-inapp-inspector react-native-svg
-# oder
+# or
 yarn add -D react-native-inapp-inspector react-native-svg
+# or
+pnpm add -D react-native-inapp-inspector react-native-svg
 ```
 
 #### iOS CocoaPods
@@ -85,16 +213,14 @@ yarn add -D react-native-inapp-inspector react-native-svg
 cd ios && pod install && cd ..
 ```
 
-### Expo Projekte
+### Expo
 ```bash
 npx expo install react-native-inapp-inspector react-native-svg
 ```
 
 ---
 
-## 🚀 Schnelleinbindung
-
-In der Einstiegsdatei (`App.tsx` oder `index.js`):
+## 🚀 Schnellstart
 
 ```tsx
 import React from 'react';
@@ -109,7 +235,7 @@ import NetworkInspector, {
 import AsyncStorage from '@react-native-async-storage/async-storage';
 import { store } from './src/store';
 
-// ⚡ Vor dem Rendern der App initialisieren
+// ⚡ Initialize interceptors before app mount
 setupNetworkLogger();
 setupConsoleLogger();
 setupSocketLogger();
@@ -122,7 +248,7 @@ export default function App() {
     <SafeAreaView style={{ flex: 1 }}>
       <YourAppRoot />
 
-      {/* Floating Overlay in der Entwicklungsumgebung */}
+      {/* Mount In-App Inspector in DEV builds */}
       {__DEV__ && (
         <NetworkInspector
           enabled={true}
@@ -133,31 +259,3 @@ export default function App() {
   );
 }
 ```
-
----
-
-## 🔎 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)
-