A lightweight and versatile debugging toolkit for React applications, designed to facilitate mobile debugging by providing tools to debug web storage, track console logs, and monitor network requests.
-
Web Storage Debugging: Easily inspect and manage data stored in local storage, session storage, and cookies, right from your mobile device. Useful for testing and debugging data persistence across sessions.
-
Console Log Tracking: Keep an eye on console logs generated by your application. Capture logs and warnings even on mobile devices, helping you diagnose issues in real-time.
-
Network Request Monitoring: Monitor network requests made by your application. View request and response details, track response times, and identify potential bottlenecks while debugging on mobile devices.
npm:
npm install debug-meister --save-devyarn:
yarn add debug-meister --dev- This package can be used with any React project
- import DebugProvider component from the package
- Wrap main component inside the wrapper
- Now in the bottom right corner of the screen a button will be present to toggle the debug overlay
- It's ideal to import this package in development mode only
React App:
// index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App.js';
import './index.css';
import { DebugProvider } from "debug-meister";
ReactDOM.createRoot(document.getElementById('root')).render(
<React.StrictMode>
<DebugProvider>
<App />
</DebugProvider>
</React.StrictMode>,
);Next.js App Router:
// app/layout.js
import { DebugProvider } from "debug-meister";
export default function RootLayout({
// Layouts must accept a children prop.
// This will be populated with nested layouts or pages
children,
}) {
return (
<html lang="en">
<body>
<DebugProvider>
{children}
</DebugProvider>
</body>
</html>
)
}Next.js Pages Directory:
// pages/_app.js
import { DebugProvider } from "debug-meister";
export default function App({ Component, pageProps }) {
return (
<DebugProvider>
<Component {...pageProps} />
</DebugProvider>
)
}