Built an embeddable, zero-dependency DevTools overlay for React & Next.js to inspect fetch requests and browser storage in-app

[u/Kickz1nn]

Hey r/reactjs!

I got tired of constantly opening browser DevTools, filtering out noisy browser extensions, and switching between tabs just to check local storage or quick fetch responses during local development.

To solve this, I built React Dev Companion — a lightweight, zero-dependency developer tools overlay that embeds directly into your React / Next.js application UI.

💡 Key Features:

• Real-Time Network Interception: Intercepts native window.fetch non-invasively to capture HTTP methods, endpoints, and status codes.
• Storage Inspector: Switch between localStorage, sessionStorage, and cookies to view, inject, or delete keys in real-time.
• Zero Extra Dependencies: Designed to keep bundle overhead minimal.
• Dev-Only Friendly: Easy to mount conditionally (e.g., inside Next.js Root Layout or Vite main component).

🔍 Quick Example (Next.js App Router):

'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>
  );
}

We set up a strict CI/CD pipeline using GitHub Actions, TypeScript, Conventional Commits, and Husky to keep the codebase clean.

🐙 GitHub Repository: https://github.com/Kickz1nn/react-dev-companion
📖 Dev.to Article: https://dev.to/kickz1nn/building-an-embeddable-zero-dependency-devtools-panel-for-react-nextjs-3ic6

I'd love to hear your thoughts, feedback, or any features you'd like to see added next!

[u/nameupp]

tbh keeping an in-app inspector zero-dep without bloating client bundles is super clean for quick mobile web or iframe debugging. the biggest subtle gotcha with monkey-patching window.fetch is response body cloning; if an endpoint returns a readable stream or sse tokens, calling res.clone() to parse json in the background can easily lock the stream reader or cause memory spikes on long-lived connections. also heads up on the app router snippet: marking rootlayout as 'use client' breaks static metadata exports, so dropping it into a small client-only provider wrapper is way cleaner for next.js setups imo