feat: integrate devtools

docs/config/shared-options.md

@@ -511,6 +511,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.14",
     "cac": "^6.7.14",

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

@@ -39,7 +39,7 @@ import type {
   ResolvedConfig,
   ResolvedEnvironmentOptions,
 } from './config'
-import { resolveConfig } from './config'
+import { resolveConfig, resolveDevToolsConfig } from './config'
 import type { PartialEnvironment } from './baseEnvironment'
 import { buildReporterPlugin } from './plugins/reporter'
 import { buildEsbuildPlugin } from './plugins/esbuild'
@@ -1679,6 +1679,7 @@ export interface ViteBuilder {
   build(
     environment: BuildEnvironment,
   ): Promise<RolldownOutput | RolldownOutput[] | RolldownWatcher>
+  runDevTools(): Promise<void>
 }
 
 export interface BuilderOptions {
@@ -1790,6 +1791,20 @@ export async function createBuilder(
       environment.isBuilt = true
       return output
     },
+    async runDevTools() {
+      const devtoolsConfig = await resolveDevToolsConfig(config)
+      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 {
@@ -612,6 +621,10 @@ export interface ResolvedWorkerOptions {
   rolldownOptions: RolldownOptions
 }
 
+export interface DevToolsConfig extends Partial<StartOptions> {
+  enabled: boolean
+}
+
 export interface InlineConfig extends UserConfig {
   configFile?: string | false
   /** @experimental */
@@ -726,6 +739,28 @@ export interface ResolvedConfig extends Readonly<
   } & PluginHookUtils
 > {}
 
+export async function resolveDevToolsConfig(
+  config: InlineConfig | ResolvedConfig,
+): Promise<{
+  config: Omit<DevToolsConfig, 'enabled'> & { host: string }
+  enabled: boolean
+}> {
+  const resolvedHostname = await resolveHostname(config.server?.host)
+  const fallbackHostname = resolvedHostname.host ?? 'localhost'
+
+  return {
+    enabled:
+      config.devtools === true ||
+      !!(config.devtools && config.devtools.enabled),
+    config: {
+      ...(isObject(config.devtools) ? config.devtools : {}),
+      host: isObject(config.devtools)
+        ? (config.devtools?.host ?? fallbackHostname)
+        : fallbackHostname,
+    },
+  }
+}
+
 // inferred ones are omitted
 const configDefaults = Object.freeze({
   define: {},
@@ -2005,6 +2040,13 @@ export async function resolveConfig(
       resolved.build.ssrEmitAssets || resolved.build.emitAssets
   }
 
+  // Enable `rolldownOptions.devtools` if devtools is enabled
+  if ((await resolveDevToolsConfig(config)).enabled) {
+    if (!resolved.build.rolldownOptions.devtools) {
+      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)

playground/devtools/vite.config.ts

@@ -0,0 +1,9 @@
+import { defineConfig } from 'vite'
+
+export default defineConfig({
+  base: '/',
+  devtools: {
+    enabled: false,
+    port: 5173,
+  },
+})