debug-meister v0.1.29
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:
npm install debug-meister --save-devyarn:
yarn add debug-meister --devUsage
- 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>
)
}