# Debug Meister - Mobile Debugging Toolkit for React
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.
## Features
- **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.
## Installation
**npm:**
```bash
npm install debug-meister --save-dev
```
**yarn:**
```bash
yarn add debug-meister --dev
```
## Usage
- 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:**
```jsx
// 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(
,
);
```
**Next.js App Router:**
```jsx
// 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 (
{children}
)
}
```
**Next.js Pages Directory:**
```jsx
// pages/_app.js
import { DebugProvider } from "debug-meister";
export default function App({ Component, pageProps }) {
return (
)
}
```