Devtools · Unhead [Unhead Home](https://unhead.unjs.io/ "Home") - [Docs](https://unhead.unjs.io/docs/vue/head/guides/get-started/overview) - [Tools](https://unhead.unjs.io/tools) - [Learn](https://unhead.unjs.io/learn/guides/what-is-capo) [Releases](https://unhead.unjs.io/releases) Search…```k`` /` [Unhead on GitHub](https://github.com/unjs/unhead) [User Guides](https://unhead.unjs.io/docs/vue/head/guides/get-started/overview) [API](https://unhead.unjs.io/docs/vue/head/api/get-started/overview) [Releases](https://unhead.unjs.io/docs/vue/releases/v3) Vue - [Switch to Vue](https://unhead.unjs.io/docs/vue/head/guides/build-plugins/devtools) - [Switch to TypeScript](https://unhead.unjs.io/docs/typescript/head/guides/build-plugins/devtools) - [Switch to React](https://unhead.unjs.io/docs/react/head/guides/build-plugins/devtools) - [Switch to Svelte](https://unhead.unjs.io/docs/svelte/head/guides/build-plugins/devtools) - [Switch to Solid.js](https://unhead.unjs.io/docs/solid-js/head/guides/build-plugins/devtools) - [Switch to Angular](https://unhead.unjs.io/docs/angular/head/guides/build-plugins/devtools) - [Switch to Nuxt](https://unhead.unjs.io/docs/nuxt/head/guides/build-plugins/devtools) v3 (stable) Head - [Discord Support](https://discord.com/invite/275MBUBvgP) - [Vue Playground](https://stackblitz.com/edit/github-1ftqrmwn) - Get Started - [Overview](https://unhead.unjs.io/docs/vue/head/guides/get-started/overview) - [Introduction to Unhead](https://unhead.unjs.io/docs/vue/head/guides/get-started/intro-to-unhead) - [Starter Recipes](https://unhead.unjs.io/docs/vue/head/guides/get-started/starter-recipes) - [Installation](https://unhead.unjs.io/docs/vue/head/guides/get-started/installation) - [Upgrade Guide](https://unhead.unjs.io/docs/vue/head/guides/get-started/migration) - Core Concepts - [Titles & Title Templates](https://unhead.unjs.io/docs/vue/head/guides/core-concepts/titles) - [Tag Sorting & Placement](https://unhead.unjs.io/docs/vue/head/guides/core-concepts/positions) - [Class & Style Attributes](https://unhead.unjs.io/docs/vue/head/guides/core-concepts/class-attr) - [Inline Style & Scripts](https://unhead.unjs.io/docs/vue/head/guides/core-concepts/inner-content) - [Tag Deduplication](https://unhead.unjs.io/docs/vue/head/guides/core-concepts/handling-duplicates) - [DOM Event Handling](https://unhead.unjs.io/docs/vue/head/guides/core-concepts/dom-event-handling) - [Script Loading](https://unhead.unjs.io/docs/vue/head/guides/core-concepts/loading-scripts) - [Context & Reactivity](https://unhead.unjs.io/docs/vue/head/guides/core-concepts/reactivity-and-context) - [ Component](https://unhead.unjs.io/docs/vue/head/guides/core-concepts/components) - [Options API](https://unhead.unjs.io/docs/vue/head/guides/core-concepts/options-api) - [Pause DOM Rendering](https://unhead.unjs.io/docs/vue/head/guides/core-concepts/pausing-dom-rendering) - [StreamingNew](https://unhead.unjs.io/docs/vue/head/guides/core-concepts/streaming) - Build Plugins - [Overview](https://unhead.unjs.io/docs/vue/head/guides/build-plugins/overview) - [Tree-Shaking](https://unhead.unjs.io/docs/vue/head/guides/build-plugins/tree-shaking) - [useSeoMeta Transform](https://unhead.unjs.io/docs/vue/head/guides/build-plugins/seo-meta-transform) - [Minify Transform](https://unhead.unjs.io/docs/vue/head/guides/build-plugins/minify-transform) - [Devtools](https://unhead.unjs.io/docs/vue/head/guides/build-plugins/devtools) - [ESLint Plugin](https://unhead.unjs.io/docs/head/guides/eslint-plugin) - Plugins - [Template Params](https://unhead.unjs.io/docs/vue/head/guides/plugins/template-params) - [Alias Sorting](https://unhead.unjs.io/docs/vue/head/guides/plugins/alias-sorting) - [Canonical Plugin](https://unhead.unjs.io/docs/vue/head/guides/plugins/canonical) - [Infer SEO Meta](https://unhead.unjs.io/docs/vue/head/guides/plugins/infer-seo-meta-tags) - [Minify](https://unhead.unjs.io/docs/vue/head/guides/plugins/minify) - [Validate](https://unhead.unjs.io/docs/vue/head/guides/plugins/validate) Build Plugins # Devtools [Copy for LLMs](https://raw.githubusercontent.com/unjs/unhead/refs/heads/main/docs/head/1.guides/build-plugins/4.devtools.md) Last updated Apr 9, 2026 by [Harlan Wilton](https://github.com/harlan-zw) in [feat(devtools): vite devtools integration (#731)](https://github.com/unjs/unhead/pull/731). On this page - [What Does It Do?](#what-does-it-do) - [Setup](#setup) - [Requirements](#requirements) - [How It Works](#how-it-works) - [See Also](#see-also) **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?](#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](https://unhead.unjs.io/docs/head/guides/plugins/validate) (if enabled) ### [Source Tracing](#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](#setup) Devtools are enabled by default when using the [unified Vite plugin](https://unhead.unjs.io/docs/head/guides/build-plugins/overview). They only run in `vite dev` (not in builds). Vue React Nuxt 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()], }) ``` ### [Disable](#disable) ``` Unhead({ devtools: false, }) ``` ## [Requirements](#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](#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](#see-also) - [Build Plugins Overview](https://unhead.unjs.io/docs/head/guides/build-plugins/overview) - All build-time optimizations - [Validate Plugin](https://unhead.unjs.io/docs/head/guides/plugins/validate) - Catch SEO and head tag issues (shown in devtools) [Edit this page](https://github.com/unjs/unhead/edit/main/docs/head/1.guides/build-plugins/4.devtools.md) [Markdown For LLMs](https://raw.githubusercontent.com/unjs/unhead/refs/heads/main/docs/head/1.guides/build-plugins/4.devtools.md) Did this page help you? [Minify Transform Pre-minify static inline script and style content inside useHead() calls at build time using rolldown, esbuild, or lightningcss.](https://unhead.unjs.io/docs/head/guides/build-plugins/minify-transform) [ESLint Plugin Catch unhead misuse, type-narrowing gaps, and v2-to-v3 migration problems at the source level. Pairs with the runtime ValidatePlugin and the unhead CLI.](https://unhead.unjs.io/docs/head/guides/eslint-plugin) On this page - [What Does It Do?](#what-does-it-do) - [Setup](#setup) - [Requirements](#requirements) - [How It Works](#how-it-works) - [See Also](#see-also) [GitHub](https://github.com/unjs/unhead) [ Discord](https://discord.com/invite/275MBUBvgP) [ /llms.txt](https://unhead.unjs.io/llms.txt) [Part of the UnJS ecosystem](https://unjs.io/) ### Head Management - [Getting Started](https://unhead.unjs.io/docs/vue/head/guides/get-started/overview) - [useHead](https://unhead.unjs.io/docs/vue/head/api/composables/use-head) - [useSeoMeta](https://unhead.unjs.io/docs/vue/head/api/composables/use-seo-meta) - [useHeadSafe](https://unhead.unjs.io/docs/vue/head/api/composables/use-head-safe) - [useScript](https://unhead.unjs.io/docs/vue/head/api/composables/use-script) ### Schema.org - [Getting Started](https://unhead.unjs.io/docs/vue/schema-org/guides/get-started/overview) - [useSchemaOrg](https://unhead.unjs.io/docs/vue/schema-org/api/composables/use-schema-org) - [Nodes](https://unhead.unjs.io/docs/vue/schema-org/guides/core-concepts/nodes) - [Recipes](https://unhead.unjs.io/docs/vue/schema-org/guides/recipes/identity) ### Guides - [Titles](https://unhead.unjs.io/docs/vue/head/guides/core-concepts/titles) - [Streaming SSR](https://unhead.unjs.io/docs/vue/head/guides/core-concepts/streaming) - [DOM Events](https://unhead.unjs.io/docs/vue/head/guides/core-concepts/dom-event-handling) - [Plugins](https://unhead.unjs.io/docs/vue/head/guides/plugins/template-params) ### Tools - [Meta Tag Generator](https://unhead.unjs.io/tools/meta-tag-generator) - [OG Image Generator](https://unhead.unjs.io/tools/og-image-generator) - [Schema.org Generator](https://unhead.unjs.io/tools/schema-generator) - [Capo.js Analyzer](https://unhead.unjs.io/tools/capo-analyzer) ### Articles - [What is Capo.js?](https://unhead.unjs.io/learn/guides/what-is-capo) ### Research - [State of in 2026](https://unhead.unjs.io/learn/research/state-of-head-2026) - [Streaming Head Performance](https://unhead.unjs.io/learn/research/streaming-head-performance) - [Capo.js Performance Research](https://unhead.unjs.io/learn/research/capo-performance-research) Copyright © 2025-2026 Harlan Wilton - [MIT License](https://github.com/unjs/unhead/blob/main/license)