---
title: "Devtools"
description: "Inspect head tags, SEO metadata, entries, and source locations in the Vite DevTools panel. Enabled by default in development."
canonical_url: "https://unhead.unjs.io/docs/head/guides/build-plugins/devtools"
last_updated: "2026-05-14T21:51:17.230Z"
---

**Quick Answer:** The Unhead devtools integration adds a panel to [Vite DevTools](https://github.com/vitejs/devtools) showing all active head tags, entries, SEO overview, plugins, and source file locations. Enabled by default in dev mode; install the `@vitejs/devtools-kit` and `@unhead/devtools-app` peers to activate the UI.

## What Does It Do?

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

- **Entries** — every `useHead()` / `useSeoMeta()` call with its source file and line number
- **Tags** — all resolved tags (meta, link, script, style, etc.) with their props, position, priority, and dedupe keys
- **SEO overview** — title, description, canonical, robots, Open Graph at a glance
- **Scripts** — tracked `useScript()` instances with their load status
- **Plugins** — which Unhead plugins are active
- **Template params** — current template parameter values and separator
- **Validation** — warnings from the [Validate plugin](/docs/head/guides/plugins/validate) (if enabled)

### Source Tracing

The plugin injects `_source` metadata (file path and line number) into every `useHead()`, `useSeoMeta()`, `useHeadSafe()`, and `useScript()` call at transform time. This lets you click through from a tag in the devtools panel to the exact line that created it.

## Setup

Devtools are enabled by default when using the [unified Vite plugin](/docs/head/guides/build-plugins/overview). They only run in `vite dev` (not in builds).

<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
// Enabled automatically
```

</template>
</framework-code>

### Disable

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

## Requirements

The devtools panel requires the `@vitejs/devtools-kit` peer dependency and the `@unhead/devtools-app` package (which provides the UI). Both are optional; the plugin degrades gracefully if they're missing.

## 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** — a client-side module (`/@unhead/bridge.mjs`) that reads the head instance, serializes its state, and syncs it to the Vite DevTools shared state via `@vitejs/devtools-kit/client`
3. **DevTools panel** — a static app (`@unhead/devtools-app`) served at `/__unhead/` and registered as a Vite DevTools 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)