When building client-side web applications with React or Next.js, inspecting network traffic and runtime storage usually requires opening full browser DevTools. While powerful, native DevTools can sometimes feel overly dense during focused component debugging or rapid prototyping.

To address this, I built @kickd0wn/react-dev-companion—a lightweight, embeddable, zero-dependency developer tools overlay designed to intercept outgoing network requests and manage client-side storage directly inside your app UI.

In this post, I will share the architectural decisions behind the project, how to structure a modern TypeScript library using Vite, and key lessons learned from publishing a scoped package to NPM.

Key Features

• Network Interception: Captures native window.fetch calls to monitor HTTP methods, request status codes, target endpoints, and execution times.
• Storage Inspector: Live management of localStorage, sessionStorage, and cookies directly from an embedded panel.
• Zero External Dependencies: Built with pure React primitives and CSS-in-JS to keep bundle impact to a minimum.
• TypeScript Native: Bundled with automatically generated .d.ts declaration files for complete autocomplete support.

Technical Stack & Configuration

The build pipeline leverages Vite in library mode along with vite-plugin-dts for declaration generation.

Modern Vite Configuration (vite.config.ts)

With modern ESM standards in Node.js, we utilize import.meta.dirname to resolve module pathways cleanly:

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import dts from 'vite-plugin-dts';
import { resolve } from 'path';

export default defineConfig({
  plugins: [
    react(),
    dts({ insertTypesEntry: true })
  ],
  build: {
    lib: {
      entry: resolve(import.meta.dirname, 'src/index.ts'),
      name: 'ReactDevCompanion',
      fileName: (format) => `index.${format === 'es' ? 'js' : 'cjs'}`
    },
    rollupOptions: {
      external: ['react', 'react-dom'],
      output: {
        globals: {
          react: 'React',
          'react-dom': 'ReactDOM'
        }
      }
    }
  }
});

Intercepting Native Fetch Cleanly

To capture network traffic without breaking existing application code or introducing heavy third-party interceptors, the core module monkey-patches window.fetch upon mounting and restores it gracefully:

// Core mechanism overview
const originalFetch = window.fetch;

window.fetch = async (...args) => {
  const startTime = performance.now();
  try {
    const response = await originalFetch(...args);
    const duration = Math.round(performance.now() - startTime);

    // Stream metadata to state container
    notifyListeners({
      url: args[0].toString(),
      status: response.status,
      duration
    });

    return response;
  } catch (error) {
    // Handle network failures gracefully
    throw error;
  }
};

Lessons Learned & Publishing Gotchas

Publishing a scoped package (@scope/package-name) to NPM comes with a few specific requirements:

1. Explicit Public Access: Scoped packages default to private on NPM. Always append the --access public flag when publishing:

   npm publish --access public
   

2. Immutability of NPM Releases: Once a version tag (e.g., v0.1.0) is published, NPM locks it permanently. Updates to documentation or package metadata require a patch bump (e.g., v0.1.1 or v0.1.2).
3. Dry Runs: Always test package output locally before publishing to verify bundle output:

   npm pack --dry-run
   

Try It Out

You can install the package directly into your React or Next.js projects:

npm install @kickd0wn/react-dev-companion

Mount it conditionally in development:

import { DevCompanion } from '@kickd0wn/react-dev-companion';

export default function App() {
  return (
    <div>
      <YourComponents />
      {process.env.NODE_ENV === 'development' && <DevCompanion />}
    </div>
  );
}

What's Next?

The roadmap for upcoming releases includes:

• Network request payload and headers detail view.
• Response body previewing.
• UI theme customization and positioning controls.

Check out the repository on GitHub or explore the package on NPM.

Feel free to leave feedback or open issues!