Advanced

Tab & Feature Control

DevConsole is fully modular. You can inject your own custom tabs, tweak their arrangement, or control the visibility of default ones.

Modular Tab Arrangement

Because DevConsole is built on a modular architecture, you can completely customize which tabs are available to your team and in what order they appear. This is perfect for removing noise from your development workflow.

tsx
// Reorder or hide specific tabs
const tabsToEnable = ['Network', 'State', 'GodMode'];

Adding a Custom Tab

Inject your own domain-specific debugging tools directly into the toolkit overlay.

tsx
import { DebugToolkit, CustomTab } from "devconsole-package";
import { MyAnalyticsDebugger } from "./components/MyAnalyticsDebugger";
import { BarChart3 } from "lucide-react";

const customTabs: CustomTab[] = [
  {
    id: 'analytics',
    label: 'Analytics',
    icon: BarChart3,
    component: MyAnalyticsDebugger,
    color: 'text-pink-500' // Optional icon color
  }
];

function App() {
  return (
    <>
      
      
    
  );
}

Programmatic God Mode

Trigger God Mode actions from anywhere in your application, useful for automated test scripts or developer-only shortcuts.

tsx
import { useGodMode } from "devconsole-package";

export function DevToolbox() {
  const { setOverride, setEnabled } = useGodMode();

  const simulateProPlan = () => {
    setEnabled(true);
    setOverride('userPlan', 'Pro');
    setOverride('bypassPaywall', true);
  };

  return ;
}
PreviousInternal HooksNext Headless Usage