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

Debugging tools for web development can be a disruptive context switch, involving toggling native browser DevTools, filtering through noisy logs, or using heavy browser extensions that don't follow your repository. React Dev Companion aims to solve this issue, offering an embeddable, zero-dependency developer tools panel specifically designed for React and Next.js applications.

Unlike full-featured browser extensions or bloated external panels, React Dev Companion operates directly within your application during development, providing instant client-side inspection without adding to your bundle size.

Key features of React Dev Companion include real-time network interception, allowing you to view outgoing window.fetch calls with details such as HTTP methods, target URLs, and response statuses in real-time. It also offers a unified storage inspector where you can view, inject, and delete keys from localStorage, sessionStorage, and cookies through a single panel.

Being zero-dependency, React Dev Companion has a minimal footprint optimized to have negligible impact on application performance. It supports both React SPAs (using Vite or Create React App) and Next.js applications (with both the App Router and Client Components). The tool works out of the box for React applications, intercepting window.fetch calls without requiring wrapper functions around your HTTP client.

Under the hood, React Dev Companion safely wraps window.fetch upon mounting, streaming response metrics to an isolated state container. It does not alter original request promises or application flow. The Storage Inspector within the tool abstracts the complexities of managing different storage types across browsers, enabling instant state invalidations and seamless standard cookie expiration handling.

To get started with React Dev Companion, installation is straightforward via npm, yarn, or pnpm. For Next.js applications using the App Router, the companion component can be loaded conditionally in your root layout to ensure it only runs during development. For Vite or React SPAs, the DevCompanion component can be imported and placed in your application's layout to enable the panel.

React Dev Companion was built with modern engineering standards in mind, following best practices such as a fully automated CI/CD pipeline using GitHub Actions, strict commit standards enforced by Husky and Commitlint, and 100% TypeScript with strict mode. The project is open-source and welcomes community feedback and contributions. You can star the repository on GitHub, explore the CONTRIBUTING.md file for guidelines on contributing, and share your feedback or suggested features in the comments section.