How to open DevConsole | Documentation

Learn how to open and interact with the DevConsole across different browsers and frameworks. Whether you're using Chrome, Firefox, Safari, or a specific framework like Next.js, here's how to access your command center.

Floating Trigger

Once DevConsole is installed, a discreet floating trigger appears in the bottom-right corner of your viewport. This ensures the toolkit is always accessible without cluttering your existing UI.

Debug Toolkit Trigger

Chrome & Edge

In Chromium-based browsers, the DevConsole overlay sits on top of your application. If it doesn't appear:

Ensure you are in development mode (NODE_ENV=development).
Check if the DevConsole component is rendered in your root layout.
Open the standard Chrome DevTools (F12) to check for any initialization errors.

Next.js & React Integration

If you are asking "how to open dev console" in a Next.js app, ensure you've wrapped your layout with the provider:

// app/layout.tsx
import { DebugProvider } from 'devconsole-package';

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <DebugProvider>
          {children}
        </DebugProvider>
      </body>
    </html>
  );
}

Common Questions

How to open dev console in Safari?

DevConsole works natively in Safari. Simply click the floating trigger at the bottom-right of your screen.

Will it open in production?

No, DevConsole is strictly designed for localhost. It automatically disables itself in production to ensure safety and performance.