react-native-inapp-inspector 2.3.20 → 2.3.22
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.md +14 -14
- package/android/src/main/java/com/inappinspector/NetworkInspectorModule.kt +58 -1
- package/dist/commonjs/components/AppHeaderLogo.js +2 -2
- package/dist/commonjs/components/ConsoleLogCard.js +1 -1
- package/dist/commonjs/components/HighlightText.js +13 -13
- package/dist/commonjs/components/Inspector/AboutModal.js +143 -251
- package/dist/commonjs/components/Inspector/DebuggingTab.js +19 -13
- package/dist/commonjs/components/Inspector/InspectorHeader.js +54 -80
- package/dist/commonjs/components/Inspector/MainScreen.js +13 -23
- package/dist/commonjs/components/Inspector/MediaGalleryTab.js +4 -4
- package/dist/commonjs/components/Inspector/MediaPreviewModal.js +1 -1
- package/dist/commonjs/components/Inspector/NpmStarPrompt.js +1 -1
- package/dist/commonjs/components/Inspector/TabBar.js +7 -7
- package/dist/commonjs/components/Inspector/UpdateAvailableModal.js +23 -24
- package/dist/commonjs/components/LogCard.js +16 -16
- package/dist/commonjs/components/NetworkIcons.d.ts +10 -0
- package/dist/commonjs/components/NetworkIcons.js +46 -4
- package/dist/commonjs/components/QRCodeView.js +2 -2
- package/dist/commonjs/components/TreeNode.js +16 -16
- package/dist/commonjs/constants/version.d.ts +1 -1
- package/dist/commonjs/constants/version.js +1 -1
- package/dist/commonjs/customHooks/bundleAnalyzer.js +1 -1
- package/dist/commonjs/helpers/index.d.ts +1 -0
- package/dist/commonjs/helpers/index.js +2 -2
- package/dist/commonjs/index.js +1 -1
- package/dist/commonjs/native/NativeInspector.d.ts +1 -0
- package/dist/commonjs/native/NativeInspector.js +1 -1
- package/dist/commonjs/types/interfaces.d.ts +0 -2
- package/dist/esm/components/AppHeaderLogo.js +6 -6
- package/dist/esm/components/ConsoleLogCard.js +6 -6
- package/dist/esm/components/HighlightText.js +17 -17
- package/dist/esm/components/Inspector/AboutModal.js +205 -313
- package/dist/esm/components/Inspector/DebuggingTab.js +32 -26
- package/dist/esm/components/Inspector/InspectorHeader.js +96 -122
- package/dist/esm/components/Inspector/MainScreen.js +66 -76
- package/dist/esm/components/Inspector/MediaGalleryTab.js +19 -19
- package/dist/esm/components/Inspector/MediaPreviewModal.js +18 -18
- package/dist/esm/components/Inspector/NpmStarPrompt.js +1 -1
- package/dist/esm/components/Inspector/TabBar.js +21 -21
- package/dist/esm/components/Inspector/UpdateAvailableModal.js +65 -66
- package/dist/esm/components/LogCard.js +43 -43
- package/dist/esm/components/NetworkIcons.d.ts +10 -0
- package/dist/esm/components/NetworkIcons.js +191 -149
- package/dist/esm/components/QRCodeView.js +4 -4
- package/dist/esm/components/TreeNode.js +53 -53
- package/dist/esm/constants/version.d.ts +1 -1
- package/dist/esm/constants/version.js +1 -1
- package/dist/esm/customHooks/bundleAnalyzer.js +1 -1
- package/dist/esm/helpers/index.d.ts +1 -0
- package/dist/esm/helpers/index.js +4 -4
- package/dist/esm/index.js +7 -7
- package/dist/esm/native/NativeInspector.d.ts +1 -0
- package/dist/esm/native/NativeInspector.js +1 -1
- package/dist/esm/types/interfaces.d.ts +0 -2
- package/ios/NetworkInspectorModule.mm +39 -3
- package/package.json +1 -1
- package/src/native/NativeInspector.ts +18 -0
- package/dist/commonjs/components/Inspector/FeedbackModal.d.ts +0 -16
- package/dist/commonjs/components/Inspector/FeedbackModal.js +0 -198
- package/dist/esm/components/Inspector/FeedbackModal.d.ts +0 -16
- package/dist/esm/components/Inspector/FeedbackModal.js +0 -198
package/README.md
CHANGED
|
@@ -30,20 +30,20 @@ The **zero-config, all-in-one in-app debugging overlay for React Native & Expo**
|
|
|
30
30
|
|
|
31
31
|
## ⚡ Why Choose `react-native-inapp-inspector`?
|
|
32
32
|
|
|
33
|
-
| Capability | **react-native-inapp-inspector** |
|
|
34
|
-
| :--- | :---: | :---: |
|
|
35
|
-
| **Native Module (Kotlin & iOS Bridge)** | ✅ |
|
|
36
|
-
| **Low-Level Hardware & RAM Telemetry** | ✅ |
|
|
37
|
-
| **Zero-Render Inactive Mode (0% Background Overhead)** | ✅ | ❌ |
|
|
38
|
-
| **Network Timing Waterfall & P95 Telemetry** | ✅ |
|
|
39
|
-
| **Network Inspector (Fetch & Axios)** | ✅ | ✅ |
|
|
40
|
-
| **cURL & Fetch Snippet Export** | ✅ |
|
|
41
|
-
| **Console Logger + Stack Traces** | ✅ (Metro Symbolicated) |
|
|
42
|
-
| **Redux State & Action Diffs** | ✅ |
|
|
43
|
-
| **Firebase Analytics Tracker** | ✅ | ❌ |
|
|
44
|
-
| **JS Bundle Size & Hermes Analyzer** | ✅ | ❌ |
|
|
45
|
-
| **Live Traffic Stream Freeze** | ✅ | ❌ |
|
|
46
|
-
| **Expo & Bare React Native** | ✅ |
|
|
33
|
+
| Capability | **react-native-inapp-inspector** | Flipper / RN Debugger |
|
|
34
|
+
| :--- | :---: | :---: |
|
|
35
|
+
| **Native Module (Kotlin & iOS Bridge)** | ✅ | ⚠️ |
|
|
36
|
+
| **Low-Level Hardware & RAM Telemetry** | ✅ | ⚠️ |
|
|
37
|
+
| **Zero-Render Inactive Mode (0% Background Overhead)** | ✅ | ❌ |
|
|
38
|
+
| **Network Timing Waterfall & P95 Telemetry** | ✅ | ✅ |
|
|
39
|
+
| **Network Inspector (Fetch & Axios)** | ✅ | ✅ |
|
|
40
|
+
| **cURL & Fetch Snippet Export** | ✅ | ⚠️ |
|
|
41
|
+
| **Console Logger + Stack Traces** | ✅ (Metro Symbolicated) | ✅ |
|
|
42
|
+
| **Redux State & Action Diffs** | ✅ | ⚠️ |
|
|
43
|
+
| **Firebase Analytics Tracker** | ✅ | ❌ |
|
|
44
|
+
| **JS Bundle Size & Hermes Analyzer** | ✅ | ❌ |
|
|
45
|
+
| **Live Traffic Stream Freeze** | ✅ | ❌ |
|
|
46
|
+
| **Expo & Bare React Native** | ✅ | ⚠️ |
|
|
47
47
|
|
|
48
48
|
---
|
|
49
49
|
|
|
@@ -1033,7 +1033,7 @@ class NetworkInspectorModule(private val reactContext: ReactApplicationContext)
|
|
|
1033
1033
|
|
|
1034
1034
|
@ReactMethod
|
|
1035
1035
|
fun playVideo(videoUri: String, promise: Promise) {
|
|
1036
|
-
val currentActivity = currentActivity
|
|
1036
|
+
val currentActivity = reactContext.currentActivity
|
|
1037
1037
|
if (currentActivity == null) {
|
|
1038
1038
|
promise.reject("PLAY_ERROR", "No active activity found to play video")
|
|
1039
1039
|
return
|
|
@@ -1143,6 +1143,63 @@ class NetworkInspectorModule(private val reactContext: ReactApplicationContext)
|
|
|
1143
1143
|
}
|
|
1144
1144
|
}
|
|
1145
1145
|
|
|
1146
|
+
@ReactMethod
|
|
1147
|
+
fun copyMediaToClipboard(filePath: String, promise: Promise) {
|
|
1148
|
+
val activity = reactContext.currentActivity ?: reactContext
|
|
1149
|
+
try {
|
|
1150
|
+
val clipboard = activity.getSystemService(android.content.Context.CLIPBOARD_SERVICE) as? android.content.ClipboardManager
|
|
1151
|
+
if (clipboard == null) {
|
|
1152
|
+
promise.resolve(com.facebook.react.bridge.Arguments.createMap().apply {
|
|
1153
|
+
putBoolean("success", false)
|
|
1154
|
+
putString("error", "Clipboard manager unavailable")
|
|
1155
|
+
})
|
|
1156
|
+
return
|
|
1157
|
+
}
|
|
1158
|
+
var cleanPath = filePath
|
|
1159
|
+
if (cleanPath.startsWith("file://")) {
|
|
1160
|
+
cleanPath = cleanPath.substring(7)
|
|
1161
|
+
}
|
|
1162
|
+
val file = java.io.File(cleanPath)
|
|
1163
|
+
if (file.exists()) {
|
|
1164
|
+
val uri = try {
|
|
1165
|
+
androidx.core.content.FileProvider.getUriForFile(
|
|
1166
|
+
reactContext,
|
|
1167
|
+
"${reactContext.packageName}.provider",
|
|
1168
|
+
file
|
|
1169
|
+
)
|
|
1170
|
+
} catch (e: Exception) {
|
|
1171
|
+
android.net.Uri.fromFile(file)
|
|
1172
|
+
}
|
|
1173
|
+
val clip = android.content.ClipData.newUri(
|
|
1174
|
+
reactContext.contentResolver,
|
|
1175
|
+
"Media",
|
|
1176
|
+
uri
|
|
1177
|
+
)
|
|
1178
|
+
clipboard.setPrimaryClip(clip)
|
|
1179
|
+
val map = com.facebook.react.bridge.Arguments.createMap().apply {
|
|
1180
|
+
putBoolean("success", true)
|
|
1181
|
+
putString("type", "uri")
|
|
1182
|
+
}
|
|
1183
|
+
promise.resolve(map)
|
|
1184
|
+
} else {
|
|
1185
|
+
val clip = android.content.ClipData.newPlainText("Path", filePath)
|
|
1186
|
+
clipboard.setPrimaryClip(clip)
|
|
1187
|
+
val map = com.facebook.react.bridge.Arguments.createMap().apply {
|
|
1188
|
+
putBoolean("success", true)
|
|
1189
|
+
putString("type", "string")
|
|
1190
|
+
}
|
|
1191
|
+
promise.resolve(map)
|
|
1192
|
+
}
|
|
1193
|
+
} catch (e: Exception) {
|
|
1194
|
+
val map = com.facebook.react.bridge.Arguments.createMap().apply {
|
|
1195
|
+
putBoolean("success", false)
|
|
1196
|
+
putString("error", e.message ?: "Copy failed")
|
|
1197
|
+
}
|
|
1198
|
+
promise.resolve(map)
|
|
1199
|
+
}
|
|
1200
|
+
}
|
|
1201
|
+
|
|
1202
|
+
|
|
1146
1203
|
@ReactMethod
|
|
1147
1204
|
fun addListener(eventName: String) {
|
|
1148
1205
|
// Required for React Native NativeEventEmitter
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
"use strict";var __importDefault=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.AppHeaderLogo=void 0;const react_1=__importDefault(require("react")),react_native_1=require("react-native"),BrandSquareIcon_1=__importDefault(require("./BrandSquareIcon")),AppHeaderLogo=({size:e=46,customIcon:t})=>{const r=Math.round(e*.23);if(t){if(react_1.default.isValidElement(t)){const o=react_1.default.cloneElement(t,{size:e,width:e,height:e});return<react_native_1.View style={[logoStyles.container,{width:e,height:e,borderRadius:r}]}>
|
|
1
|
+
"use strict";var __importDefault=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.AppHeaderLogo=void 0;const react_1=__importDefault(require("react")),react_native_1=require("react-native"),BrandSquareIcon_1=__importDefault(require("./BrandSquareIcon")),AppColors_1=require("../styles/AppColors"),AppHeaderLogo=({size:e=46,customIcon:t})=>{const r=Math.round(e*.23);if(t){if(react_1.default.isValidElement(t)){const o=react_1.default.cloneElement(t,{size:e,width:e,height:e});return<react_native_1.View style={[logoStyles.container,{width:e,height:e,borderRadius:r}]}>
|
|
2
2
|
{o}
|
|
3
3
|
</react_native_1.View>}return<react_native_1.View style={[logoStyles.imageContainer,{width:e,height:e,borderRadius:r}]}>
|
|
4
4
|
<react_native_1.Image source={t}style={[logoStyles.image,{borderRadius:r-2}]}resizeMode="cover"/>
|
|
5
5
|
</react_native_1.View>}return<react_native_1.View style={[logoStyles.container,{width:e,height:e,borderRadius:r}]}>
|
|
6
6
|
<BrandSquareIcon_1.default size={e}/>
|
|
7
|
-
</react_native_1.View>};exports.AppHeaderLogo=AppHeaderLogo;const logoStyles=react_native_1.StyleSheet.create({container:{overflow:"hidden",alignItems:"center",justifyContent:"center",borderWidth:1.5,borderColor:
|
|
7
|
+
</react_native_1.View>};exports.AppHeaderLogo=AppHeaderLogo;const logoStyles=react_native_1.StyleSheet.create({container:{overflow:"hidden",alignItems:"center",justifyContent:"center",borderWidth:1.5,borderColor:AppColors_1.AppColors.whiteAlpha33,backgroundColor:AppColors_1.AppColors.whiteAlpha12,shadowColor:AppColors_1.AppColors.shadowColorString,shadowOffset:{width:0,height:2},shadowOpacity:.35,shadowRadius:5,elevation:4},imageContainer:{overflow:"hidden",backgroundColor:AppColors_1.AppColors.whiteAlpha15,borderWidth:1.5,borderColor:AppColors_1.AppColors.whiteAlpha33,alignItems:"center",justifyContent:"center",shadowColor:AppColors_1.AppColors.shadowColorString,shadowOffset:{width:0,height:2},shadowOpacity:.3,shadowRadius:4,elevation:3,padding:1.5},image:{width:"100%",height:"100%"}});exports.default=exports.AppHeaderLogo;
|
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
</react_native_1.View>})}
|
|
9
9
|
</react_native_1.View>
|
|
10
10
|
<LogSyntaxHighlighter_1.default text={g}search={o}style={t}numberOfLines={l}detectLinks={!0}/>
|
|
11
|
-
</react_native_1.View>}return<LogSyntaxHighlighter_1.default text={r}search={o}style={t}numberOfLines={l}detectLinks={!0}/>};exports.ConsoleLogCard=react_1.default.memo(function({item:o,searchStr:t=""}){const{setSelectedLog:n}=(0,InspectorContext_1.useInspector)(),{t:l}=(0,i18n_1.useTranslation)(),[c,C]=(0,react_1.useState)(!1),i=(0,helpers_1.getJsonContent)(o.message),g=o.message.toLowerCase().includes("[analytics error]"),f=o.sourceMethod==="log",a=o.caller&&o.caller!=="Unknown"?(0,helpers_1.parseStackLine)(o.caller,!0):null,e=(()=>{const p=(o.type||"log").toLowerCase(),d=(o.sourceMethod||p).toLowerCase();return g||p==="error"||d==="error"?{border:AppColors_1.AppColors.errorColor,badgeBg:`${AppColors_1.AppColors.errorColor}18`,badgeText:AppColors_1.AppColors.errorColor,label:"ERROR",cardBg:
|
|
11
|
+
</react_native_1.View>}return<LogSyntaxHighlighter_1.default text={r}search={o}style={t}numberOfLines={l}detectLinks={!0}/>};exports.ConsoleLogCard=react_1.default.memo(function({item:o,searchStr:t=""}){const{setSelectedLog:n}=(0,InspectorContext_1.useInspector)(),{t:l}=(0,i18n_1.useTranslation)(),[c,C]=(0,react_1.useState)(!1),i=(0,helpers_1.getJsonContent)(o.message),g=o.message.toLowerCase().includes("[analytics error]"),f=o.sourceMethod==="log",a=o.caller&&o.caller!=="Unknown"?(0,helpers_1.parseStackLine)(o.caller,!0):null,e=(()=>{const p=(o.type||"log").toLowerCase(),d=(o.sourceMethod||p).toLowerCase();return g||p==="error"||d==="error"?{border:AppColors_1.AppColors.errorColor,badgeBg:`${AppColors_1.AppColors.errorColor}18`,badgeText:AppColors_1.AppColors.errorColor,label:"ERROR",cardBg:AppColors_1.AppColors.errorCardBg,methodBorder:`${AppColors_1.AppColors.errorColor}30`,methodBg:`${AppColors_1.AppColors.errorColor}12`,methodText:AppColors_1.AppColors.errorColor,textColor:AppColors_1.AppColors.redErrorText}:p==="warn"||d==="warn"?{border:AppColors_1.AppColors.amber600,badgeBg:`${AppColors_1.AppColors.amber600}18`,badgeText:AppColors_1.AppColors.amber800,label:"WARN",cardBg:AppColors_1.AppColors.warnCardBg,methodBorder:`${AppColors_1.AppColors.amber600}33`,methodBg:`${AppColors_1.AppColors.amber600}14`,methodText:AppColors_1.AppColors.amber800,textColor:AppColors_1.AppColors.amber800}:p==="debug"||d==="debug"?{border:AppColors_1.AppColors.purple500,badgeBg:`${AppColors_1.AppColors.purple500}18`,badgeText:AppColors_1.AppColors.purple,label:"DEBUG",cardBg:AppColors_1.AppColors.purpleTintBg,methodBorder:`${AppColors_1.AppColors.purple500}33`,methodBg:`${AppColors_1.AppColors.purple500}12`,methodText:AppColors_1.AppColors.purple,textColor:AppColors_1.AppColors.purpleText}:d==="info"||p==="info"&&d!=="log"?{border:AppColors_1.AppColors.sky500,badgeBg:`${AppColors_1.AppColors.sky500}18`,badgeText:AppColors_1.AppColors.sky600,label:"INFO",cardBg:AppColors_1.AppColors.blueTintBg,methodBorder:`${AppColors_1.AppColors.sky500}33`,methodBg:`${AppColors_1.AppColors.sky500}12`,methodText:AppColors_1.AppColors.sky600,textColor:AppColors_1.AppColors.blue800}:{border:AppColors_1.AppColors.indigo500,badgeBg:`${AppColors_1.AppColors.indigo500}15`,badgeText:AppColors_1.AppColors.indigo600Alt,label:"LOG",cardBg:AppColors_1.AppColors.white,methodBorder:AppColors_1.AppColors.dividerColor,methodBg:AppColors_1.AppColors.indigo50,methodText:AppColors_1.AppColors.indigo600Alt,textColor:AppColors_1.AppColors.primaryBlack}})(),s=i?(0,helpers_1.getJsonPreviewText)(i.data):null,A=()=>{n(o)},T=p=>{p?.stopPropagation?.(),C(d=>!d)};return<react_native_1.View style={styles.container}>
|
|
12
12
|
<react_native_1.Pressable onPress={A}style={({pressed:p})=>[styles.card,{borderLeftColor:e.border,borderLeftWidth:3.5,backgroundColor:e.cardBg},p&&styles.cardPressed]}>
|
|
13
13
|
|
|
14
14
|
<react_native_1.View style={styles.cardHeader}>
|
|
@@ -1,17 +1,17 @@
|
|
|
1
|
-
"use strict";var __importDefault=this&&this.__importDefault||function(
|
|
1
|
+
"use strict";var __importDefault=this&&this.__importDefault||function(i){return i&&i.__esModule?i:{default:i}};Object.defineProperty(exports,"__esModule",{value:!0});const react_1=__importDefault(require("react")),react_native_1=require("react-native"),helpers_1=require("../helpers"),AppColors_1=require("../styles/AppColors"),HighlightText=react_1.default.memo(function({text:t,search:n,style:a,highlightStyle:c,detectLinks:u,numberOfLines:o,...s}){if(!t||t.length>2e4&&!n&&!u)return<react_native_1.Text style={a}numberOfLines={o}{...s}>
|
|
2
2
|
{t}
|
|
3
|
-
</react_native_1.Text>;const
|
|
4
|
-
{f.map((
|
|
5
|
-
{
|
|
6
|
-
</react_native_1.Text>:<react_native_1.Text key={T}>{
|
|
7
|
-
</react_native_1.Text>};if(
|
|
8
|
-
{
|
|
3
|
+
</react_native_1.Text>;const x=/(https?:\/\/[^\s]+)/g,p=(r,e)=>{if(!n)return<react_native_1.Text key={e}>{r}</react_native_1.Text>;const _=new RegExp(`(${(0,helpers_1.escapeRegex)(n)})`,"gi"),f=r.split(_);return<react_native_1.Text key={e}>
|
|
4
|
+
{f.map((l,T)=>l.toLowerCase()===n.toLowerCase()?<react_native_1.Text key={T}style={c}>
|
|
5
|
+
{l}
|
|
6
|
+
</react_native_1.Text>:<react_native_1.Text key={T}>{l}</react_native_1.Text>)}
|
|
7
|
+
</react_native_1.Text>};if(u&&t&&t.length<2e4){const r=t.split(x);return<react_native_1.Text style={a}numberOfLines={o}{...s}>
|
|
8
|
+
{r.map((e,_)=>e.match(x)?<react_native_1.Text key={`link-${_}`}style={{color:AppColors_1.AppColors.skyBlue,textDecorationLine:"underline"}}onPress={()=>{(0,helpers_1.handleOpenExternalLink)(e)}}>
|
|
9
9
|
{e}
|
|
10
|
-
</react_native_1.Text>:
|
|
11
|
-
</react_native_1.Text>}if(!
|
|
10
|
+
</react_native_1.Text>:p(e,`text-${_}`))}
|
|
11
|
+
</react_native_1.Text>}if(!n)return<react_native_1.Text style={a}numberOfLines={o}{...s}>
|
|
12
12
|
{t}
|
|
13
|
-
</react_native_1.Text>;const
|
|
14
|
-
{v.map((
|
|
15
|
-
{
|
|
16
|
-
</react_native_1.Text>:<react_native_1.Text key={e}>{
|
|
13
|
+
</react_native_1.Text>;const g=new RegExp(`(${(0,helpers_1.escapeRegex)(n)})`,"gi"),v=t.split(g);return<react_native_1.Text style={a}numberOfLines={o}{...s}>
|
|
14
|
+
{v.map((r,e)=>r.toLowerCase()===n.toLowerCase()?<react_native_1.Text key={e}style={c}>
|
|
15
|
+
{r}
|
|
16
|
+
</react_native_1.Text>:<react_native_1.Text key={e}>{r}</react_native_1.Text>)}
|
|
17
17
|
</react_native_1.Text>});exports.default=HighlightText;
|