Getting Started

What is Vite DevTools?

Vite DevTools is a devtools framework for the Vite ecosystem. It provides shared infrastructure — a unified dock, type-safe RPC, shared state, flexible UI hosting — so individual tools compose into one consistent UI and authors focus on what makes their integration unique. Any Vite plugin opts in with a devtools.setup hook.

Built-in integrations

Vite DevTools stays dependency-light and advertises its built-in integrations — Rolldown (build analysis: module graphs, chunks, assets, plugins), Vite (plugin inspector), Vitest (test UI), and Oxc (oxlint/oxfmt) — as launchers in the dock. Click one to install its package on demand, then restart the dev server to activate it. Any integration already present in your project is mounted automatically.

Ecosystem

A growing set of integrations already build on Vite DevTools Kit:

• Nuxt DevTools v4 — built on Vite DevTools Kit
• @vitejs/devtools-oxc — first-party Oxc toolchain (oxlint/oxfmt) inspector with custom RPC functions
• UnoCSS Inspector — dock integration for UnoCSS
• vite-plugin-vue-tracer — action button that triggers a DOM inspector

Installation

Install or upgrade Vite to version 8.3+:

package.json

{
  "dependencies": {
    "vite": "^8.3.0"
  }
}

Install the required DevTools package:

pnpm add -D @vitejs/devtools

Enable Vite DevTools in vite.config.ts:

vite.config.ts

import { defineConfig } from 'vite'

export default defineConfig({
  devtools: true,
})

devtools: true enables DevTools for both vite dev and vite build.

Limit DevTools to dev or build

The default apply value is 'all'. Set it to 'serve' or 'build' to enable DevTools for only that command:

vite.config.ts

import { defineConfig } from 'vite'

export default defineConfig({
  devtools: {
    apply: 'serve',
  },
})

Customize the embedded UI

Vite adds the embedded dock automatically during vite dev. Configure its UI through the core devtools option.

embeddedVisibility controls when the dock appears. The default 'normal' shows it immediately. 'passive' hides it until Shift + Alt + D (⇧ ⌥ D on macOS) and remembers when it has been revealed. 'hidden' uses the same shortcut without remembering the choice.

vite.config.ts

import { defineConfig } from 'vite'

export default defineConfig({
  devtools: {
    apply: 'serve',
    embeddedVisibility: 'passive',
  },
})

Use dockPreferences to set the initial dock layout. Users can still change these settings in DevTools.

vite.config.ts

import { defineConfig } from 'vite'

export default defineConfig({
  devtools: {
    apply: 'serve',
    dockPreferences: {
      defaultMode: 'edge',
      defaultPosition: 'bottom',
    },
  },
})

Projects without an HTML entry

For apps where Vite doesn't serve the HTML (JS-only entries, backend integration, middleware mode), import the client injector from a browser entry instead. One entry per visibility mode — import whichever one you want:

// Normal: docks shown immediately
// @ts-expect-error TODO: Remove when this entry has type declarations.
import '@vitejs/devtools/client/inject'

// Passive: docks hidden until Shift+Alt+D, then remembered
// @ts-expect-error TODO: Remove when this entry has type declarations.
import '@vitejs/devtools/client/inject-passive'

// Hidden: docks hidden until Shift+Alt+D, every session
// @ts-expect-error TODO: Remove when this entry has type declarations.
import '@vitejs/devtools/client/inject-hidden'

See Client Script & Context for how injection works and the full troubleshooting checklist.

Building with the app

Set build.withApp to write the static DevTools files alongside the app build:

vite.config.ts

import { defineConfig } from 'vite'

export default defineConfig({
  devtools: {
    apply: 'build',
    build: {
      withApp: true, // generate DevTools output during `vite build`
      // outDir: 'custom-dir', // optional, defaults to Vite's build.outDir
    },
  },
})

Open /__devtools/ for the full-page UI, or load /__devtools/embedded.js to embed the dock in the built app.

What's next

• Explore the built-in tools — inspect Vite development with Vite DevTools and production builds with DevTools for Rolldown.
• Build custom integrations — extend DevTools with the Vite DevTools Kit.
• Contribute — see the contributing guide.

Architecture

Vite DevTools is built on @vitejs/devtools-kit, the integration hub that owns the dock, command palette, terminal aggregation, and the Plugin.devtools.setup hook every integration uses. Kit in turn builds on Devframe, a framework-neutral foundation that any single tool can use directly — including standalone CLIs, MCP servers, or static dashboards that have no Vite dependency. See Devframe for that path.

Integrations like Nuxt DevTools and the first-party @vitejs/devtools-oxc plug into Kit's plugin API. To extend Vite DevTools, see Vite DevTools Kit.