react-native-inapp-inspector 2.4.1 → 2.5.0

package/README.hi.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, और 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% बैकग्राउंड ओवरहेड)** | ✅ | ❌ | ❌ | ❌ |
+| **HTTP/HTTPS नेटवर्क मॉनिटर (Fetch / Axios / XHR)** | ✅ | ✅ | ✅ | ✅ |
+| **टाइमिंग वॉटरफॉल और P95 लेटेंसी** | ✅ | ⚠️ | ⚠️ | ❌ |
+| **cURL और Fetch कोड तुरंत कॉपी करें** | ✅ | ⚠️ | ⚠️ | ❌ |
+| **WebSocket और Socket.IO पैकेट इंस्पेक्टर** | ✅ | ❌ | ⚠️ | ⚠️ |
+| **स्टोरेज इंस्पेक्टर और एडिटर (AsyncStorage और MMKV)** | ✅ (CRUD) | ⚠️ (केवल पढ़ें) | ❌ | ⚠️ |
+| **पुश नोटिफिकेशन लॉगर (APNs, FCM, Salesforce)** | ✅ | ❌ | ❌ | ❌ |
+| **Metro द्वारा सटीक लाइन नंबर कंसोल लॉग्स** | ✅ (सटीक फ़ाइल:लाइन) | ✅ | ❌ | ✅ |
+| **Redux स्टेट डिफ और एक्शन टाइमलाइन** | ✅ | ⚠️ | ❌ | ✅ |
+| **क्रैश गार्ड और मल्टी-टाइप ब्रेडक्रंब्स** | ✅ | ❌ | ❌ | ❌ |
+| **नेटिव हार्डवेयर (RAM, हीप, स्टोरेज, बैटरी, FPS)** | ✅ | ⚠️ | ❌ | ❌ |
+| **स्क्रीन रिकॉर्डिंग और स्क्रीनशॉट (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 OK अनुरोध फ़िल्टर करें
+url:api.myapp.com -analytics   # analytics को छोड़कर केवल myapp API खोजें
+header:authorization           # ऑथराइजेशन टोकन वाले अनुरोध खोजें
+body:"orderId"                 # JSON बॉडी के अंदर गहराई से खोजें
+page:CheckoutScreen            # React Navigation स्क्रीन नाम से फ़िल्टर करें
+file:ProfileView.tsx           # विशिष्ट TSX फ़ाइल से लॉग खोजें
+```
+
+## 🔍 भारतीय डेवलपर्स और क्षेत्रीय भाषाओं के लिए कीवर्ड (Keywords)
+
+भारत और दक्षिण एशिया के डेवलपर्स के लिए सर्च अनुकूलित:
+
+* **हिंदी एवं क्षेत्रीय भाषाएँ**: नेटवर्क-लॉगर, मोबाइल डिबगिंग टूल, इन-ऐप इंस्पेक्टर, வலைப்பின்னல் பதிவர் (Tamil), நெட்வொர்க் இன்ஸ்பெக்டர், నెట్‌వర్క్ లాగర్ (Telugu), ನೆಟ್‌ವರ್ಕ್ ಲಾಗರ್ (Kannada), നെറ്റ്‌വർക്ക് ലോഗർ (Malayalam), নেটওয়ার্ক লগার (Bengali), नेटवर्क लॉगर मराठी (Marathi).
+* **प्रमुख टेक हब**: React Native Bengaluru, Hyderabad, Pune, Delhi NCR, Chennai, Mumbai developers.
+* **वैकल्पिक टूल्स**: Flipper alternative India, Charles proxy alternative, Chucker for React Native, Proxyman alternative, Reactotron alternative.
+
+---
+
+## 📄 लाइसेंस
+
+MIT © [vengatmacuser](LICENSE)
+

package/README.ja.md

@@ -0,0 +1,180 @@
+# 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のモダンな代替ツール** — スタンドアロン端末、テスト配信（TestFlight/APK）、実機デバッグでPCやデバッグポートなしで動作します。
+
+<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 |
+| :--- | :---: | :---: | :---: | :---: |
+| **端末単体で動作（PC・ケーブル不要）** | ✅ | ❌ | ❌ | ❌ |
+| **非表示時ゼロ負荷（バックグラウンドCPU 0%）** | ✅ | ❌ | ❌ | ❌ |
+| **HTTP/HTTPS ネットワーク監視 (Fetch / Axios / XHR)** | ✅ | ✅ | ✅ | ✅ |
+| **ウォーターフォール表示 & P95 レイテンシ分析** | ✅ | ⚠️ | ⚠️ | ❌ |
+| **cURL & Fetch コード即時コピー** | ✅ | ⚠️ | ⚠️ | ❌ |
+| **WebSocket & Socket.IO 双方向パケット監視** | ✅ | ❌ | ⚠️ | ⚠️ |
+| **ストレージ確認・リアルタイム編集 (AsyncStorage & MMKV)** | ✅ (CRUD操作) | ⚠️ (参照のみ) | ❌ | ⚠️ |
+| **プッシュ通知ログ (APNs, FCM, Salesforce)** | ✅ | ❌ | ❌ | ❌ |
+| **Metroソースマップによる行番号特定ログ** | ✅ (正確な行番表示) | ✅ | ❌ | ✅ |
+| **Redux State差分 & Actionタイムライン** | ✅ | ⚠️ | ❌ | ✅ |
+| **クラッシュ防止 & パンくずリスト (Breadcrumbs)** | ✅ | ❌ | ❌ | ❌ |
+| **端末ハードウェア情報 (RAM・ヒープ・空き容量・バッテリー)** | ✅ | ⚠️ | ❌ | ❌ |
+| **端末内画面録画・スクリーンショット (MP4・GIF)** | ✅ | ❌ | ❌ | ❌ |
+| **日本語を含む世界25言語対応（ボトムシート切替）** | ✅ | ❌ (英語のみ) | ❌ | ❌ |
+
+---
+
+## 📦 インストール
+
+### Bare React Native
+```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 検索構文
+
+Chrome DevToolsスタイルの検索フィルターに対応：
+
+```text
+method:POST status:200         # POSTリクエストかつ200 OKのみ表示
+url:api.myapp.com -analytics   # analyticsを除外して対象APIのみ検索
+header:authorization           # 認証ヘッダー付きリクエストを検索
+body:"orderId"                 # リクエスト/レスポンスJSON内を深掘り検索
+page:CheckoutScreen            # 画面名（Route）でフィルタリング
+file:ProfileView.tsx           # 特定のTSXファイルから出力されたログを検索
+```
+
+---
+
+## 📱 モジュール別インポート
+
+```typescript
+import { setupNetworkLogger } from 'react-native-inapp-inspector/network';
+import { setupSocketLogger } from 'react-native-inapp-inspector/socket';
+import { connectAsyncStorage, connectMMKV } from 'react-native-inapp-inspector/storage';
+import { autoSetupPushLogger } from 'react-native-inapp-inspector/push';
+import { connectReduxStore } from 'react-native-inapp-inspector/redux';
+import { ScreenCapture } from 'react-native-inapp-inspector/capture';
+```
+
+## 🔍 開発者向け検索キーワード (Search Keywords)
+
+日本のReact Nativeエンジニアが検索しやすい関連キーワード一覧：
+
+* **主な検索ワード**: リアクトネイティブ デバッガー, ネットワークロガー, アプリ内パケットキャプチャ, モバイル通信ログ監視, 実機通信デバッグ, 開発ツール, 端末内DevTools.
+* **代替ツール**: Flipper 代替 (Flipper alternative), Charles プロキシ代替, Chucker React Native, Proxyman 代替, Reactotron 代替.
+* **機能別**: WebSocket リアルタイム監視, Socket.io パケット監視, MMKV エディタ, AsyncStorage ビューアー, Redux 状態監視, プッシュ通知ログ.
+* **日本市場**: 日本国内のモバイルアプリ開発、Expo / Bare React Native プロジェクトに最適化。
+
+---
+
+## 📄 ライセンス
+
+MIT © [vengatmacuser](LICENSE)
+

package/README.ko.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의 현대적인 대체제** — PC 연결 없이 단독 테스트 빌드(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 |
+| :--- | :---: | :---: | :---: | :---: |
+| **기기 단독 실행 (PC 및 케이블 불필요)** | ✅ | ❌ | ❌ | ❌ |
+| **백그라운드 제로 오버헤드 (비활성 시 CPU 0%)** | ✅ | ❌ | ❌ | ❌ |
+| **HTTP/HTTPS 네트워크 트래픽 (Fetch / Axios / XHR)** | ✅ | ✅ | ✅ | ✅ |
+| **워터폴 시간 분석 및 P95 지표** | ✅ | ⚠️ | ⚠️ | ❌ |
+| **cURL 및 Fetch 스니펫 원클릭 복사** | ✅ | ⚠️ | ⚠️ | ❌ |
+| **WebSocket 및 Socket.IO 패킷 실시간 검사** | ✅ | ❌ | ⚠️ | ⚠️ |
+| **저장소 실시간 편집 (AsyncStorage & MMKV)** | ✅ (CRUD 지원) | ⚠️ (읽기 전용) | ❌ | ⚠️ |
+| **푸시 알림 수신 로거 (APNs, FCM, Salesforce)** | ✅ | ❌ | ❌ | ❌ |
+| **Metro 소스맵 연동 줄 번호 표시 콘솔 로그** | ✅ (정확한 줄 번호) | ✅ | ❌ | ✅ |
+| **Redux State 차이 비교 및 액션 타임라인** | ✅ | ⚠️ | ❌ | ✅ |
+| **비정상 종료 방지 및 이동 경로 추적 (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   # 분석 도구 도메인을 제외하고 특정 API만 검색
+header:authorization           # 인증 헤더를 포함하는 요청 검색
+body:"orderId"                 # 요청/응답 JSON 바디 내용 검색
+page:CheckoutScreen            # React Navigation 활성 화면 기준으로 필터링
+file:ProfileView.tsx           # 특정 소스 파일에서 출력된 콘솔 로그 검색
+```
+
+## 🔍 개발자 검색 키워드 (Keywords)
+
+한국 React Native 개발자분들이 검색하기 용이하도록 정리된 핵심 검색어입니다:
+
+* **핵심 검색어**: 리액트 네이티브 디버거, 모바일 네트워크 로거, 패킷 캡처, 인앱 디버거, 실기기 통신 모니터링, 모바일 개발 도구, 단말기 디버거.
+* **대체 도구**: 플리퍼 대체 (Flipper alternative), 찰스 프록시 대체 (Charles proxy alternative), 차커 리액트 네이티브 (Chucker), 프록시맨 대체, 리액토트론 대체.
+* **기능별**: 웹소켓 실시간 로거, MMKV 뷰어 및 실시간 편집, AsyncStorage 검사기, 메트로 소스맵 심볼리케이션, 기기 화면 녹화.
+
+---
+
+## 📄 라이선스
+
+MIT © [vengatmacuser](LICENSE)
+