---
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/react';
import { DevTools } from '@c15t/dev-tools/react';

export function ConsentManager({ children }: { children: ReactNode }) {
  return (
    <ConsentManagerProvider options={{ mode: 'hosted', backendURL: 'https://your-instance.c15t.dev' }}>
      {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

### C15TDevToolsProps

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