---
title: DevTools
description: Inspect consent state, the resolved policy, location, scripts and
  consent events in a Nuxt app during development with ConsentDevTools.
group: frameworks
lastModified: "2026-10-10T16:01:45+01:00"
---
## Load DevTools only in development

The module does not register `ConsentDevTools`. Import it from
`c15t/vue/devtools` with a dynamic import that runs only in development:

```vue title="app/components/ConsentDebugTools.vue"
<script setup lang="ts">
import { defineAsyncComponent } from 'vue';

// Development builds only: the dynamic import keeps DevTools out of
// production bundles.
const ConsentDevTools = import.meta.dev
	? defineAsyncComponent(() => import('c15t/vue/devtools'))
	: null;
</script>

<template>
	<ConsentDevTools v-if="ConsentDevTools" position="bottom-right" />
</template>
```

Render this component anywhere in your app, such as `app.vue`.
`import.meta.dev` is `false` in production builds, so the dynamic import and
the panel stay out of your production bundle. A static `import` would ship
DevTools to every visitor even when `v-if` hides it. The panel mounts in the
browser only.

## What ConsentDevTools renders

`ConsentDevTools` mounts a floating panel for the consent runtime your app
already created. It renders nothing into your component tree and mounts its
panel in `document.body`. It must render inside the app that set up c15t,
or it throws `[c15t] Kernel not found`.

|Panel|What it shows|
|--|--|
|Consents|Each category's value, with save, accept all and reject actions|
|Scripts|Your `scripts`, their loading status, and the scripts and iframes found in the page|
|Location|The resolved country and region|
|Policy|The resolved policy and presentation|
|IAB|Vendors, purposes and the TC String, under an IAB policy|
|Events|A timeline of consent changes and script events|
|Actions|Show the banner, open preferences, hide consent UI, or resolve the policy again|

Accept and reject in the Consents panel apply only to the categories the
policy covers, filtered by `consentCategories`. Necessary stays on.
`DevTools` and `C15TDevTools` are other names for the same component.

## Open DevTools from the consent trigger

While `ConsentDialogTrigger` is visible, it becomes a two-button toolbar
with a DevTools button, and DevTools hides its own floating launcher, so one
control occupies the corner. The DevTools button sits at the end farthest
from the trigger's corner. The panel opens just past the toolbar, aligned
with its outer edge, and follows it when a visitor drags the toolbar to
another corner. `position` applies again once no trigger is visible.

DevTools brings its launcher back whenever the trigger is hidden, for
example while `triggerShowWhen: 'after-consent'` waits for a choice. A
production build that loads DevTools only in development shows the single
trigger button.

## Props

|Prop|Type|Default|Behavior|
|--|--|--|--|
|`position`|`'top-left' \|'top-right' \|'bottom-left' \|'bottom-right'`|`'bottom-right'`|Corner of the toggle button.|
|`defaultOpen`|`boolean`|`false`|Opens the panel on load.|
|`defaultTab`|`'consents' \|'scripts' \|'location' \|'policy' \|'iab' \|'events' \|'actions'`|`'consents'`|Panel shown first.|
|`maxEvents`|`number`|`100`|How many events the Events panel keeps.|
|`getConsentCategories`|`() => readonly ConsentCategory[]`|`consentCategories`|Narrows the categories the Consents panel acts on. It cannot add categories outside the policy.|
|`getPresentation`|`() => ConsentPresentation \|undefined`|Your `presentation` option|Presentation the Policy panel resolves.|
|`clearRecords`|`() => void`|Clears the stored consent records|Runs when you clear records from the panel.|
|`shadow`|`boolean`|`true`|Mounts the panel inside a shadow root that carries its own stylesheet, so your page's CSS cannot restyle it. `:shadow="false"` mounts the panel in the light DOM and adds its stylesheet to `<head>`.|

Changing a prop destroys the panel and creates a new one, which clears its
event history.

## Inspect consent in Nuxt DevTools

In development, the module adds a **c15t** tab to Nuxt DevTools, so you don't
need to render `ConsentDevTools` to inspect consent. Open Nuxt DevTools with
Shift + Option + D (Shift + Alt + D on Windows and Linux) and choose c15t. The
tab shows consent values, scripts, location, the resolved policy, IAB state,
events and consent actions. It follows the DevTools light or dark theme.

Nuxt enables its DevTools by default in development. Production builds don't
register the tab, its `/__c15t_devtools__` page or the client plugin that
exposes the kernel to it. To turn the tab off in development, set
`devtools: false`:

```ts title="nuxt.config.ts"
export default defineNuxtConfig({
	modules: ['c15t/vue'],
	c15t: { devtools: false },
});
```

The tab's event history starts when you first open it. Nuxt DevTools keeps the
tab loaded, so switching to another tab and back keeps the history. Saves and
actions in the tab change the app's real consent state, as they would through
the banner.

## Embed the panel in your own page

`ConsentDevToolsPanel` from `c15t/vue/devtools` fills its parent element
instead of floating over the page. It has no launcher or close button and
starts open. Use it for your own debug page or another devtools host. Give
the parent a height:

```vue
<script setup lang="ts">
import { ConsentDevToolsPanel } from 'c15t/vue/devtools';
</script>

<template>
  <div style="height: 32rem">
    <ConsentDevToolsPanel default-tab="events" />
  </div>
</template>
```

It accepts `defaultTab`, `maxEvents`, `getConsentCategories`,
`getPresentation` and `clearRecords`, and must render inside the provider
that supplies the kernel.

## Verify

Run `nuxt dev` and open the app. A DevTools button appears in the corner you
set. Open the Location panel and check the country the server resolved. Build
with `nuxt build`, start the server and confirm the button does not appear.

## Next steps

* [Troubleshooting](/docs/frameworks/nuxt/troubleshooting) uses DevTools to
  explain a missing banner.
* [Verify consent](/docs/guides/verify-consent) is the release checklist.