Skip to content

index.md

Latest commit

 

History

History
154 lines (110 loc) · 4.16 KB

index.md

File metadata and controls

154 lines (110 loc) · 4.16 KB
outline deep

Getting Started

Warning

Vite DevTools currently only supports build mode of Vite 8+. Dev mode and Vite versions under 8 are not supported yet.

What is Vite DevTools?

Vite DevTools is a comprehensive set of developer tools for visualizing and analyzing your Vite build process. It provides deep insights into your build pipeline, module dependencies, and build metadata, helping you understand and optimize your Vite applications.

Key Features

  • 🔍 Build Analysis: Visualize module graphs, dependencies, and build metadata
  • 📊 Performance Insights: Understand build performance and bottlenecks
  • 🧩 Extensible: Build custom DevTools integrations with the DevTools Kit
  • 🎨 Unified Interface: All DevTools integrations appear in a consistent dock interface
  • ⚡ Type-Safe: Full TypeScript support with type-safe RPC communication

Installation

If you want to give an early preview, you can try it out by building this project from source, or install the preview build with the following steps:

Install or upgrade your Vite to version 8:

{
  "dependencies": {
    "vite": "^8.0.0"
  }
}

Install the required DevTools package:

pnpm add -D @vitejs/devtools

Vite DevTools has two client modes. Configure one mode at a time.

Standalone mode

The DevTools client runs in a standalone window (no user app).

Configure vite.config.ts:

import { defineConfig } from 'vite'

export default defineConfig({
  devtools: {
    enabled: true,
  },
})

Run:

pnpm build

After the build completes, open the DevTools URL shown in the terminal.

Embedded mode

The DevTools client runs inside an embedded floating panel.

Configure vite.config.ts:

import { DevTools } from '@vitejs/devtools'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [
    DevTools(),
  ],
  build: {
    rolldownOptions: {
      devtools: {}, // enable devtools mode
    },
  }
})

Run:

pnpm build
pnpm dev

Then open your app in the browser and open the DevTools panel.

Building with the App

You can also generate a static DevTools build alongside your app's build output by enabling the build.withApp option:

import { DevTools } from '@vitejs/devtools'
import { defineConfig } from 'vite'

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

When build.withApp is enabled, running pnpm build will automatically generate the static DevTools output into the build output directory. This captures real build data from the same build context, so DevTools can display accurate build analysis without a separate build step.

What's Next?

Now that you have Vite DevTools set up, you can:

  • Explore the built-in tools: Check out the various panels and visualizations available in the DevTools interface
  • Build custom integrations: Learn how to extend Vite DevTools with your own tools using the DevTools Kit
  • Contribute: Help improve Vite DevTools by checking out our contributing guide

Current Limitations

Note

Vite DevTools is currently in active development with the following limitations:

  • Build mode only: Currently works with Vite-Rolldown's build mode
  • Dev mode: Not yet supported (planned for future releases)
  • Vite Version: Requires Vite 8 or higher versions for now

Architecture Overview

Vite DevTools consists of several core packages:

  • @vitejs/devtools: The main entry point and CLI
  • @vitejs/devtools-kit: Utilities and types for building custom integrations
  • @vitejs/devtools-rolldown: Built-in UI panel for Rolldown
  • @vitejs/devtools-rpc: RPC layer for server-client communication

For more details on extending Vite DevTools, see the DevTools Kit documentation.