A VSCode extension that helps you debug and monitor React Native applications in real-time, including AsyncStorage management and Network request monitoring.
Features
🔍 Real-time AsyncStorage Monitoring
View and edit AsyncStorage contents
Auto-refresh when storage changes
Delete individual items or clear all storage
🌐 Network Request Monitoring
Track all network requests (XHR, Fetch, and Axios)
Inspect request/response headers and bodies
Monitor request timing and status
Support for custom Axios instances
🚀 General Features
Works with both iOS and Android
Support for physical devices
Dynamic port configuration
Simple and intuitive interface
Real-time updates
Installation
Install the extension from VSCode Marketplace
Install the companion npm package in your React Native project:
npm install --save-dev react-native-debug-monitor
Usage
Basic Setup
import StorageDebugger from 'react-native-debug-monitor';
if (__DEV__) {
// Basic usage with default port (12380)
StorageDebugger.start();
}
Network Monitoring with Axios
import StorageDebugger from 'react-native-debug-monitor';
import axios from './axiosConfig'; // Your axios instance
if (__DEV__) {
StorageDebugger.start();
// Configure axios monitoring (optional)
if (StorageDebugger.networkMonitor) {
StorageDebugger.networkMonitor.addAxiosInstance(axios);
}
}
Advanced Configuration
StorageDebugger.start({
port: 8088, // Optional: Custom port
serverIP: '192.168.1.100' // Optional: For physical devices
});
