React Native Debug Monitor

The Ultimate VS Code Extension for React Native Debugging

Debug AsyncStorage and Network requests in real-time directly from VS Code. No more console.log debugging - visualize your app's data flow as it happens!

🎬 See the Magic in Action

📱 AsyncStorage Debugger - Live Data Management

Access instantly: Ctrl+Shift+P (Windows/Linux) or ⌘+Shift+P (Mac) → View React Native Monitor Storage

Storage Demo

Watch storage changes in real-time • Edit values directly from VS Code • Perfect for debugging auth flows, user preferences, and cached data

🌐 Network Monitor - HTTP Request Inspector

Multiple access methods: Command Palette • VS Code Menu • Right-click → View React Native Monitor Network

Network Demo

Capture every HTTP request automatically • Inspect headers, payloads, and responses • Debug API calls, authentication errors, and network timing

✨ Why Choose This Extension?

🚀 One-Click Setup - Install extension + one line of code
📱 Universal Support - iOS, Android, emulators, real devices
⚡ Real-Time Updates - See changes instantly as your app runs
🎯 VS Code Native - Debug without leaving your editor
🔍 Deep Inspection - Full request/response details
✏️ Live Editing - Modify storage values on the fly
🔄 Auto-Reconnect - Seamless debugging experience

🚀 Quick Start

1. Install this Extension

Search for "React Native Debug Monitor" in VS Code Extensions

2. Install NPM Package

npm install --save-dev react-native-debug-monitor

3. Add One Line to Your React Native App

import StorageDebugger from 'react-native-debug-monitor';

if (__DEV__) {
  StorageDebugger.start(); // That's it! 🎉
}

4. Start Debugging

Multiple ways to access:

Command Palette: Ctrl+Shift+P (Windows/Linux) or ⌘+Shift+P (Mac) → F1
VS Code Menu: View → Command Palette
Right-click: In any file → Command Palette

Available Commands:

View React Native Monitor Storage - AsyncStorage debugger
View React Native Monitor Network - Network request monitor

🎯 Real-World Usage Scenarios

🔐 Authentication Flow Debugging

// Watch the entire auth flow in real-time
const login = async (email, password) => {
  // Network Monitor: See login request
  const response = await fetch('/api/login', {
    method: 'POST',
    body: JSON.stringify({ email, password })
  });
  
  // Storage Monitor: Watch token being saved
  await AsyncStorage.setItem('auth_token', response.token);
  await AsyncStorage.setItem('user_profile', JSON.stringify(response.user));
  
  // Edit these values in VS Code to test different scenarios!
};

📱 Offline-First App Development

// Perfect for debugging sync scenarios
const saveData = async (data, isOnline) => {
  if (isOnline) {
    // Network Monitor: Track API sync
    await fetch('/api/data', { method: 'POST', body: JSON.stringify(data) });
  } else {
    // Storage Monitor: Watch offline storage
    await AsyncStorage.setItem(`offline_data_${Date.now()}`, JSON.stringify(data));
  }
};

🛒 E-commerce Cart Management

// Debug cart persistence and checkout
const updateCart = async (product) => {
  // Storage Monitor: See cart updates instantly
  const cart = JSON.parse(await AsyncStorage.getItem('cart') || '[]');
  cart.push(product);
  await AsyncStorage.setItem('cart', JSON.stringify(cart));
  
  // Network Monitor: Track analytics
  fetch('/api/analytics/cart', { method: 'POST', body: JSON.stringify(product) });
};

🔧 Configuration Options

Basic Setup (Emulators)

if (__DEV__) {
  StorageDebugger.start(); // Works automatically
}

Physical Device Setup

if (__DEV__) {
  StorageDebugger.start({ 
    serverIP: '192.168.1.100',  // Your computer's IP
    port: 12380                 // Optional: custom port
  });
}

Network Monitoring with Axios

import axios from 'axios';

if (__DEV__) {
  StorageDebugger.start();
  
  // Monitor specific Axios instance
  StorageDebugger.networkMonitor.addAxiosInstance(axios);
}

Advanced Configuration

StorageDebugger.start({
  serverIP: '192.168.1.100',    // Required for physical devices
  port: 8080,                   // Custom port (default: 12380)
  monitorNetwork: true          // Enable/disable network monitoring
});

🖥️ VS Code Interface Guide

AsyncStorage Monitor

Column	Description	Actions
Key	Storage key name	Click to edit
Value	Current stored value	Edit inline or toggle preview
Actions	Management options	Save, Delete, Copy

Network Monitor

Column	Description	Details
Method	HTTP method	GET, POST, PUT, DELETE, etc.
URL	Request endpoint	Full URL with parameters
Status	Response code	200, 404, 500, etc.
Time	Response time	Milliseconds
Size	Response size	Bytes/KB/MB

Access Methods

Platform	Primary Shortcut	Alternative	Menu Access
Windows	`Ctrl + Shift + P`	`F1`	`View` → `Command Palette`
Linux	`Ctrl + Shift + P`	`F1`	`View` → `Command Palette`
Mac	`⌘ + Shift + P`	`F1`	`View` → `Command Palette`

📱 Device Setup Guide

🖥️ Emulators (Automatic)

iOS Simulator: Zero configuration needed
Android Emulator: Uses 10.0.2.2 automatically

📱 Physical Devices (Manual Setup)

Find your computer's IP:

# Windows
ipconfig | findstr "IPv4"

# Mac/Linux
ifconfig | grep "inet " | grep -v 127.0.0.1

Update your React Native app:

StorageDebugger.start({ serverIP: '192.168.1.100' }); // Your IP

Ensure same WiFi network for device and computer

🐛 Troubleshooting

🔌 Connection Issues

Problem: Extension shows "Server not running"
Solutions:

✅ Verify StorageDebugger.start() is called in your app
✅ Check that your app is in development mode
✅ For physical devices: ensure correct IP address
✅ Check firewall settings for the configured port

📱 No Storage Data

Problem: Storage monitor appears empty
Solutions:

✅ Verify AsyncStorage operations are happening
✅ Click "Refresh" button in the extension
✅ Check app console for connection errors
✅ Restart the debug session

🌐 Network Requests Missing

Problem: Network monitor doesn't show requests
Solutions:

✅ Ensure network monitoring is enabled
✅ For Axios: verify instance is added correctly
✅ Check if requests are made after initialization
✅ Try without Axios configuration first

⚡ Performance Issues

Problem: App feels slower with debugger
Solutions:

✅ Extension only runs in development mode
✅ Minimal performance impact by design
✅ Disable network monitoring if not needed

🎯 Best Practices

💡 Efficient Debugging Workflow

Start monitors early - Open before running your app
Use multiple monitors - Keep both storage and network open
Descriptive storage keys - Use user_profile instead of up
Group related data - Prefixes like cache_, temp_, auth_
Test edge cases - Edit storage values to simulate scenarios

🚀 Pro Tips

Pin commands: Add frequently used commands to VS Code shortcuts
Multi-monitor setup: Use external monitor for network debugging
Keyboard navigation: Use F1 for quick command palette access
Data export: Copy storage values for bug reports
Team debugging: Share IP configurations for collaborative debugging

📋 Requirements

VS Code: Version 1.97.0 or higher
React Native: Any version with AsyncStorage support
Node.js: For npm package installation
Development Environment: Tool only works in development mode

Dependencies

@react-native-async-storage/async-storage (for storage monitoring)
axios (optional, for enhanced network monitoring)

🔄 Port Configuration

Default Settings

Default Port: 12380
Fallback: Automatic port selection if default is occupied
Range: Any valid port (1024-65535)

Configuration Methods

Code Configuration:
```
StorageDebugger.start({ port: 8080 });
```
VS Code Command: Use Set Storage Port command
Automatic Fallback: Extension tries alternative ports if selected port is busy

🔄 Advanced Features

Custom Axios Instances

const authAPI = axios.create({ baseURL: 'https://auth.example.com' });
const dataAPI = axios.create({ baseURL: 'https://api.example.com' });

// Monitor multiple instances
StorageDebugger.networkMonitor.addAxiosInstance(authAPI);
StorageDebugger.networkMonitor.addAxiosInstance(dataAPI);

Conditional Debugging

// Platform-specific debugging
if (__DEV__ && Platform.OS === 'ios') {
  StorageDebugger.start();
}

// Environment-specific debugging
if (__DEV__ && process.env.NODE_ENV === 'development') {
  StorageDebugger.start({ port: parseInt(process.env.DEBUG_PORT) || 12380 });
}

🆘 Support & Community

Getting Help

🐛 Report Issues: GitHub Issues
💡 Feature Requests: GitHub Discussions
📚 Documentation: NPM Package Docs
💬 Community: Share your debugging tips and tricks

Contributing

🛠️ Code Contributions: Fork, create branch, submit PR
📝 Documentation: Help improve guides and examples
🧪 Testing: Report bugs and test new features
🌟 Support: Star the repo and share with other developers

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🚀 What's Coming Next

Planned Features

🎨 Custom Themes - Match your VS Code theme
📊 Performance Metrics - App performance monitoring
🔍 Search & Filter - Find storage keys and network requests quickly
📱 Multiple Device Support - Debug multiple apps simultaneously
🔄 State Management - Redux, Zustand, and other state tools
📈 Analytics Dashboard - Usage patterns and insights

Stay Updated

⭐ Star the repository for updates
📺 Watch releases for new features
🐦 Follow development progress

🌟 Show Your Support

If this extension saves you debugging time:

⭐ Rate 5 stars in VS Code Marketplace
📦 Share with your team and React Native community
💬 Leave a review with your debugging success story
🐦 Tweet about it - help other developers discover this tool

Made with ❤️ for the React Native community

Stop guessing what's in your app's storage. Start seeing it. 🚀

Release Notes

1.0.0 (Current)

✨ Real-time AsyncStorage monitoring with live editing
🌐 Complete network request interception (XHR, Fetch, Axios)
📱 Universal device support (iOS, Android, emulators, physical devices)
🎯 VS Code native integration with command palette support
🔧 Flexible configuration with automatic IP detection
🔄 Auto-reconnect capability for seamless debugging
📊 Detailed request inspection with timing and payload analysis
✏️ Inline editing of storage values
🎨 Intuitive interface with copy/delete/refresh actions

React Native Debug Monitor

rogercg

React Native Debug Monitor

🎬 See the Magic in Action

📱 AsyncStorage Debugger - Live Data Management

🌐 Network Monitor - HTTP Request Inspector

✨ Why Choose This Extension?

🚀 Quick Start

1. Install this Extension

2. Install NPM Package

3. Add One Line to Your React Native App

4. Start Debugging

🎯 Real-World Usage Scenarios

🔐 Authentication Flow Debugging

📱 Offline-First App Development

🛒 E-commerce Cart Management

🔧 Configuration Options

Basic Setup (Emulators)

Physical Device Setup

Network Monitoring with Axios

Advanced Configuration

🖥️ VS Code Interface Guide

AsyncStorage Monitor

Network Monitor

Access Methods

📱 Device Setup Guide

🖥️ Emulators (Automatic)

📱 Physical Devices (Manual Setup)

🐛 Troubleshooting

🔌 Connection Issues

📱 No Storage Data

🌐 Network Requests Missing

⚡ Performance Issues

🎯 Best Practices

💡 Efficient Debugging Workflow

🚀 Pro Tips

📋 Requirements

Dependencies

🔄 Port Configuration

Default Settings

Configuration Methods

🔄 Advanced Features

Custom Axios Instances

Conditional Debugging

🆘 Support & Community

Getting Help

Contributing

📄 License

🚀 What's Coming Next

Planned Features

Stay Updated

🌟 Show Your Support

Release Notes

1.0.0 (Current)