Skip to main content

Panel

Main debugging panel component that provides a complete debugging interface.

Overview​

The Panel component is a comprehensive UI that integrates all debugging features into a single, easy-to-use interface.

API​

import { Panel } from 'react-dev-debugger/ui';

<Panel
  position="bottom-right" // or "bottom-left", "top-right", "top-left"
  defaultOpen={false}
  theme="dark" // or "light"
  tabs={['timeline', 'graph', 'inspector', 'performance']}
/>

Basic Example​

import { Panel } from 'react-dev-debugger/ui';

function App() {
  return (
    <div>
      <YourApp />
      <Panel position="bottom-right" defaultOpen={false} />
    </div>
  );
}

Features​

  • Multiple Tabs: Timeline, Graph, Inspector, Performance views
  • Customizable Position: Place anywhere on screen
  • Collapsible: Minimize when not in use
  • Theme Support: Light and dark themes
  • Keyboard Shortcuts: Quick access with hotkeys

Configuration​

<Panel
  position="bottom-right"
  defaultOpen={false}
  theme="dark"
  tabs={[
    { id: 'timeline', label: 'Timeline', icon: <ClockIcon /> },
    { id: 'graph', label: 'Graph', icon: <GraphIcon /> },
  ]}
  hotkey="Ctrl+Shift+D"
  maxWidth={800}
  maxHeight={600}
/>

Live Playground​

Panel Configuration

Panel initialized

Live Preview

The panel appears in the bottom right corner. Click the button to toggle it!

Try changing the position and theme settings above.

Timeline View

15:23:45 - Counter updated: 5 → 6
15:23:43 - User state changed
15:23:40 - Todo added

Panel Usage Example

import { Panel } from 'react-dev-debugger/ui';

function App() {
  return (
    <div>
      <YourApp />
      <Panel 
        position="bottom-right"
        theme="dark"
        defaultOpen={true}
        tabs={['timeline', 'graph', 'inspector', 'performance']}
        hotkey="Ctrl+Shift+D"
      />
    </div>
  );
}

Next Steps​