React Debugger

A powerful VS Code extension for debugging React and React Native applications in real time — Network inspector, Console logs, State management, Performance monitoring, UI inspector, and more.

✨ Features

• 🌐 Network Inspector: Capture and inspect HTTP, XHR, Fetch, and WebSocket requests
• 📝 Console Logs: Full console output with level filtering, search, and stack traces
• 🗃️ State Management: Time-travel debugging for Redux, Zustand, and custom stores
• ⚡ Performance Monitor: Real-time FPS, memory, and CPU metrics with alerts
• 🔍 UI Inspector: Visualize your component tree and inspect props
• 💾 Storage Inspector: Browse and manage AsyncStorage / localStorage key-value pairs
• 🧭 Navigation Tracker: Track navigation events, route history, and params
• 🤖 AI Assistant: Built-in AI panel for debugging insights
• 🎯 Custom Commands: Send commands to connected devices from VS Code
• 📱 Cross-Platform: Works with React (web) and React Native (iOS & Android)
• 🔗 Zero Config: Auto-starts an embedded WebSocket server on activation

📦 Installation

From VS Code Marketplace

Search for "React Debugger" in the VS Code Extensions sidebar, or:

ext install react-debugger.react-debugger

From VSIX

code --install-extension react-debugger-1.0.0.vsix

Note: The extension auto-starts a WebSocket debug server on port 8347 when activated. No additional setup required on the extension side.

🚀 Quick Start

1. Install the SDK in Your App

npm install @amrshbib/react-debugger
# or
yarn add @amrshbib/react-debugger

2. Initialize in Your App Entry Point

import { initDebugger } from "@amrshbib/react-debugger";

if (__DEV__) {
  initDebugger({
    deviceInfo: {
      id: "my-device",
      name: "Dev Machine",
      platform: "web", // or 'ios', 'android'
    },
  });
}

3. Open the Debugger

• Click the React Debugger icon in the Activity Bar (sidebar)
• Or run the command: React Debugger: Open Debugger (Ctrl+Shift+P / Cmd+Shift+P)

Your app will automatically connect to the extension via WebSocket, and debugging data will appear in real time.

📖 Commands

⚙️ Settings

🏗️ How It Works

┌─────────────────────────┐
│  React / React Native   │
│  App (SDK)              │
└────────┬────────────────┘
         │ WebSocket (port 8347)
         ▼
┌─────────────────────────┐
│  Debugger Server        │
│  (embedded in VS Code)  │
└────────┬────────────────┘
         │ Internal
         ▼
┌─────────────────────────┐
│  VS Code Webview Panel  │
│  (Real-time UI)         │
└─────────────────────────┘

The extension runs an embedded WebSocket server inside VS Code. Your React or React Native app connects via the @amrshbib/react-debugger SDK, sending debugging data (network requests, console logs, state changes, performance metrics, component trees). The VS Code webview panel displays everything in real time.

🔧 Feature Details

🌐 Network Inspector

Capture and inspect all HTTP, XHR, Fetch, and WebSocket requests with full details:

• Request/response headers and body
• Timing breakdown (DNS, TCP, TLS, TTFB)
• Filter by URL, method, or status code
• View request/response payloads as formatted JSON

📝 Console Logs

Full console output with powerful filtering:

• Intercepts console.log, warn, error, debug
• Stack traces for errors and warnings
• Filter by level, source, or keyword
• Search across all log entries

🗃️ State Management

Time-travel debugging for popular state managers:

• Redux — dispatched actions, state snapshots, diffs between states
• Zustand — store subscriptions and state change tracking
• Custom — plug in any state manager via the SDK API

⚡ Performance Monitor

Real-time performance metrics:

• FPS counter with frame drop detection
• Memory usage (JS heap)
• CPU utilization
• Configurable performance alerts

🔍 UI Inspector

Visualize your React component tree:

• Full fiber tree traversal
• Inspect component props at each level
• Auto-capture on fiber commit

💾 Storage Inspector

Browse and manage persistent storage:

• View all AsyncStorage / localStorage key-value pairs
• Delete individual storage entries from the debugger
• Auto-refresh on changes

🧭 Navigation Tracker

Track navigation events in real time:

• Route history with timestamps
• Route params inspection
• Support for React Navigation and custom routers

📱 Platform Support

⚠️ Important Notes

• The SDK only activates in development mode (__DEV__ === true). It has zero impact in production builds.
• The debugger server binds to localhost by default. For real devices, set reactDebugger.serverHost to your machine's local IP.
• Multiple devices/apps can connect simultaneously — each appears as a separate session.

🔧 Troubleshooting

App Not Connecting

1. Verify the extension is active (check the status bar for "React Debugger")
2. Ensure port 8347 is not blocked by a firewall
3. For real devices, use your machine's IP instead of localhost
4. Check the VS Code Output panel (React Debugger) for server logs

Extension Not Starting

1. Ensure VS Code 1.85.0+ is installed
2. Check for port conflicts on 8347
3. Try React Debugger: Restart Server from the command palette

Performance Issues

1. Consider increasing the heartbeat interval in the SDK
2. Reduce the frequency of state snapshots for large stores
3. Disable unused interceptors (network, console, performance) if not needed

📋 Requirements

• VS Code 1.85.0+
• Node.js 18+
• React 18+ or React Native 0.70+

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

📄 License

The MIT License

Copyright (c) 2026 Amr Shbib

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

🔗 Links

• VS Code Marketplace
• npm SDK Package

Made with ❤️ for the React and React Native community