react-native-inapp-inspector 2.5.1 → 2.5.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.ar.md +151 -53
- package/README.de.md +150 -52
- package/README.es.md +139 -42
- package/README.fr.md +151 -53
- package/README.hi.md +141 -43
- package/README.ja.md +150 -69
- package/README.ko.md +153 -55
- package/README.md +73 -14
- package/README.pt-BR.md +152 -54
- package/README.ru.md +153 -55
- package/README.zh-CN.md +95 -219
- package/android/src/main/java/com/inappinspector/NetworkInspectorModule.kt +154 -9
- package/dist/commonjs/capture.d.ts +5 -2
- package/dist/commonjs/capture.js +1 -1
- package/dist/commonjs/components/Inspector/FabLauncher.js +12 -12
- package/dist/commonjs/components/Inspector/FloatingCaptureWidget.js +17 -17
- package/dist/commonjs/components/Inspector/InspectorHeader.js +41 -41
- package/dist/commonjs/components/Inspector/MainScreen.js +15 -15
- package/dist/commonjs/components/Inspector/MediaGalleryTab.js +52 -34
- package/dist/commonjs/components/Inspector/MediaPreviewModal.d.ts +20 -18
- package/dist/commonjs/components/Inspector/MediaPreviewModal.js +744 -304
- package/dist/commonjs/components/NetworkIcons.d.ts +12 -0
- package/dist/commonjs/components/NetworkIcons.js +56 -3
- package/dist/commonjs/constants/telemetryConfig.d.ts +3 -3
- package/dist/commonjs/constants/telemetryConfig.js +1 -1
- package/dist/commonjs/constants/version.d.ts +1 -1
- package/dist/commonjs/constants/version.js +1 -1
- package/dist/commonjs/i18n/locales/ar.json +1 -1
- package/dist/commonjs/i18n/locales/bn.json +1 -1
- package/dist/commonjs/i18n/locales/de.json +1 -1
- package/dist/commonjs/i18n/locales/en.json +1 -1
- package/dist/commonjs/i18n/locales/es.json +1 -1
- package/dist/commonjs/i18n/locales/fr.json +1 -1
- package/dist/commonjs/i18n/locales/gu.json +1 -1
- package/dist/commonjs/i18n/locales/hi.json +1 -1
- package/dist/commonjs/i18n/locales/id.json +1 -1
- package/dist/commonjs/i18n/locales/it.json +1 -1
- package/dist/commonjs/i18n/locales/ja.json +1 -1
- package/dist/commonjs/i18n/locales/kn.json +1 -1
- package/dist/commonjs/i18n/locales/ko.json +1 -1
- package/dist/commonjs/i18n/locales/ml.json +1 -1
- package/dist/commonjs/i18n/locales/mr.json +1 -1
- package/dist/commonjs/i18n/locales/nl.json +1 -1
- package/dist/commonjs/i18n/locales/pa.json +1 -1
- package/dist/commonjs/i18n/locales/pl.json +1 -1
- package/dist/commonjs/i18n/locales/pt.json +1 -1
- package/dist/commonjs/i18n/locales/ru.json +1 -1
- package/dist/commonjs/i18n/locales/ta.json +1 -1
- package/dist/commonjs/i18n/locales/te.json +1 -1
- package/dist/commonjs/i18n/locales/tr.json +1 -1
- package/dist/commonjs/i18n/locales/vi.json +1 -1
- package/dist/commonjs/i18n/locales/zh.json +1 -1
- package/dist/commonjs/index.js +1 -1
- package/dist/commonjs/native/NativeInspector.d.ts +4 -0
- package/dist/commonjs/native/NativeInspector.js +1 -1
- package/dist/commonjs/native/NativeNetworkInspector.d.ts +1 -0
- package/dist/commonjs/types/interfaces.d.ts +2 -0
- package/dist/esm/capture.d.ts +5 -2
- package/dist/esm/capture.js +1 -1
- package/dist/esm/components/Inspector/FabLauncher.js +37 -37
- package/dist/esm/components/Inspector/FloatingCaptureWidget.js +30 -30
- package/dist/esm/components/Inspector/InspectorHeader.js +34 -34
- package/dist/esm/components/Inspector/MainScreen.js +51 -51
- package/dist/esm/components/Inspector/MediaGalleryTab.js +100 -82
- package/dist/esm/components/Inspector/MediaPreviewModal.d.ts +20 -18
- package/dist/esm/components/Inspector/MediaPreviewModal.js +774 -334
- package/dist/esm/components/NetworkIcons.d.ts +12 -0
- package/dist/esm/components/NetworkIcons.js +256 -203
- package/dist/esm/constants/telemetryConfig.d.ts +3 -3
- package/dist/esm/constants/telemetryConfig.js +1 -1
- package/dist/esm/constants/version.d.ts +1 -1
- package/dist/esm/constants/version.js +1 -1
- package/dist/esm/i18n/locales/ar.json +1 -1
- package/dist/esm/i18n/locales/bn.json +1 -1
- package/dist/esm/i18n/locales/de.json +1 -1
- package/dist/esm/i18n/locales/en.json +1 -1
- package/dist/esm/i18n/locales/es.json +1 -1
- package/dist/esm/i18n/locales/fr.json +1 -1
- package/dist/esm/i18n/locales/gu.json +1 -1
- package/dist/esm/i18n/locales/hi.json +1 -1
- package/dist/esm/i18n/locales/id.json +1 -1
- package/dist/esm/i18n/locales/it.json +1 -1
- package/dist/esm/i18n/locales/ja.json +1 -1
- package/dist/esm/i18n/locales/kn.json +1 -1
- package/dist/esm/i18n/locales/ko.json +1 -1
- package/dist/esm/i18n/locales/ml.json +1 -1
- package/dist/esm/i18n/locales/mr.json +1 -1
- package/dist/esm/i18n/locales/nl.json +1 -1
- package/dist/esm/i18n/locales/pa.json +1 -1
- package/dist/esm/i18n/locales/pl.json +1 -1
- package/dist/esm/i18n/locales/pt.json +1 -1
- package/dist/esm/i18n/locales/ru.json +1 -1
- package/dist/esm/i18n/locales/ta.json +1 -1
- package/dist/esm/i18n/locales/te.json +1 -1
- package/dist/esm/i18n/locales/tr.json +1 -1
- package/dist/esm/i18n/locales/vi.json +1 -1
- package/dist/esm/i18n/locales/zh.json +1 -1
- package/dist/esm/index.js +3 -3
- package/dist/esm/native/NativeInspector.d.ts +4 -0
- package/dist/esm/native/NativeInspector.js +1 -1
- package/dist/esm/native/NativeNetworkInspector.d.ts +1 -0
- package/dist/esm/types/interfaces.d.ts +2 -0
- package/ios/NetworkInspectorModule.mm +487 -224
- package/package.json +1 -1
- package/react-native-inapp-inspector.podspec +1 -1
- package/src/native/NativeInspector.ts +22 -0
- package/src/native/NativeNetworkInspector.ts +1 -1
- package/android/.gradle/8.9/checksums/checksums.lock +0 -0
- package/android/.gradle/8.9/dependencies-accessors/gc.properties +0 -0
- package/android/.gradle/8.9/executionHistory/executionHistory.lock +0 -0
- package/android/.gradle/8.9/fileChanges/last-build.bin +0 -0
- package/android/.gradle/8.9/fileHashes/fileHashes.lock +0 -0
- package/android/.gradle/8.9/gc.properties +0 -0
- package/android/.gradle/9.2.0/checksums/checksums.lock +0 -0
- package/android/.gradle/9.2.0/fileChanges/last-build.bin +0 -0
- package/android/.gradle/9.2.0/fileHashes/fileHashes.bin +0 -0
- package/android/.gradle/9.2.0/fileHashes/fileHashes.lock +0 -0
- package/android/.gradle/9.2.0/gc.properties +0 -0
- package/android/.gradle/buildOutputCleanup/buildOutputCleanup.lock +0 -0
- package/android/.gradle/buildOutputCleanup/cache.properties +0 -2
- package/android/.gradle/vcs-1/gc.properties +0 -0
- package/android/.settings/org.eclipse.buildship.core.prefs +0 -13
package/README.zh-CN.md
CHANGED
|
@@ -1,4 +1,10 @@
|
|
|
1
|
-
|
|
1
|
+
<p align="center">
|
|
2
|
+
<a href="https://github.com/vengatmacuser/react-native-inapp-inspector">
|
|
3
|
+
<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);" />
|
|
4
|
+
</a>
|
|
5
|
+
</p>
|
|
6
|
+
|
|
7
|
+
# React Native In-App Inspector (移动端应用内全功能调试器)
|
|
2
8
|
|
|
3
9
|
<p align="center">
|
|
4
10
|
<b><a href="./README.md">English</a></b> |
|
|
@@ -27,7 +33,7 @@
|
|
|
27
33
|
<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>
|
|
28
34
|
<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>
|
|
29
35
|
<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>
|
|
30
|
-
<a href="https://
|
|
36
|
+
<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>
|
|
31
37
|
</p>
|
|
32
38
|
|
|
33
39
|
<p align="center">
|
|
@@ -38,46 +44,61 @@
|
|
|
38
44
|
<img src="https://img.shields.io/badge/Engine-Hermes%20%7C%20JSC-9333ea" alt="Engine" />
|
|
39
45
|
</p>
|
|
40
46
|
|
|
41
|
-
|
|
42
|
-
<img src="https://img.shields.io/badge/WebSockets-ws%20%7C%20wss%20%7C%20Socket.IO-06b6d4?logo=socketdotio&logoColor=white" alt="WebSockets" />
|
|
43
|
-
<img src="https://img.shields.io/badge/Storage-AsyncStorage%20%7C%20MMKV-f59e0b?logo=databricks&logoColor=white" alt="Storage" />
|
|
44
|
-
<img src="https://img.shields.io/badge/Push%20Logger-APNs%20%7C%20FCM-10b981?logo=firebase&logoColor=white" alt="Push" />
|
|
45
|
-
<img src="https://img.shields.io/badge/Localization-25%20Languages-ec4899" alt="Localization" />
|
|
46
|
-
<img src="https://img.shields.io/badge/Screen%20Capture-Video%20%7C%20GIF%20%7C%20Screenshot-8b5cf6" alt="Screen Capture" />
|
|
47
|
-
<a href="https://github.com/vengatmacuser/react-native-inapp-inspector/pulls"><img src="https://img.shields.io/badge/PRs-welcome-brightgreen.svg" alt="PRs Welcome" /></a>
|
|
48
|
-
</p>
|
|
49
|
-
|
|
50
|
-
专为 **React Native & Expo** 打造的**零配置、开箱即用的应用内全功能调试器与抓包工具**。无需连接数据线、无需配置 Charles/Proxyman 证书,直接在真机或模拟器上实时监控 HTTP/HTTPS 网络流量、WebSocket 与 Socket.IO 双向数据包、Metro 符号化控制台日志、Redux 状态树差量变动、AsyncStorage 与 MMKV 实时存储、推送通知、原生硬件运行指标,以及真机屏幕录制与截图!
|
|
47
|
+
专为 React Native 与 Expo 打造的**零配置、开箱即用的全功能应用内调试套件**。在手机端直接抓取 HTTP/HTTPS 网络请求、WebSocket/Socket.IO 实时通信,查看精准到源码行号的 Console 日志、Redux 状态变动差量,实时编辑 AsyncStorage 与 MMKV 存储,捕获推送通知与系统硬件指标,更内置了专业级图像/视频编辑工作台与高清屏幕录制,无需连接电脑,脱离数据线束缚。
|
|
51
48
|
|
|
52
|
-
> 🚀
|
|
49
|
+
> 🚀 **Flipper、Charles、Proxyman 和 Chucker 的现代轻量化替代方案** — 完全独立运行于真机设备与测试构建包(TestFlight / APK),告别电脑数据线与繁琐代理配置。
|
|
53
50
|
|
|
54
51
|
<p align="center">
|
|
55
|
-
<img src="https://raw.githubusercontent.com/vengatmacuser/react-native-inapp-inspector/main/assets/walkthrough.gif" alt="React Native In-App Inspector
|
|
52
|
+
<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);" />
|
|
56
53
|
</p>
|
|
57
54
|
|
|
58
55
|
<p align="center">
|
|
59
|
-
🎬 <b><a href="https://raw.githubusercontent.com/vengatmacuser/react-native-inapp-inspector/main/docs/video_walkthrough.mp4"
|
|
56
|
+
🎬 <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>
|
|
60
57
|
</p>
|
|
61
58
|
|
|
62
59
|
---
|
|
63
60
|
|
|
64
|
-
|
|
61
|
+
<table align="center" width="100%">
|
|
62
|
+
<tr>
|
|
63
|
+
<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);">
|
|
64
|
+
<h3 align="center">💖 献给每一位曾在深夜两点与幽灵 Bug 苦战的开发者</h3>
|
|
65
|
+
<p align="center">
|
|
66
|
+
<i>“开发 react-native-inapp-inspector 的初衷,是因为我们深知缠绕的手机数据线、时常断开的调试端口以及线上偶现 Bug 带来的无助与煎熬。我们倾注了无数个不眠之夜与满腔热忱,只为让全球每一位移动端工程师和测试同学,都能彻底告别束缚,享受纯粹、丝滑、优雅的真机调试体验。”</i>
|
|
67
|
+
</p>
|
|
68
|
+
<p align="center">
|
|
69
|
+
如果这个开源工具曾为你节省过宝贵的排查时间、助你顺利按时交付版本,或者让团队的日常开发多了一份从容与舒心 —— <b>恳请您考虑赞助支持这个项目</b>。一杯暖心咖啡或一份月度赞助,都是我们持续迭代、打磨新功能并坚持完全开源的最大动力!☕✨
|
|
70
|
+
</p>
|
|
71
|
+
<p align="center">
|
|
72
|
+
<a href="https://github.com/sponsors/vengatmacuser">
|
|
73
|
+
<img src="https://img.shields.io/badge/Sponsor%20%40vengatmacuser-%E5%9C%A8%20GitHub%20Sponsors%20%E8%B5%9E%E5%8A%A9%E6%94%AF%E6%8C%81%E6%9C%AC%E9%A1%B9%E7%9B%AE-ea4aaa?style=for-the-badge&logo=githubsponsors&logoColor=white" alt="Sponsor on GitHub Sponsors" />
|
|
74
|
+
</a>
|
|
75
|
+
</p>
|
|
76
|
+
</td>
|
|
77
|
+
</tr>
|
|
78
|
+
</table>
|
|
79
|
+
|
|
80
|
+
---
|
|
65
81
|
|
|
66
|
-
|
|
82
|
+
## ⚡ 核心优势与竞品对比
|
|
83
|
+
|
|
84
|
+
| 能力项 | **react-native-inapp-inspector** | Flipper | Charles / Proxyman | RN Debugger |
|
|
67
85
|
| :--- | :---: | :---: | :---: | :---: |
|
|
68
|
-
|
|
|
69
|
-
|
|
|
86
|
+
| **真机独立运行(无需电脑与数据线)** | ✅ | ❌ | ❌ | ❌ |
|
|
87
|
+
| **空闲零渲染消耗(0% 后台 CPU 占用)** | ✅ | ❌ | ❌ | ❌ |
|
|
70
88
|
| **HTTP/HTTPS 网络抓包 (Fetch / Axios / XHR)** | ✅ | ✅ | ✅ | ✅ |
|
|
71
|
-
|
|
|
72
|
-
|
|
|
73
|
-
| **WebSocket & Socket.IO
|
|
89
|
+
| **耗时瀑布流与 P95 延迟统计** | ✅ | ⚠️ | ⚠️ | ❌ |
|
|
90
|
+
| **cURL 与 Fetch 代码片段一键复制导出** | ✅ | ⚠️ | ⚠️ | ❌ |
|
|
91
|
+
| **WebSocket & Socket.IO 双向实时抓包** | ✅ | ❌ | ⚠️ | ⚠️ |
|
|
74
92
|
| **存储查看与实时编辑 (AsyncStorage & MMKV)** | ✅ (在线增删改查) | ⚠️ (仅只读) | ❌ | ⚠️ |
|
|
75
93
|
| **推送通知日志记录 (APNs, FCM, 极光, 个推)** | ✅ | ❌ | ❌ | ❌ |
|
|
76
94
|
| **Console 日志 + Metro 符号化源码定位** | ✅ (精准定位代码行号) | ✅ | ❌ | ✅ |
|
|
77
95
|
| **Redux State 树与 Action 差量对比** | ✅ | ⚠️ | ❌ | ✅ |
|
|
96
|
+
| **业务埋点与事件追踪 (Firebase, Mixpanel)** | ✅ | ❌ | ❌ | ❌ |
|
|
78
97
|
| **崩溃防护与多类型操作面包屑 (Breadcrumbs)** | ✅ | ❌ | ❌ | ❌ |
|
|
79
|
-
| **原生硬件指标 (RAM、堆内存、存储空间、电池、FPS)
|
|
80
|
-
|
|
|
98
|
+
| **原生硬件指标 (RAM、堆内存、存储空间、电池、FPS)** | ✅ | ⚠️ | ❌ | ❌ |
|
|
99
|
+
| **媒体录屏与 In-App 编辑工坊 (裁剪, 剪辑, 标注)** | ✅ (全功能工作室) | ❌ | ❌ | ❌ |
|
|
100
|
+
| **可拖拽全局悬浮球与穿透半透明模式 (Peek)** | ✅ (0.05 - 1.0) | ❌ | ❌ | ❌ |
|
|
101
|
+
| **Firebase Remote Config 动态模块管理** | ✅ | ❌ | ❌ | ❌ |
|
|
81
102
|
| **全球 25 种语言本地化支持(底部抽屉快捷切换)** | ✅ | ❌ (仅英文) | ❌ | ❌ |
|
|
82
103
|
| **Expo (Bare / Managed) & 纯原生 React Native** | ✅ | ⚠️ | ⚠️ | ⚠️ |
|
|
83
104
|
|
|
@@ -118,85 +139,90 @@
|
|
|
118
139
|
- **Redux Toolkit 完美集成**:无缝连接 Redux Store、RTK Query 与 `redux-persist`。
|
|
119
140
|
- **Action 时间线**:按触发顺序排布 Action,记录每次派发耗时与 Payload 载荷。
|
|
120
141
|
- **深度状态 Diff 对比**:清晰标明变动项(**绿色**代表新增,**黄色**代表更新,**红色**代表移除)。
|
|
142
|
+
- **Slice 状态树浏览**:按模块层级快速浏览全局状态树。
|
|
143
|
+
|
|
144
|
+
### 📊 7. 业务埋点与事件追踪 (Analytics Event Tracker)
|
|
145
|
+
- **Firebase Analytics 自动拦截**:深度集成 `@react-native-firebase/analytics`(`logEvent`、`logScreenView`、`setUserProperties`、`setUserId`)。
|
|
146
|
+
- **开放插件式架构**:可轻松适配自定义埋点上报 SDK(Google Analytics 4、Mixpanel、Segment、神策分析、友盟等)。
|
|
147
|
+
- **参数与时间线分析**:实时查看触发事件名、附带参数、用户属性与触发时间戳。
|
|
121
148
|
|
|
122
|
-
### 🛡️
|
|
149
|
+
### 🛡️ 8. 全局异常捕获与微架构防崩 (Crash Protection)
|
|
123
150
|
- **微 UI 容错隔离**:调试器运行在完全隔离的环境中,即便调试器内部发生意外也绝对不会影响宿主应用。
|
|
124
151
|
- **全局 ErrorBoundary**:优雅捕获未处理的 React 渲染崩溃并提供一键恢复交互。
|
|
125
152
|
- **操作面包屑追溯**:记录崩溃发生前用户的页面跳转、最近网络请求与 Redux Action,助力秒级排查线上 Bug。
|
|
153
|
+
- **原生异常捕获**:捕获 iOS 与 Android 原生未捕获信号与异常。
|
|
126
154
|
|
|
127
|
-
### 📱
|
|
155
|
+
### 📱 9. 原生硬件、内存与 FPS 监控 (Hardware Telemetry)
|
|
128
156
|
- **低层原生指标**:手机总运行内存、可用空闲内存、原生堆分配、存储剩余空间、电池电量与充电状态、CPU 架构。
|
|
129
157
|
- **实时刷新率监控**:真实测量屏幕渲染 FPS。
|
|
130
158
|
- **内存警告自适应清理**:接收系统低内存广播时自动释放缓存记录,确保宿主应用平稳运行。
|
|
131
159
|
- **摇一摇唤出**:支持摇晃手机物理设备或按下 `Ctrl+Cmd+Z` / `Cmd+M` 切换调试器显隐。
|
|
132
160
|
|
|
133
|
-
### 📸
|
|
134
|
-
-
|
|
135
|
-
-
|
|
136
|
-
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
-
|
|
140
|
-
-
|
|
161
|
+
### 📸 10. 原生媒体捕获与 In-App 图像/视频编辑工作台 (Media Studio Editor)
|
|
162
|
+
- **真机设备直接捕获**:一键生成无状态栏高保真全屏截图、流畅 MP4 录屏或轻量动态 GIF。
|
|
163
|
+
- **全功能媒体管理画廊**:浏览、筛选(图片/视频/GIF)、批量多选、一键删除与快捷复制文件 URI。
|
|
164
|
+
- **图片与视频专业编辑工作台**:
|
|
165
|
+
- **裁剪与分辨率缩放 (Crop & Resize)**:支持自由裁剪与常用比例(1:1 正方形、4:3、16:9),支持降采样缩放减小体积以便快速上传提交。
|
|
166
|
+
- **视频精确剪辑与音频控制 (Video Trimming & Audio)**:可视化滑动调整起止裁剪时间、调节播放倍速(0.5× – 2.0×)或一键消除音轨。
|
|
167
|
+
- **视频帧截图 (PNG Frame Snapshot)**:播放视频时一键提取任意时间点的高清 PNG 关键帧。
|
|
168
|
+
- **QA 缺陷标记与批注系统**:
|
|
169
|
+
- **Instagram 3×3 九宫格辅助线**:开启辅助对齐网格,协助排查像素级 UI 布局偏差。
|
|
170
|
+
- **顺序步骤指示气泡 (Step Badges)**:点击或拖拽放置数字步骤徽章(`1`, `2`, `3`...),清晰标注复现步骤。
|
|
171
|
+
- **缺陷与便签标签 (Bug / Note Tags)**:随手标记彩色 Bug 缺陷(`🐛`)、便签(`📝`)与警示标记。
|
|
172
|
+
- **文字覆层与设备水印 (Text Overlay & QA Watermark)**:自由输入说明文字,支持附带动态设备型号与系统版本的测试水印。
|
|
173
|
+
- **系统相册导入器 (Camera Roll Importer)**:支持从手机相册中导入现有图片与视频进行二次编辑与排查。
|
|
174
|
+
|
|
175
|
+
### 🎛️ 11. 可拖拽悬浮球 (FAB) 与穿透半透明模式 (Peek Mode)
|
|
176
|
+
- **全局可拖拽悬浮气泡**:可拖动至屏幕任意位置,支持实时未读计数与动效微章提示。
|
|
177
|
+
- **底部拖拽销毁区 (Drag-to-Dismiss)**:向屏幕底部拖动触发高亮销毁底栏,松手即可优雅隐藏。
|
|
178
|
+
- **穿透半透明调试模式 (Peek-Through Opacity)**:支持通过滑块自定义调节 0.05 – 1.0 半透明度,在半透明状态下可一边操作底层 App 一边实时观察网络请求与 Redux 数据流。
|
|
179
|
+
|
|
180
|
+
### ☁️ 12. Firebase Remote Config 动态模块管理
|
|
181
|
+
- **云端功能开关 (Feature Flags)**:无需发版即可在生产或灰度构建中通过 Firebase Remote Config 远程开启或关闭特定调试模块(网络抓包、Redux、Crash 监控、存储等)。
|
|
182
|
+
|
|
183
|
+
### 🌍 13. 全球 25 种语言与底部抽屉交互
|
|
184
|
+
- **25 种语言本地化**:简体中文 (`zh`)、繁体中文 (`zh-TW`)、英语、日语、韩语、西班牙语、法语、德语、俄语、印地语、阿拉伯语、葡萄牙语等。
|
|
185
|
+
- **现代化底部抽屉**:点击顶部工具栏 `[ 🌐 中文 ▾ ]` 即可滑出抽屉,支持横向国旗徽章筛选与模糊搜索,点击即时生效并持久化记忆。
|
|
141
186
|
|
|
142
187
|
---
|
|
143
188
|
|
|
144
189
|
## 🔎 DevTools 高级搜索语法
|
|
145
190
|
|
|
146
|
-
顶部搜索框支持类似 Chrome DevTools 的复合多维过滤:
|
|
147
|
-
|
|
148
191
|
```text
|
|
149
|
-
#
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
#
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
#
|
|
156
|
-
header:authorization
|
|
157
|
-
|
|
158
|
-
# 在请求体或响应体 JSON 中搜索关键字段
|
|
159
|
-
body:"orderId"
|
|
160
|
-
|
|
161
|
-
# 按当前所在页面路由名称筛选
|
|
162
|
-
page:CheckoutScreen
|
|
163
|
-
|
|
164
|
-
# 搜索特定 TSX 文件中打印的日志
|
|
165
|
-
file:ProfileView.tsx
|
|
166
|
-
|
|
167
|
-
# 使用负向减号排除干扰项
|
|
168
|
-
-healthcheck -socket.io
|
|
192
|
+
method:POST status:200 # Filter POST requests with 200 OK
|
|
193
|
+
url:api.myapp.com -analytics # Filter domain and exclude analytics
|
|
194
|
+
header:authorization # Filter requests containing auth header
|
|
195
|
+
body:"orderId" # Search in request/response JSON body
|
|
196
|
+
page:CheckoutScreen # Filter logs by screen/route name
|
|
197
|
+
file:ProfileView.tsx # Filter console logs by source file
|
|
198
|
+
-healthcheck -socket.io # Exclude unwanted logs
|
|
169
199
|
```
|
|
170
200
|
|
|
171
201
|
---
|
|
172
202
|
|
|
173
203
|
## 📦 快速安装
|
|
174
204
|
|
|
175
|
-
### 纯原生 React Native 工程
|
|
176
205
|
```bash
|
|
177
206
|
npm install --save-dev react-native-inapp-inspector react-native-svg
|
|
178
|
-
#
|
|
207
|
+
# or
|
|
179
208
|
yarn add -D react-native-inapp-inspector react-native-svg
|
|
180
|
-
#
|
|
209
|
+
# or
|
|
181
210
|
pnpm add -D react-native-inapp-inspector react-native-svg
|
|
182
211
|
```
|
|
183
212
|
|
|
184
|
-
#### iOS CocoaPods
|
|
213
|
+
#### iOS CocoaPods
|
|
185
214
|
```bash
|
|
186
215
|
cd ios && pod install && cd ..
|
|
187
216
|
```
|
|
188
217
|
|
|
189
|
-
### Expo
|
|
218
|
+
### Expo
|
|
190
219
|
```bash
|
|
191
220
|
npx expo install react-native-inapp-inspector react-native-svg
|
|
192
221
|
```
|
|
193
|
-
*(完全适配 Expo SDK 48 至 52+ 的 Expo Go 与 Prebuild 原生模式)*
|
|
194
222
|
|
|
195
223
|
---
|
|
196
224
|
|
|
197
|
-
## 🚀
|
|
198
|
-
|
|
199
|
-
在应用入口根组件(如 `App.tsx` 或 `index.js`)中引入:
|
|
225
|
+
## 🚀 快速接入
|
|
200
226
|
|
|
201
227
|
```tsx
|
|
202
228
|
import React from 'react';
|
|
@@ -209,25 +235,22 @@ import NetworkInspector, {
|
|
|
209
235
|
connectAsyncStorage,
|
|
210
236
|
} from 'react-native-inapp-inspector';
|
|
211
237
|
import AsyncStorage from '@react-native-async-storage/async-storage';
|
|
212
|
-
import { store } from './src/store';
|
|
238
|
+
import { store } from './src/store';
|
|
213
239
|
|
|
214
|
-
// ⚡
|
|
240
|
+
// ⚡ Initialize interceptors before app mount
|
|
215
241
|
setupNetworkLogger();
|
|
216
242
|
setupConsoleLogger();
|
|
217
243
|
setupSocketLogger();
|
|
218
244
|
|
|
219
|
-
if (store)
|
|
220
|
-
connectReduxStore(store);
|
|
221
|
-
}
|
|
245
|
+
if (store) connectReduxStore(store);
|
|
222
246
|
connectAsyncStorage(AsyncStorage);
|
|
223
247
|
|
|
224
248
|
export default function App() {
|
|
225
249
|
return (
|
|
226
250
|
<SafeAreaView style={{ flex: 1 }}>
|
|
227
|
-
{/* 你的业务组件与页面 */}
|
|
228
251
|
<YourAppRoot />
|
|
229
252
|
|
|
230
|
-
{/*
|
|
253
|
+
{/* Mount In-App Inspector in DEV builds */}
|
|
231
254
|
{__DEV__ && (
|
|
232
255
|
<NetworkInspector
|
|
233
256
|
enabled={true}
|
|
@@ -238,150 +261,3 @@ export default function App() {
|
|
|
238
261
|
);
|
|
239
262
|
}
|
|
240
263
|
```
|
|
241
|
-
|
|
242
|
-
---
|
|
243
|
-
|
|
244
|
-
## 💡 典型场景与进阶用法
|
|
245
|
-
|
|
246
|
-
### 1. 拦截 WebSocket / Socket.IO 通信
|
|
247
|
-
```typescript
|
|
248
|
-
import { setupSocketLogger, recordSocketFrame } from 'react-native-inapp-inspector/socket';
|
|
249
|
-
|
|
250
|
-
// 开启全局 WebSocket 自动拦截
|
|
251
|
-
setupSocketLogger();
|
|
252
|
-
|
|
253
|
-
// 手动录入自定义消息帧:
|
|
254
|
-
recordSocketFrame(connectionId, {
|
|
255
|
-
direction: 'in', // 'in' | 'out'
|
|
256
|
-
type: 'json',
|
|
257
|
-
data: { event: 'PAYMENT_SUCCESS', orderId: '20260912' },
|
|
258
|
-
});
|
|
259
|
-
```
|
|
260
|
-
|
|
261
|
-
### 2. 调试 AsyncStorage 与 MMKV 本地存储
|
|
262
|
-
```typescript
|
|
263
|
-
// 连接 AsyncStorage
|
|
264
|
-
import AsyncStorage from '@react-native-async-storage/async-storage';
|
|
265
|
-
import { connectAsyncStorage } from 'react-native-inapp-inspector/storage';
|
|
266
|
-
|
|
267
|
-
connectAsyncStorage(AsyncStorage);
|
|
268
|
-
|
|
269
|
-
// 连接 MMKV
|
|
270
|
-
import { MMKV } from 'react-native-mmkv';
|
|
271
|
-
import { connectMMKV } from 'react-native-inapp-inspector/storage';
|
|
272
|
-
|
|
273
|
-
export const storage = new MMKV();
|
|
274
|
-
connectMMKV(storage, 'default');
|
|
275
|
-
```
|
|
276
|
-
|
|
277
|
-
### 3. 拦截与测试推送通知
|
|
278
|
-
```typescript
|
|
279
|
-
import { autoSetupPushLogger, recordPushNotification } from 'react-native-inapp-inspector/push';
|
|
280
|
-
|
|
281
|
-
// 自动连接支持的推送 SDK
|
|
282
|
-
autoSetupPushLogger();
|
|
283
|
-
|
|
284
|
-
// 手动记录推送通知
|
|
285
|
-
recordPushNotification({
|
|
286
|
-
title: '双十一特惠提醒',
|
|
287
|
-
body: '您关注的商品降价啦,速来抢购!',
|
|
288
|
-
source: 'fcm',
|
|
289
|
-
appState: 'foreground',
|
|
290
|
-
data: { skuId: '10086', deepLink: 'myapp://product/10086' },
|
|
291
|
-
});
|
|
292
|
-
```
|
|
293
|
-
|
|
294
|
-
### 4. 屏幕截图与录屏 API
|
|
295
|
-
```typescript
|
|
296
|
-
import { ScreenCapture } from 'react-native-inapp-inspector/capture';
|
|
297
|
-
|
|
298
|
-
// 真机截图
|
|
299
|
-
const screenshot = await ScreenCapture.takeScreenshot({ format: 'png' });
|
|
300
|
-
console.log('截图文件路径:', screenshot.uri);
|
|
301
|
-
|
|
302
|
-
// 开始录制视频
|
|
303
|
-
await ScreenCapture.startRecording({
|
|
304
|
-
audioSource: 'mic', // 'mic' | 'app' | 'none'
|
|
305
|
-
format: 'mp4',
|
|
306
|
-
});
|
|
307
|
-
|
|
308
|
-
// 结束录制
|
|
309
|
-
const video = await ScreenCapture.stopRecording();
|
|
310
|
-
console.log('录屏文件生成:', video.uri, video.duration);
|
|
311
|
-
```
|
|
312
|
-
|
|
313
|
-
### 5. 多语言编程控制接口
|
|
314
|
-
```typescript
|
|
315
|
-
import { setLanguage, getLanguage } from 'react-native-inapp-inspector';
|
|
316
|
-
|
|
317
|
-
// 切换为简体中文
|
|
318
|
-
setLanguage('zh');
|
|
319
|
-
|
|
320
|
-
console.log('当前语言:', getLanguage());
|
|
321
|
-
```
|
|
322
|
-
|
|
323
|
-
---
|
|
324
|
-
|
|
325
|
-
## 📱 模块化轻量导入 (Tree-shaking)
|
|
326
|
-
|
|
327
|
-
若你的应用仅需要部分功能,可按需导入子模块以最小化包体积:
|
|
328
|
-
|
|
329
|
-
```typescript
|
|
330
|
-
import { setupNetworkLogger } from 'react-native-inapp-inspector/network';
|
|
331
|
-
import { setupSocketLogger } from 'react-native-inapp-inspector/socket';
|
|
332
|
-
import { connectAsyncStorage, connectMMKV } from 'react-native-inapp-inspector/storage';
|
|
333
|
-
import { autoSetupPushLogger } from 'react-native-inapp-inspector/push';
|
|
334
|
-
import { connectReduxStore, inspectorReduxMiddleware } from 'react-native-inapp-inspector/redux';
|
|
335
|
-
import { setupConsoleLogger } from 'react-native-inapp-inspector/console';
|
|
336
|
-
import { ScreenCapture } from 'react-native-inapp-inspector/capture';
|
|
337
|
-
```
|
|
338
|
-
|
|
339
|
-
---
|
|
340
|
-
|
|
341
|
-
## 📚 常用 API 清单
|
|
342
|
-
|
|
343
|
-
| API 名称 | 类型 | 功能说明 |
|
|
344
|
-
| :--- | :--- | :--- |
|
|
345
|
-
| `<NetworkInspector />` | 组件 | 应用内悬浮调试球及主交互弹窗。 |
|
|
346
|
-
| `setupNetworkLogger()` | 方法 | 拦截全局 `fetch`、Axios 及 XMLHttpRequest。 |
|
|
347
|
-
| `setupConsoleLogger()` | 方法 | 拦截 `console.log/warn/error` 并通过 Metro 自动解析源码行列号。 |
|
|
348
|
-
| `setupSocketLogger()` | 方法 | 自动拦截 WebSocket 及 Socket.IO 双向消息流。 |
|
|
349
|
-
| `connectReduxStore(store)` | 方法 | 连接 Redux Store,开启 Action 时间线与 State 树差量对比。 |
|
|
350
|
-
| `connectAsyncStorage(storage)` | 方法 | 连接 AsyncStorage 并在 Storage 选项卡中开启实时编辑。 |
|
|
351
|
-
| `connectMMKV(instance, id?)` | 方法 | 连接 MMKV 并在 Storage 选项卡中开启实时编辑。 |
|
|
352
|
-
| `autoSetupPushLogger()` | 方法 | 自动监听并记录接收到的推送通知。 |
|
|
353
|
-
| `ScreenCapture` | 对象 | 提供真机截图、视频录屏及 GIF 导出的完整原生 API。 |
|
|
354
|
-
| `getNativeDeviceMetrics()` | 方法 | 获取手机运行内存、堆分配、磁盘剩余、电池状态等低层指标。 |
|
|
355
|
-
| `setupGlobalCrashHandler()` | 方法 | 捕获全局未处理的 JS 异常并串联前序用户操作面包屑。 |
|
|
356
|
-
| `setLanguage(code)` | 方法 | 动态设置调试器语种(支持全球 25 种主流语言)。 |
|
|
357
|
-
|
|
358
|
-
---
|
|
359
|
-
|
|
360
|
-
## 🤝 参与贡献
|
|
361
|
-
|
|
362
|
-
欢迎社区贡献!如有 Bug 反馈或新功能想法,欢迎查阅 [CONTRIBUTING.md](CONTRIBUTING.md) 并提交 Issue 或 Pull Request。
|
|
363
|
-
|
|
364
|
-
---
|
|
365
|
-
|
|
366
|
-
## 💖 支持与赞助
|
|
367
|
-
|
|
368
|
-
`react-native-inapp-inspector` 是由作者在业余时间维护的开源免费项目。如果它为您和团队节省了宝贵的排查时间,欢迎在 GitHub 上点亮一个小星星 ⭐️,或通过 GitHub Sponsors 给予赞助支持!
|
|
369
|
-
|
|
370
|
-
👉 **[在 GitHub Sponsors 上赞助作者 @vengatmacuser](https://github.com/sponsors/vengatmacuser)**
|
|
371
|
-
|
|
372
|
-
---
|
|
373
|
-
|
|
374
|
-
## 🔍 中文与全球搜索关键词 (Keywords)
|
|
375
|
-
|
|
376
|
-
为了方便中文开发者在百度、Google、GitHub 及 npm 快速检索到本工具,本项目针对常见开发痛点整理了高频搜索词:
|
|
377
|
-
|
|
378
|
-
* **核心痛点检索**:React Native 抓包工具、移动端免电脑抓包、真机抓包、APP 请求监听、网络监控面板、移动端控制台、React Native 调试器、前端移动端 DevTools、接口报错定位。
|
|
379
|
-
* **替代工具检索**:Flipper 替代方案 (Flipper alternative)、Charles 替代、Chucker React Native 版、Proxyman 替代、Whistle 替代、Reactotron 替代。
|
|
380
|
-
* **协议与存储**:WebSocket 实时抓包、Socket.io 帧监听、MMKV 可视化编辑器、AsyncStorage 数据查看、Redux 状态时间旅行、Firebase 埋点事件追踪。
|
|
381
|
-
* **地区生态**:中国大陆 (China)、台湾 (Taiwan)、香港 (Hong Kong)、新加坡 (Singapore) 开发者常用移动端联调利器。
|
|
382
|
-
|
|
383
|
-
---
|
|
384
|
-
|
|
385
|
-
## 📄 开源协议
|
|
386
|
-
|
|
387
|
-
本项目基于 [MIT License](./LICENSE) 协议开源。
|