---
title: "DevTools"
description: "Inspect head tags, SEO metadata, entries, and source locations in the Vite DevTools panel during development."
canonical_url: "https://unhead.unjs.io/docs/head/guides/build-plugins/devtools"
last_updated: "2026-07-20T12:15:51.556Z"
---

The Unhead integration adds a panel to [Vite DevTools](https://github.com/vitejs/devtools) showing active head tags, entries, SEO data, plugins, and source locations. Unhead registers the integration by default, but the panel activates only when Vite DevTools is enabled or already installed as a Vite plugin.

## Panel data

The devtools plugin provides a real-time view of your head state during development:

- **Entries**: Active head entries, with source locations when the transform can inject them
- **Tags**: All resolved tags with their props, position, priority, and dedupe keys
- **SEO overview**: Title, description, canonical, robots, and Open Graph fields
- **Scripts**: Tracked `useScript()` instances and their load status
- **Plugins**: Active Unhead plugins
- **Template params**: Current template parameter values and separator
- **Validation**: Warnings from the [Validate plugin](/docs/head/guides/plugins/validate), when enabled

### Source Tracing

The plugin injects `_source` metadata (file path and line number) into `useHead()`, `useSeoMeta()`, `useHeadSafe()`, and `useScript()` calls whose arguments it can augment. This lets you click through from a tag in the DevTools panel to the line that created it.

## Setup

The integration is included by default when using the [unified Vite plugin](/docs/head/guides/build-plugins/overview). It only runs in `vite dev`, and only when Vite DevTools is active. For example, enable it in Vite's configuration:

```ts [vite.config.ts]
export default defineConfig({
  devtools: { enabled: true },
})
```

<framework-code>
<template v-slot:vue="">

```ts [vite.config.ts]
import { Unhead } from '@unhead/vue/vite'
import vue from '@vitejs/plugin-vue'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [vue(), Unhead()],
})
```

</template>

<template v-slot:react="">

```ts [vite.config.ts]
import { Unhead } from '@unhead/react/vite'
import react from '@vitejs/plugin-react'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [react(), Unhead()],
})
```

</template>

<template v-slot:nuxt="">

```ts
// Enable Vite DevTools in your Nuxt/Vite configuration.
```

</template>
</framework-code>

### Disable

```ts
Unhead({
  devtools: false,
})
```

## Requirements

`@vitejs/devtools-kit` is a dependency of `@unhead/bundler`, and the panel UI ships pre-built with the package. You still need to enable Vite DevTools itself as shown above.

## How It Works

The integration has three parts:

1. **Vite transform**: Injects `_source` metadata into composable calls and wraps `createHead()` to expose the instance on `window.__unhead_devtools__`
2. **Bridge script**: Reads the head instance, serializes its state, and syncs it to Vite DevTools shared state through `@vitejs/devtools-kit/client`
3. **DevTools panel**: Serves the app bundled in `@unhead/bundler/dist` at `/__unhead/` and registers it as a dock panel

State is synced on every `dom:rendered` hook, so the panel updates in real time as head tags change.

## See Also

- [Build Plugins Overview](/docs/head/guides/build-plugins/overview): All build-time optimizations
- [Validate Plugin](/docs/head/guides/plugins/validate): Catch SEO and head tag issues shown in DevTools