react-native-inapp-inspector 2.3.10 → 2.3.11

package/dist/esm/components/Inspector/DebuggingTab.js

@@ -0,0 +1,642 @@
+import React, { useState, useEffect, useMemo, useCallback } from 'react';
+import { View, Text, ScrollView, StyleSheet, TextInput, TouchableOpacity, NativeModules, Share, } from 'react-native';
+import { AppColors } from '../../styles/AppColors';
+import { AppFonts } from '../../styles/AppFonts';
+import QRCodeView from '../QRCodeView';
+import TouchableScale from '../TouchableScale';
+import { copyToClipboard } from '../../helpers';
+import { showToast } from '../../helpers/toast';
+import { useTranslation } from '../../i18n';
+import { BoltIcon, SmartphoneIcon, PackageIcon, RepeatIcon, } from '../NetworkIcons';
+const COMMON_PORTS = [8081, 8082, 8083, 19000];
+export const DebuggingTab = () => {
+    const { t } = useTranslation();
+    const detectedConfig = useMemo(() => {
+        const scriptURL = NativeModules.SourceCode?.scriptURL || '';
+        let host = 'localhost';
+        let port = 8081;
+        try {
+            if (scriptURL.includes('://')) {
+                const urlWithoutScheme = scriptURL.split('://')[1];
+                const hostAndPort = urlWithoutScheme.split('/')[0];
+                if (hostAndPort.includes(':')) {
+                    const parts = hostAndPort.split(':');
+                    host = parts[0];
+                    const parsedPort = parseInt(parts[1], 10);
+                    if (!isNaN(parsedPort))
+                        port = parsedPort;
+                }
+                else {
+                    host = hostAndPort;
+                }
+            }
+        }
+        catch { }
+        return { host, port, scriptURL };
+    }, []);
+    const [hostIp, setHostIp] = useState(() => {
+        if (detectedConfig.host === 'localhost' ||
+            detectedConfig.host === '127.0.0.1' ||
+            detectedConfig.host === '10.0.2.2') {
+            return '192.168.1.15';
+        }
+        return detectedConfig.host;
+    });
+    const [selectedPort, setSelectedPort] = useState(detectedConfig.port);
+    const [apkPath, setApkPath] = useState('app-debug.apk');
+    const [activeQrTab, setActiveQrTab] = useState('metro');
+    const [isAutoDetecting, setIsAutoDetecting] = useState(false);
+    const [portsStatus, setPortsStatus] = useState({});
+    const probePorts = useCallback(async () => {
+        setIsAutoDetecting(true);
+        const results = {};
+        for (const p of COMMON_PORTS) {
+            results[p] = { port: p, status: 'checking' };
+        }
+        setPortsStatus({ ...results });
+        let foundActivePort = null;
+        for (const p of COMMON_PORTS) {
+            const startTime = Date.now();
+            try {
+                const controller = new AbortController();
+                const timeoutId = setTimeout(() => controller.abort(), 1500);
+                const res = await fetch(`http://localhost:${p}/status`, {
+                    signal: controller.signal,
+                });
+                clearTimeout(timeoutId);
+                const text = await res.text();
+                const latency = Date.now() - startTime;
+                if (res.ok && text.includes('packager-status:running')) {
+                    results[p] = { port: p, status: 'active', latencyMs: latency };
+                    if (!foundActivePort)
+                        foundActivePort = p;
+                }
+                else {
+                    results[p] = { port: p, status: 'inactive' };
+                }
+            }
+            catch {
+                results[p] = { port: p, status: 'inactive' };
+            }
+            setPortsStatus({ ...results });
+        }
+        if (foundActivePort) {
+            setSelectedPort(foundActivePort);
+            showToast(`Detected Metro running on Port ${foundActivePort}!`);
+        }
+        setIsAutoDetecting(false);
+    }, []);
+    useEffect(() => {
+        probePorts();
+    }, [probePorts]);
+    const metroBundleUrl = `http://${hostIp}:${selectedPort}/index.bundle?platform=android&dev=true`;
+    const apkDownloadUrl = `http://${hostIp}:${selectedPort}/${apkPath}`;
+    const devSettingsHost = `${hostIp}:${selectedPort}`;
+    const currentQrValue = useMemo(() => {
+        if (activeQrTab === 'apk')
+            return apkDownloadUrl;
+        if (activeQrTab === 'host')
+            return devSettingsHost;
+        return metroBundleUrl;
+    }, [activeQrTab, apkDownloadUrl, devSettingsHost, metroBundleUrl]);
+    const activePortInfo = portsStatus[selectedPort];
+    return (<ScrollView style={styles.container} contentContainerStyle={styles.content} showsVerticalScrollIndicator={false}>
+      
+      <View style={styles.serverCard}>
+        <View style={styles.serverCardTop}>
+          <View style={styles.serverStatusLeft}>
+            <View style={[
+            styles.statusDot,
+            {
+                backgroundColor: activePortInfo?.status === 'active'
+                    ? AppColors.greenColor
+                    : activePortInfo?.status === 'checking'
+                        ? AppColors.warningIconGold
+                        : AppColors.errorColor,
+            },
+        ]}/>
+            <View>
+              <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
+                <Text style={styles.serverTitle}>Metro Dev Server</Text>
+                <View style={styles.portPill}>
+                  <Text style={styles.portPillText}>Port {selectedPort}</Text>
+                </View>
+              </View>
+              <Text style={styles.serverSubtitle}>
+                {activePortInfo?.status === 'active'
+            ? `🟢 Active & Bundling (${activePortInfo.latencyMs}ms)`
+            : activePortInfo?.status === 'checking'
+                ? '🟡 Probing Metro Ports...'
+                : '🔴 Standby / Select active port'}
+              </Text>
+            </View>
+          </View>
+
+          <TouchableScale onPress={probePorts} style={styles.scanBtn} hitSlop={8}>
+            <RepeatIcon size={12} color={AppColors.purple}/>
+            <Text style={styles.scanBtnText}>Re-scan</Text>
+          </TouchableScale>
+        </View>
+
+        
+        <View style={styles.portsRow}>
+          {COMMON_PORTS.map(p => {
+            const isSelected = selectedPort === p;
+            const pInfo = portsStatus[p];
+            const isActive = pInfo?.status === 'active';
+            return (<TouchableOpacity key={p} activeOpacity={0.7} onPress={() => setSelectedPort(p)} style={[
+                    styles.portChip,
+                    isSelected && styles.portChipSelected,
+                    isActive && { borderColor: AppColors.greenColor },
+                ]}>
+                <View style={[
+                    styles.portMiniDot,
+                    {
+                        backgroundColor: isActive
+                            ? AppColors.greenColor
+                            : AppColors.grayTextWeak,
+                    },
+                ]}/>
+                <Text style={[
+                    styles.portChipText,
+                    isSelected && styles.portChipTextSelected,
+                ]}>
+                  {p}
+                </Text>
+                {isActive && (<View style={styles.liveBadge}>
+                    <Text style={styles.liveBadgeText}>LIVE</Text>
+                  </View>)}
+              </TouchableOpacity>);
+        })}
+        </View>
+      </View>
+
+      
+      <View style={styles.card}>
+        <View style={styles.cardHeader}>
+          <Text style={styles.cardTitle}>HOST IP & BUNDLE LOCATION</Text>
+          <TouchableOpacity onPress={() => {
+            if (detectedConfig.host !== 'localhost' &&
+                detectedConfig.host !== '127.0.0.1' &&
+                detectedConfig.host !== '10.0.2.2') {
+                setHostIp(detectedConfig.host);
+                showToast(`Reset to detected IP: ${detectedConfig.host}`);
+            }
+        }}>
+            <Text style={styles.headerActionText}>Reset to Detected</Text>
+          </TouchableOpacity>
+        </View>
+
+        <View style={styles.inputContainer}>
+          <Text style={styles.inputPrefix}>http://</Text>
+          <TextInput style={styles.input} value={hostIp} onChangeText={setHostIp} placeholder="192.168.1.15" placeholderTextColor={AppColors.grayTextWeak} autoCapitalize="none" autoCorrect={false}/>
+          <Text style={styles.inputSuffix}>:{selectedPort}</Text>
+        </View>
+        <Text style={styles.inputHint}>
+          💡 Ensure your physical Android device and Mac are connected to the same Wi-Fi network.
+        </Text>
+      </View>
+
+      
+      <View style={styles.qrCard}>
+        
+        <View style={styles.qrTabsRow}>
+          <TouchableOpacity activeOpacity={0.7} onPress={() => setActiveQrTab('metro')} style={[
+            styles.qrTab,
+            activeQrTab === 'metro' && styles.qrTabActive,
+        ]}>
+            <BoltIcon size={13} color={activeQrTab === 'metro' ? AppColors.white : AppColors.grayText}/>
+            <Text style={[
+            styles.qrTabText,
+            activeQrTab === 'metro' && styles.qrTabTextActive,
+        ]}>
+              Metro Live Reload
+            </Text>
+          </TouchableOpacity>
+
+          <TouchableOpacity activeOpacity={0.7} onPress={() => setActiveQrTab('apk')} style={[
+            styles.qrTab,
+            activeQrTab === 'apk' && styles.qrTabActive,
+        ]}>
+            <PackageIcon size={13} color={activeQrTab === 'apk' ? AppColors.white : AppColors.grayText}/>
+            <Text style={[
+            styles.qrTabText,
+            activeQrTab === 'apk' && styles.qrTabTextActive,
+        ]}>
+              Install Debug APK
+            </Text>
+          </TouchableOpacity>
+
+          <TouchableOpacity activeOpacity={0.7} onPress={() => setActiveQrTab('host')} style={[
+            styles.qrTab,
+            activeQrTab === 'host' && styles.qrTabActive,
+        ]}>
+            <SmartphoneIcon size={13} color={activeQrTab === 'host' ? AppColors.white : AppColors.grayText}/>
+            <Text style={[
+            styles.qrTabText,
+            activeQrTab === 'host' && styles.qrTabTextActive,
+        ]}>
+              Dev Host Info
+            </Text>
+          </TouchableOpacity>
+        </View>
+
+        
+        <View style={styles.qrWrapper}>
+          <QRCodeView value={currentQrValue} size={190} color={AppColors.primaryBlack} backgroundColor={AppColors.white}/>
+
+          <View style={styles.qrInfoBox}>
+            <Text style={styles.qrTargetTitle}>
+              {activeQrTab === 'apk'
+            ? '📦 Direct APK Download URL'
+            : activeQrTab === 'host'
+                ? '📱 Dev Settings Bundle Host'
+                : '⚡ Live Metro Fast-Refresh Endpoint'}
+            </Text>
+            <Text style={styles.qrTargetUrl} numberOfLines={2} ellipsizeMode="middle">
+              {currentQrValue}
+            </Text>
+          </View>
+        </View>
+
+        
+        <View style={styles.qrActionsRow}>
+          <TouchableScale onPress={() => copyToClipboard(currentQrValue, 'QR Link')} style={styles.actionBtn}>
+            <Text style={styles.actionBtnText}>Copy Link</Text>
+          </TouchableScale>
+
+          <TouchableScale onPress={() => {
+            Share.share({
+                message: currentQrValue,
+                title: 'Metro Debug Link',
+            });
+        }} style={[styles.actionBtn, styles.actionBtnPrimary]}>
+            <Text style={styles.actionBtnPrimaryText}>Share to Device</Text>
+          </TouchableScale>
+        </View>
+      </View>
+
+      
+      <View style={styles.guideCard}>
+        <Text style={styles.guideHeading}>📱 HOW TO CONNECT ANDROID DEVICE:</Text>
+
+        <View style={styles.stepRow}>
+          <View style={styles.stepNumberBadge}>
+            <Text style={styles.stepNumberText}>1</Text>
+          </View>
+          <View style={{ flex: 1 }}>
+            <Text style={styles.stepTitle}>Connect to Same Wi-Fi</Text>
+            <Text style={styles.stepDesc}>
+              Make sure your Android phone is connected to the same Wi-Fi router or Mac Mobile Hotspot.
+            </Text>
+          </View>
+        </View>
+
+        <View style={styles.stepRow}>
+          <View style={styles.stepNumberBadge}>
+            <Text style={styles.stepNumberText}>2</Text>
+          </View>
+          <View style={{ flex: 1 }}>
+            <Text style={styles.stepTitle}>Scan to Install / Connect</Text>
+            <Text style={styles.stepDesc}>
+              Open Android Camera or browser, scan the QR code above to download the APK or connect Metro.
+            </Text>
+          </View>
+        </View>
+
+        <View style={styles.stepRow}>
+          <View style={styles.stepNumberBadge}>
+            <Text style={styles.stepNumberText}>3</Text>
+          </View>
+          <View style={{ flex: 1 }}>
+            <Text style={styles.stepTitle}>Simultaneous Live Fast-Refresh ⚡</Text>
+            <Text style={styles.stepDesc}>
+              Any changes saved in VS Code will immediately update <Text style={{ fontWeight: '700' }}>both the iOS Simulator and physical Android phone</Text> in real-time!
+            </Text>
+          </View>
+        </View>
+      </View>
+    </ScrollView>);
+};
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        backgroundColor: AppColors.contentBg,
+    },
+    content: {
+        padding: 12,
+        gap: 12,
+        paddingBottom: 40,
+    },
+    serverCard: {
+        backgroundColor: AppColors.primaryLight,
+        borderRadius: 14,
+        padding: 14,
+        borderWidth: 1,
+        borderColor: AppColors.grayBorderSecondary,
+        shadowColor: AppColors.black,
+        shadowOffset: { width: 0, height: 2 },
+        shadowOpacity: 0.05,
+        shadowRadius: 4,
+        elevation: 2,
+        gap: 12,
+    },
+    serverCardTop: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+    },
+    serverStatusLeft: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 10,
+        flex: 1,
+    },
+    statusDot: {
+        width: 12,
+        height: 12,
+        borderRadius: 6,
+    },
+    serverTitle: {
+        fontFamily: AppFonts.interBold,
+        fontSize: 15,
+        color: AppColors.primaryBlack,
+    },
+    serverSubtitle: {
+        fontFamily: AppFonts.interMedium,
+        fontSize: 11,
+        color: AppColors.grayText,
+        marginTop: 2,
+    },
+    portPill: {
+        backgroundColor: `${AppColors.purple}18`,
+        paddingHorizontal: 6,
+        paddingVertical: 2,
+        borderRadius: 6,
+    },
+    portPillText: {
+        fontFamily: AppFonts.interBold,
+        fontSize: 10,
+        color: AppColors.purple,
+    },
+    scanBtn: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 4,
+        paddingHorizontal: 8,
+        paddingVertical: 4,
+        borderRadius: 6,
+        backgroundColor: `${AppColors.purple}14`,
+        borderWidth: 1,
+        borderColor: `${AppColors.purple}30`,
+    },
+    scanBtnText: {
+        fontFamily: AppFonts.interBold,
+        fontSize: 11,
+        color: AppColors.purple,
+    },
+    portsRow: {
+        flexDirection: 'row',
+        gap: 8,
+    },
+    portChip: {
+        flex: 1,
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+        gap: 4,
+        paddingVertical: 7,
+        borderRadius: 8,
+        backgroundColor: AppColors.grayBackground,
+        borderWidth: 1,
+        borderColor: AppColors.grayBorderSecondary,
+    },
+    portChipSelected: {
+        backgroundColor: `${AppColors.purple}18`,
+        borderColor: AppColors.purple,
+    },
+    portMiniDot: {
+        width: 5,
+        height: 5,
+        borderRadius: 2.5,
+    },
+    portChipText: {
+        fontFamily: AppFonts.interBold,
+        fontSize: 11,
+        color: AppColors.grayTextStrong,
+    },
+    portChipTextSelected: {
+        color: AppColors.purple,
+    },
+    liveBadge: {
+        backgroundColor: AppColors.greenColor,
+        paddingHorizontal: 3,
+        paddingVertical: 0.5,
+        borderRadius: 3,
+    },
+    liveBadgeText: {
+        fontFamily: AppFonts.interBold,
+        fontSize: 7.5,
+        color: AppColors.white,
+    },
+    card: {
+        backgroundColor: AppColors.primaryLight,
+        borderRadius: 14,
+        padding: 14,
+        borderWidth: 1,
+        borderColor: AppColors.grayBorderSecondary,
+        shadowColor: AppColors.black,
+        shadowOffset: { width: 0, height: 2 },
+        shadowOpacity: 0.05,
+        shadowRadius: 4,
+        elevation: 2,
+        gap: 8,
+    },
+    cardHeader: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+    },
+    cardTitle: {
+        fontFamily: AppFonts.interBold,
+        fontSize: 11,
+        color: AppColors.grayTextWeak,
+        letterSpacing: 0.6,
+    },
+    headerActionText: {
+        fontFamily: AppFonts.interBold,
+        fontSize: 11,
+        color: AppColors.purple,
+    },
+    inputContainer: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        backgroundColor: AppColors.grayBackground,
+        borderRadius: 10,
+        borderWidth: 1,
+        borderColor: AppColors.grayBorderSecondary,
+        paddingHorizontal: 10,
+        height: 40,
+    },
+    inputPrefix: {
+        fontFamily: AppFonts.interMedium,
+        fontSize: 12.5,
+        color: AppColors.grayTextWeak,
+    },
+    input: {
+        flex: 1,
+        fontFamily: AppFonts.interBold,
+        fontSize: 13,
+        color: AppColors.primaryBlack,
+        paddingVertical: 0,
+    },
+    inputSuffix: {
+        fontFamily: AppFonts.interBold,
+        fontSize: 12.5,
+        color: AppColors.purple,
+    },
+    inputHint: {
+        fontFamily: AppFonts.interRegular,
+        fontSize: 11,
+        color: AppColors.grayTextWeak,
+        lineHeight: 15,
+    },
+    qrCard: {
+        backgroundColor: AppColors.primaryLight,
+        borderRadius: 14,
+        padding: 14,
+        borderWidth: 1,
+        borderColor: AppColors.grayBorderSecondary,
+        shadowColor: AppColors.black,
+        shadowOffset: { width: 0, height: 2 },
+        shadowOpacity: 0.05,
+        shadowRadius: 4,
+        elevation: 2,
+        alignItems: 'center',
+        gap: 14,
+    },
+    qrTabsRow: {
+        flexDirection: 'row',
+        backgroundColor: AppColors.grayBackground,
+        borderRadius: 10,
+        padding: 3,
+        width: '100%',
+        gap: 4,
+    },
+    qrTab: {
+        flex: 1,
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+        gap: 4,
+        paddingVertical: 7,
+        borderRadius: 8,
+    },
+    qrTabActive: {
+        backgroundColor: AppColors.purple,
+    },
+    qrTabText: {
+        fontFamily: AppFonts.interMedium,
+        fontSize: 11,
+        color: AppColors.grayText,
+    },
+    qrTabTextActive: {
+        color: AppColors.white,
+        fontFamily: AppFonts.interBold,
+    },
+    qrWrapper: {
+        alignItems: 'center',
+        gap: 12,
+    },
+    qrInfoBox: {
+        alignItems: 'center',
+        maxWidth: 280,
+        gap: 2,
+    },
+    qrTargetTitle: {
+        fontFamily: AppFonts.interBold,
+        fontSize: 11.5,
+        color: AppColors.primaryBlack,
+    },
+    qrTargetUrl: {
+        fontFamily: AppFonts.interRegular,
+        fontSize: 10.5,
+        color: AppColors.skyBlue,
+        textAlign: 'center',
+    },
+    qrActionsRow: {
+        flexDirection: 'row',
+        gap: 10,
+        width: '100%',
+    },
+    actionBtn: {
+        flex: 1,
+        paddingVertical: 10,
+        borderRadius: 10,
+        borderWidth: 1,
+        borderColor: AppColors.grayBorderSecondary,
+        backgroundColor: AppColors.grayBackground,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    actionBtnText: {
+        fontFamily: AppFonts.interBold,
+        fontSize: 12,
+        color: AppColors.grayTextStrong,
+    },
+    actionBtnPrimary: {
+        backgroundColor: AppColors.purple,
+        borderColor: AppColors.purple,
+    },
+    actionBtnPrimaryText: {
+        fontFamily: AppFonts.interBold,
+        fontSize: 12,
+        color: AppColors.white,
+    },
+    guideCard: {
+        backgroundColor: AppColors.primaryLight,
+        borderRadius: 14,
+        padding: 14,
+        borderWidth: 1,
+        borderColor: AppColors.grayBorderSecondary,
+        gap: 10,
+    },
+    guideHeading: {
+        fontFamily: AppFonts.interBold,
+        fontSize: 11,
+        color: AppColors.grayTextWeak,
+        letterSpacing: 0.6,
+    },
+    stepRow: {
+        flexDirection: 'row',
+        alignItems: 'flex-start',
+        gap: 10,
+    },
+    stepNumberBadge: {
+        width: 22,
+        height: 22,
+        borderRadius: 11,
+        backgroundColor: `${AppColors.purple}18`,
+        alignItems: 'center',
+        justifyContent: 'center',
+        marginTop: 1,
+    },
+    stepNumberText: {
+        fontFamily: AppFonts.interBold,
+        fontSize: 11,
+        color: AppColors.purple,
+    },
+    stepTitle: {
+        fontFamily: AppFonts.interBold,
+        fontSize: 12.5,
+        color: AppColors.primaryBlack,
+    },
+    stepDesc: {
+        fontFamily: AppFonts.interRegular,
+        fontSize: 11,
+        color: AppColors.grayText,
+        lineHeight: 16,
+        marginTop: 1,
+    },
+});
+export default DebuggingTab;

package/dist/esm/components/Inspector/MainScreen.js

@@ -19,6 +19,7 @@ import CrashTab from './CrashTab';
 import CrashDetail from './CrashDetail';
 import DeviceInfoTab from './DeviceInfoTab';
 import StorageTab from './StorageTab';
+import DebuggingTab from './DebuggingTab';
 import SettingsPanel from './SettingsPanel';
 import NpmUpdateToast from './NpmUpdateToast';
 import Toast from '../Toast';
@@ -118,6 +119,7 @@ const MainScreen = () => {
                       {activeTab === 'crash' && <CrashTab />}
                       {activeTab === 'device' && <DeviceInfoTab />}
                       {activeTab === 'storage' && <StorageTab />}
+                      {activeTab === 'debugging' && <DebuggingTab />}
                     </Animated.View>
 
                     

package/dist/esm/components/Inspector/SettingsPanel.js

@@ -17,7 +17,7 @@ import { clearPerformanceEvents } from '../../customHooks/performanceTracker';
 import { isReduxConnected } from '../../customHooks/reduxLogger';
 import { isAnalyticsConnected } from '../../customHooks/analyticsLogger';
 import { useTranslation } from '../../i18n';
-import { SignalIcon, TerminalIcon, AnalyticsIcon, SettingsIcon, SunIcon, MoonIcon, ScreenIcon, MotionIcon, LayersIcon, EyeIcon, CheckIcon, TrashIcon, PackageIcon, ReduxIcon, PerformanceIcon, CrashIcon, ShieldAlertIcon, ForwardChevronIcon, ChevronDownIcon, NpmIcon, BoltIcon, BrainIcon, SmartphoneIcon, DatabaseIcon, } from '../NetworkIcons';
+import { SignalIcon, TerminalIcon, AnalyticsIcon, SettingsIcon, SunIcon, MoonIcon, ScreenIcon, MotionIcon, LayersIcon, EyeIcon, CheckIcon, TrashIcon, PackageIcon, ReduxIcon, PerformanceIcon, CrashIcon, ShieldAlertIcon, ForwardChevronIcon, ChevronDownIcon, NpmIcon, BoltIcon, BrainIcon, SmartphoneIcon, DatabaseIcon, QrCodeIcon, } from '../NetworkIcons';
 import { LIB_VERSION } from '../../constants';
 import { copyToClipboard } from '../../helpers';
 import { showToast } from '../../helpers/toast';
@@ -97,6 +97,13 @@ const SettingsPanel = () => {
             icon: 'storage',
             desc: 'AsyncStorage & MMKV key-value store viewer with full CRUD support',
         },
+        {
+            key: 'debugging',
+            label: 'Multi-Device Debugging',
+            category: 'diagnostic',
+            icon: 'debugging',
+            desc: 'QR Code bridge for direct Debug APK download & Metro live-reload sync',
+        },
     ];
     const [stagedTabVisibility, setStagedTabVisibility] = useState(() => ({
         apis: true,
@@ -108,6 +115,7 @@ const SettingsPanel = () => {
         crash: Boolean(tabVisibility?.crash),
         device: Boolean(tabVisibility?.device),
         storage: Boolean(tabVisibility?.storage),
+        debugging: Boolean(tabVisibility?.debugging ?? true),
     }));
     useEffect(() => {
         setStagedTabVisibility({
@@ -120,6 +128,7 @@ const SettingsPanel = () => {
             crash: Boolean(tabVisibility?.crash),
             device: Boolean(tabVisibility?.device),
             storage: Boolean(tabVisibility?.storage),
+            debugging: Boolean(tabVisibility?.debugging ?? true),
         });
     }, [tabVisibility]);
     const hasUnsavedChanges = useMemo(() => {
@@ -507,6 +516,9 @@ const SettingsPanel = () => {
                           {moduleItem.icon === 'storage' && (<DatabaseIcon color={isChecked
                             ? AppColors.purple
                             : AppColors.grayTextWeak} size={16}/>)}
+                          {moduleItem.icon === 'debugging' && (<QrCodeIcon color={isChecked
+                            ? AppColors.purple
+                            : AppColors.grayTextWeak} size={16}/>)}
                         </View>