---
title: DevTools
description: A development tool for inspecting consent state, geolocation, loaded scripts, and consent events in real time.
---
`DevTools` is a floating panel that shows the internal state of the consent manager. Use it during development to inspect consent values, geolocation results, loaded scripts, and debug consent flows. Also exported as `C15TDevTools` if you need to avoid naming conflicts with other devtools.

> ℹ️ **Info:**
> DevTools should only be included in development builds. The component renders nothing to the React tree - it injects directly into document.body.

## Installation

DevTools lives in a separate package to keep it out of production bundles:

```bash
bun add -D @c15t/dev-tools
```

## Usage

```tsx
import { type ReactNode } from 'react';
import { ConsentManagerProvider } from '@c15t/nextjs';
import { DevTools } from '@c15t/dev-tools/react';

export function ConsentManager({ children }: { children: ReactNode }) {
  return (
    <ConsentManagerProvider options={{ mode: 'hosted', backendURL: '/api/c15t' }}>
      {children}
      {process.env.NODE_ENV === 'development' && <DevTools />}
    </ConsentManagerProvider>
  );
}
```

## Configuration

```tsx
<DevTools
  position="bottom-right"  // 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'
  defaultOpen={false}       // Start with panel open
  namespace="c15tStore"     // Store namespace to connect to
  disabled={false}          // Disable without removing from tree
/>
```

## Panels

| Panel        | What it shows                                                       |
| ------------ | ------------------------------------------------------------------- |
| **Consents** | Current consent state for all categories                            |
| **Location** | Detected jurisdiction, country, region, and consent model           |
| **Scripts**  | Configured scripts and their load status                            |
| **IAB**      | IAB TCF state (when enabled) - TC string, vendor consents, purposes |
| **Events**   | Timeline of consent events and state changes                        |
| **Actions**  | Buttons to trigger consent actions (accept all, reject all, reset)  |

## Props

| Property | Type                 | Description                                                              | Default | Required |
| :------- | :------------------- | :----------------------------------------------------------------------- | :------ | :------: |
| disabled | boolean \| undefined | Whether the DevTools should be disabled&#xA;Useful for production builds | false   | Optional |