Skip to main content

Inspector View

Inspect component state, props, and context in detail.

Overview​

The Inspector View provides a detailed view of component internals, including state, props, context, and hooks.

API​

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

<InspectorView
  componentId="Component-1"
  showState={true}
  showProps={true}
  showContext={true}
  showHooks={true}
  expandDepth={3}
/>

Basic Example​

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

function DebugPanel({ selectedComponent }) {
  return (
    <div>
      <h2>Component Inspector</h2>
      <InspectorView
        componentId={selectedComponent}
        expandDepth={2}
      />
    </div>
  );
}

Features​

  • State Inspection: View current state values
  • Props Display: See all props passed to component
  • Context Values: Inspect consumed context
  • Hooks List: See all hooks used
  • Expandable Objects: Drill into nested data
  • Edit Mode: Modify values in real-time

Sections​

Live Playground​

Inspector Controls

Component: Counter-1

Inspector View

📦 State
{
count: 5,
lastUpdated: "2023-12-19T15:30:45"
}
⚙️ Props
{
initialValue: 0,
step: 1,
theme: "dark"
}
🌐 Context
{
user:
{
name: "John Doe",
role: "admin"
}
,
theme: "dark"
}
🪝 Hooks
useState: [5, function]
useEffect: cleanup function
useMemo: memoized value

InspectorView Usage Example

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

function DebugPanel({ selectedComponent }) {
  return (
    <InspectorView
      componentId="Counter-1"
      showState={true}
      showProps={true}
      showContext={true}
      showHooks={true}
      expandDepth={3}
      editMode={false}
      onValueChange={(path, value) => {
        console.log('Changed:', path, value);
      }}
    />
  );
}

State Section​

View and edit component state:

<InspectorView
  componentId="TodoList-1"
  sections={{
    state: {
      enabled: true,
      editable: true,
      expandDepth: 2,
    },
  }}
/>

Props Section​

View component props:

<InspectorView
  componentId="Card-1"
  sections={{
    props: {
      enabled: true,
      showFunctions: true,
      showUnused: false,
    },
  }}
/>

Next Steps​