Building an Embeddable, Zero-Dependency DevTools Panel for React & Next.js

Debugging network requests and browser storage during development often forces you to constantly switch context—toggling native browser DevTools, sifting through noisy logs, or relying on heavy browser extensions that don't travel with your repository.

To solve this, I built React Dev Companion: an embeddable, zero-dependency developer tools panel designed specifically for React and Next.js applications.

🎯 Why React Dev Companion?

Most debugging tools fall into two categories:

1. Full-blown Browser Extensions: Requires every developer on the team (and QA testers) to install specific extensions.
2. Heavy External Panels: Adds bloated dependencies to your project bundle.

React Dev Companion runs directly inside your application during development, giving you instant client-side inspection without bundle bloat.

Key Capabilities

• ⚡ Real-Time Network Interception: Intercepts outgoing window.fetch calls, logging HTTP methods, target URLs, and response statuses live.
• 💾 Multi-Store Storage Inspector: View, inject, and delete keys across localStorage, sessionStorage, and cookies from a single unified panel.
• 📦 Zero Dependencies: Ultra-lightweight footprint engineered for zero impact on application performance.
• 🌐 Framework-Agnostic Support: Works out of the box with React SPAs (Vite, CRA) and Next.js (App Router / Client Components).

🛠️ How It Works Under the Hood

1. Non-Invasive window.fetch Interception

Rather than requiring wrapper functions around your HTTP client, React Dev Companion safely wraps window.fetch upon mounting. It streams response metrics to an isolated state container without altering original request promises or application flow:

const originalFetch = window.fetch;

window.fetch = async (...args) => {
  const [resource, config] = args;
  const method = config?.method || 'GET';
  const url = typeof resource === 'string' ? resource : resource.url;

  try {
    const response = await originalFetch(...args);
    notifyDevTools({ url, method, status: response.status });
    return response;
  } catch (error) {
    notifyDevTools({ url, method, status: 500 });
    throw error;
  }
};

2. Unified Storage Management

Browser APIs handle storage types inconsistently (localStorage vs string parsing for document.cookie). The Storage Inspector abstracts key management, enabling instant state invalidations and seamless standard cookie expiration handling.

🚀 Quick Start Guide

Installation

Install via npm, yarn, or pnpm:

npm install react-dev-companion

Next.js (App Router) Integration

Load the companion component conditionally in your root layout so it only runs during development:

'use client';

import { DevCompanion } from 'react-dev-companion';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        {children}
        {process.env.NODE_ENV === 'development' && <DevCompanion />}
      </body>
    </html>
  );
}

Vite / React SPA Integration

import React from 'react';
import { DevCompanion } from 'react-dev-companion';

export function App() {
  return (
    <div>
      <MainContent />
      {import.meta.env.DEV && <DevCompanion position="bottom-right" />}
    </div>
  );
}

🏭 Built with Modern Engineering Standards

React Dev Companion was built from day one following open-source best practices:

• CI/CD Pipeline: Fully automated via GitHub Actions (Node 22).
• Strict Commit Standards: Conventional Commits enforced via Husky & Commitlint.
• Type Safety: Written 100% in TypeScript with strict mode enabled.

💬 Let's Build Together! (Call to Action)

This project is fully open-source and ready for community feedback!

• ⭐ Star the repo on GitHub: Kickz1nn/react-dev-companion
• 🤝 Want to contribute? Check out our CONTRIBUTING.md and grab a good first issue!
• 💬 Feedback: What features or tabs would you like to see next? (e.g., React Query status inspector, Console log collector, or Performance timers?) Let me know in the comments below!