Skip to content

singh-jay/debug-meister

Repository files navigation

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-dev

yarn:

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:

// 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>
  )
}

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published