See what your app is really doing.
DevLens is a modern Laravel Debugbar-inspired developer toolkit for React and Next.js applications.
It provides a lightweight in-app inspector for monitoring:
- API requests
- Axios and Fetch traffic
- console logs
- runtime errors
- component renders
- route navigation
- FPS and long tasks
- application performance
Built for developers who want real-time frontend debugging without opening multiple browser tools.
Created by Noore Rabbi Shagor.
- Floating developer debugbar
- Expandable inspector drawer
- Fetch API request monitoring
- Optional Axios request monitoring
- Console log/warn/error/info/debug capture
- Runtime error monitoring
- Unhandled promise rejection tracking
- Route navigation tracking
- FPS monitoring
- Long task monitoring
- Memory usage monitoring
- Duplicate API request detection
- Component render tracking
- React error boundary tracking
- Render metrics
- Render history panel
- Keyboard shortcut toggle (
Ctrl + Shift + D) - Network request search and filtering
- Dark, light, and system themes
- Responsive drawer UI
- Development-first lightweight runtime design
- Zero configuration setup
- Safe development-only runtime behavior
- HMR-safe monitor lifecycle
- React
- Next.js App Router
- Next.js Pages Router
- Vite
- CRA
- Client-side React applications
pnpm add @nrshagor/devlens-reactnpm install @nrshagor/devlens-reactyarn add @nrshagor/devlens-reactpnpm add @nrshagor/devlens-nextnpm install @nrshagor/devlens-nextyarn add @nrshagor/devlens-nextAdd DevLens inside your main application component.
import { DevLens } from '@nrshagor/devlens-react';
import '@nrshagor/devlens-react/styles.css';
export function App() {
return (
<>
<YourApp />
<DevLens />
</>
);
}Create:
components/devlens-client.tsx'use client';
import { NextDevLens } from '@nrshagor/devlens-next';
import '@nrshagor/devlens-next/styles.css';
export function DevLensClient() {
return <NextDevLens />;
}import { DevLensClient } from '@/components/devlens-client';
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
<body>
{children}
<DevLensClient />
</body>
</html>
);
}import type { AppProps } from 'next/app';
import { DevLensClient } from '@/components/devlens-client';
export default function App({ Component, pageProps }: AppProps) {
return (
<>
<Component {...pageProps} />
<DevLensClient />
</>
);
}Render tracking is opt-in to keep DevLens lightweight.
import { useDevLensRender } from '@nrshagor/devlens-react';
function ProductCard() {
useDevLensRender('ProductCard');
return <div>Product</div>;
}DevLens supports optional Axios monitoring without bundling Axios itself.
You provide your own Axios instance manually.
import { useEffect } from 'react';
import axios from 'axios';
import {
DevLens,
installAxiosInterceptor,
uninstallAxiosInterceptor,
} from '@nrshagor/devlens-react';
import '@nrshagor/devlens-react/styles.css';
const axiosClient = axios.create({
baseURL: 'https://api.example.com',
});
export function App() {
useEffect(() => {
installAxiosInterceptor(axiosClient);
return () => {
uninstallAxiosInterceptor(axiosClient);
};
}, []);
return (
<>
<YourApp />
<DevLens />
</>
);
}import { DevLensErrorBoundary } from '@nrshagor/devlens-react';
export function App() {
return (
<DevLensErrorBoundary fallback={<p>Something went wrong.</p>}>
<YourApp />
</DevLensErrorBoundary>
);
}Toggle DevLens anywhere in development mode:
Ctrl + Shift + DDevLens should be:
- invisible by default
- powerful when expanded
- lightweight
- fast
- developer friendly
DevLens should never feel bloated, intrusive, or difficult to set up.
@nrshagor/devlens-react@nrshagor/devlens-next@nrshagor/devlens-ui@nrshagor/devlens-core@nrshagor/devlens-shared
AGPL-3.0-only