Debbuger State Panel

A draggable JSON panel for monitoring variables in React applications.

Installation

npm install debbuger-state-panel
# or
yarn add debbuger-state-panel
# or
pnpm add debbuger-state-panel

Usage

Basic Usage

import { initDebugPanel, debbugPanelMap } from 'debbuger-state-panel';

// Initialize the panel (call once in your app)
initDebugPanel();

// Monitor variables (call anywhere in your app)
const exampleData = {
  counter: 42,
  users: ['Alice', 'Bob', 'Charlie'],
  settings: {
    darkMode: true,
    notifications: false
  }
};

// Display data in the panel
debbugPanelMap(exampleData);

Advanced Usage

import DebbugStatePanel from 'debbuger-state-panel';

// Initialize with custom options
DebbugStatePanel.init({
  position: { x: 100, y: 50 },
  zIndex: 2000
});

// Monitor variables
DebbugStatePanel.map({
  performance: {
    fps: 60,
    memory: '120MB'
  },
  gameState: 'running'
});

// Clear the panel
DebbugStatePanel.clear();

Custom Implementation

import { DraggableDebbugerPanel } from 'debbuger-state-panel';

// Use the panel component directly in your app
function MyDebugWrapper() {
  return (
    <div>
      <h1>My App</h1>
      <DraggableDebbugerPanel className="my-custom-class" />
    </div>
  );
}

Features

• 🔍 Monitor and inspect variables in real-time
• 🖱️ Draggable panel for easy positioning
• 🌙 Dark mode support
• 🧩 JSON tree view with collapsible sections
• 🔄 Automatic updates when monitored variables change
• 💾 Persistent panel position between sessions

API Reference

Functions

• initDebugPanel(options?): Initialize and mount the debug panel
• debbugPanelMap(object): Add or update variables in the panel
• clearDebbugPanel(): Clear all variables from the panel

Components

• DraggableDebbugerPanel: The main panel component
• DebugInput: Customizable input component used in the panel

License

ISC