feat: integrate devtools (#21331)

Author: webfansplz

docs/config/shared-options.md

@@ -549,6 +549,17 @@ Whether your application is a Single Page Application (SPA), a [Multi Page Appli
 
 Learn more in Vite's [SSR guide](/guide/ssr#vite-cli). Related: [`server.middlewareMode`](./server-options#server-middlewaremode).
 
+## devtools
+
+- **Experimental:** [Give Feedback](https://github.com/vitejs/devtools/discussions)
+- **Type:** `boolean` | `DevToolsConfig`
+- **Default:** `false`
+
+Enable devtools integration for visualizing the internal state and build analysis.
+Ensure that `@vitejs/devtools` is installed as a dependency. This feature is currently supported only in build mode.
+
+See [Vite DevTools](https://github.com/vitejs/devtools) for more details.
+
 ## future
 
 - **Type:** `Record<string, 'warn' | undefined>`

packages/vite/package.json

@@ -97,6 +97,7 @@
     "@rollup/pluginutils": "^5.3.0",
     "@types/escape-html": "^1.0.4",
     "@types/pnpapi": "^0.0.5",
+    "@vitejs/devtools": "^0.0.0-alpha.24",
     "artichokie": "^0.4.2",
     "baseline-browser-mapping": "^2.9.19",
     "cac": "^6.7.14",
@@ -144,6 +145,7 @@
   },
   "peerDependencies": {
     "@types/node": "^20.19.0 || >=22.12.0",
+    "@vitejs/devtools": "^0.0.0-alpha.24",
     "esbuild": "^0.27.0",
     "jiti": ">=1.21.0",
     "less": "^4.0.0",
@@ -159,6 +161,9 @@
     "@types/node": {
       "optional": true
     },
+    "@vitejs/devtools": {
+      "optional": true
+    },
     "esbuild": {
       "optional": true
     },

packages/vite/rolldown.config.ts

@@ -86,6 +86,7 @@ const nodeConfig = defineConfig({
     'supports-color',
     'utf-8-validate', // ws
     'bufferutil', // ws
+    '@vitejs/devtools/cli-commands',
     ...Object.keys(pkg.dependencies),
     ...Object.keys(pkg.peerDependencies),
   ],
@@ -143,6 +144,7 @@ const moduleRunnerConfig = defineConfig({
     'fsevents',
     'lightningcss',
     /^rolldown\//,
+    '@vitejs/devtools/cli-commands',
     ...Object.keys(pkg.dependencies),
   ],
   plugins: [bundleSizeLimit(54), enableSourceMapsInWatchModePlugin()],

packages/vite/src/node/build.ts

@@ -1723,6 +1723,7 @@ export interface ViteBuilder {
   build(
     environment: BuildEnvironment,
   ): Promise<RolldownOutput | RolldownOutput[] | RolldownWatcher>
+  runDevTools(): Promise<void>
 }
 
 export interface BuilderOptions {
@@ -1834,6 +1835,20 @@ export async function createBuilder(
       environment.isBuilt = true
       return output
     },
+    async runDevTools() {
+      const devtoolsConfig = config.devtools
+      if (devtoolsConfig.enabled) {
+        try {
+          const { start } = await import(`@vitejs/devtools/cli-commands`)
+          await start(devtoolsConfig.config)
+        } catch (e) {
+          config.logger.error(
+            colors.red(`Failed to run Vite DevTools: ${e.message || e.stack}`),
+            { error: e },
+          )
+        }
+      }
+    },
   }
 
   async function setupEnvironment(name: string, config: ResolvedConfig) {

packages/vite/src/node/cli.ts

@@ -365,6 +365,7 @@ cli
         }
         const builder = await createBuilder(inlineConfig, null)
         await builder.buildApp()
+        await builder.runDevTools()
       } catch (e) {
         createLogger(options.logLevel).error(
           colors.red(`error during build:\n${e.stack}`),

packages/vite/src/node/config.ts

@@ -15,6 +15,7 @@ import {
   type RolldownOptions,
   rolldown,
 } from 'rolldown'
+import type { StartOptions } from '@vitejs/devtools/cli-commands'
 import type { Alias, AliasOptions } from '#dep-types/alias'
 import type { AnymatchFn } from '../types/anymatch'
 import { withTrailingSlash } from '../shared/utils'
@@ -90,6 +91,7 @@ import {
   nodeLikeBuiltins,
   normalizeAlias,
   normalizePath,
+  resolveHostname,
   setupRollupOptionCompat,
 } from './utils'
 import {
@@ -507,6 +509,13 @@ export interface UserConfig extends DefaultEnvironmentOptions {
    * @default 'spa'
    */
   appType?: AppType
+  /**
+   * Enable devtools integration. Ensure that `@vitejs/devtools` is installed as a dependency.
+   * This feature is currently supported only in build mode.
+   * @experimental
+   * @default false
+   */
+  devtools?: boolean | DevToolsConfig
 }
 
 export interface HTMLOptions {
@@ -611,6 +620,15 @@ export interface ResolvedWorkerOptions {
   rolldownOptions: RolldownOptions
 }
 
+export interface DevToolsConfig extends Partial<StartOptions> {
+  enabled: boolean
+}
+
+export interface ResolvedDevToolsConfig {
+  config: Omit<DevToolsConfig, 'enabled'> & { host: string }
+  enabled: boolean
+}
+
 export interface InlineConfig extends UserConfig {
   configFile?: string | false
   /** @experimental */
@@ -636,6 +654,7 @@ export interface ResolvedConfig extends Readonly<
     | 'future'
     | 'server'
     | 'preview'
+    | 'devtools'
   > & {
     configFile: string | undefined
     configFileDependencies: string[]
@@ -675,6 +694,7 @@ export interface ResolvedConfig extends Readonly<
     /** @experimental */
     builder: ResolvedBuilderOptions | undefined
     build: ResolvedBuildOptions
+    devtools: ResolvedDevToolsConfig
     preview: ResolvedPreviewOptions
     ssr: ResolvedSSROptions
     assetsInclude: (file: string) => boolean
@@ -725,6 +745,24 @@ export interface ResolvedConfig extends Readonly<
   } & PluginHookUtils
 > {}
 
+export async function resolveDevToolsConfig(
+  config: DevToolsConfig | boolean | undefined,
+  host: string | boolean | undefined,
+): Promise<ResolvedDevToolsConfig> {
+  const resolvedHostname = await resolveHostname(host)
+  const fallbackHostname = resolvedHostname.host ?? 'localhost'
+
+  return {
+    enabled: config === true || !!(config && config.enabled),
+    config: {
+      ...(isObject(config) ? config : {}),
+      host: isObject(config)
+        ? (config?.host ?? fallbackHostname)
+        : fallbackHostname,
+    },
+  }
+}
+
 // inferred ones are omitted
 const configDefaults = Object.freeze({
   define: {},
@@ -1813,6 +1851,11 @@ export async function resolveConfig(
     experimental.renderBuiltUrl = undefined
   }
 
+  const resolvedDevToolsConfig = await resolveDevToolsConfig(
+    config.devtools,
+    server.host,
+  )
+
   resolved = {
     configFile: configFile ? normalizePath(configFile) : undefined,
     configFileDependencies: configFileDependencies.map((name) =>
@@ -1900,6 +1943,7 @@ export async function resolveConfig(
     resolve: resolvedDefaultResolve,
     dev: resolvedDevEnvironmentOptions,
     build: resolvedBuildOptions,
+    devtools: resolvedDevToolsConfig,
 
     environments: resolvedEnvironments,
 
@@ -2004,6 +2048,11 @@ export async function resolveConfig(
       resolved.build.ssrEmitAssets || resolved.build.emitAssets
   }
 
+  // Enable `rolldownOptions.devtools` if devtools is enabled
+  if (resolved.devtools.enabled) {
+    resolved.build.rolldownOptions.devtools ??= {}
+  }
+
   applyDepOptimizationOptionCompat(resolved)
   await setOptimizeDepsPluginNames(resolved)
 

playground/devtools/index.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>DevTools</title>
+  </head>
+
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

playground/devtools/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "@vitejs/test-devtools",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "debug": "node --inspect-brk ../../packages/vite/bin/vite",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "vue": "^3.5.25"
+  },
+  "devDependencies": {
+    "vite": "workspace:*",
+    "@vitejs/devtools": "^0.0.0-alpha.24"
+  }
+}

playground/devtools/src/counter.ts

@@ -0,0 +1,19 @@
+import { ref } from 'vue'
+
+export function useCounter() {
+  const count = ref(0)
+
+  function increment() {
+    count.value++
+  }
+
+  function decrement() {
+    count.value--
+  }
+
+  return {
+    count,
+    increment,
+    decrement,
+  }
+}

playground/devtools/src/main.ts

@@ -0,0 +1,17 @@
+import { watchEffect } from 'vue'
+import { useCounter } from './counter'
+
+const { count, increment, decrement } = useCounter()
+
+watchEffect(() => {
+  document.querySelector('#app')!.textContent = `${count.value}`
+})
+
+const timer = setInterval(() => {
+  if (count.value < 6) {
+    increment()
+  } else {
+    decrement()
+    clearInterval(timer)
+  }
+}, 1000)