refactor: devtools integration

packages/vite/package.json

@@ -94,7 +94,7 @@
     "@types/escape-html": "^1.0.4",
     "@types/pnpapi": "^0.0.5",
     "@vitest/utils": "4.1.5",
-    "@vitejs/devtools": "^0.1.15",
+    "@vitejs/devtools": "^0.1.18",
     "artichokie": "^0.4.3",
     "baseline-browser-mapping": "^2.10.23",
     "cac": "^7.0.0",
@@ -140,7 +140,7 @@
   },
   "peerDependencies": {
     "@types/node": "^20.19.0 || >=22.12.0",
-    "@vitejs/devtools": "^0.1.0",
+    "@vitejs/devtools": "^0.1.18",
     "esbuild": "^0.27.0 || ^0.28.0",
     "jiti": ">=1.21.0",
     "less": "^4.0.0",

packages/vite/src/node/build.ts

@@ -1847,14 +1847,15 @@ export async function createBuilder(
       return output
     },
     async runDevTools() {
-      const devtoolsConfig = config.devtools
-      if (devtoolsConfig.enabled) {
+      if (config.devtools.enabled) {
         try {
-          const { start } = await import(`@vitejs/devtools/cli-commands`)
-          await start(devtoolsConfig.config)
+          const { runDevTools } = await import('@vitejs/devtools/integration')
+          await runDevTools(builder)
         } catch (e) {
           config.logger.error(
-            colors.red(`Failed to run Vite DevTools: ${e.message || e.stack}`),
+            colors.red(
+              `Failed to run Vite DevTools: ${e?.message || e?.stack}`,
+            ),
             { error: e },
           )
         }

packages/vite/src/node/config.ts

@@ -2072,11 +2072,6 @@ 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)
 

packages/vite/src/node/plugins/index.ts

@@ -1,4 +1,5 @@
 import aliasPlugin, { type ResolverFunction } from '@rollup/plugin-alias'
+import colors from 'picocolors'
 import type { ObjectHook } from 'rolldown'
 import {
   viteAliasPlugin as nativeAliasPlugin,
@@ -51,6 +52,10 @@ export async function resolvePlugins(
   const buildPlugins = isBundled
     ? await (await import('../build')).resolveBuildPlugins(config)
     : { pre: [], post: [] }
+  const devtoolsIntegrationPlugin =
+    config.devtools.enabled && !isWorker
+      ? await loadDevToolsIntegrationPlugin(config)
+      : null
   const { modulePreload } = config.build
 
   return [
@@ -121,6 +126,7 @@ export async function resolvePlugins(
     ...postPlugins,
 
     ...buildPlugins.post,
+    devtoolsIntegrationPlugin,
 
     // internal server-only plugins are always applied after everything else
     ...(isBundled
@@ -133,6 +139,23 @@ export async function resolvePlugins(
   ].filter(Boolean) as Plugin[]
 }
 
+async function loadDevToolsIntegrationPlugin(
+  config: ResolvedConfig,
+): Promise<Plugin | null> {
+  try {
+    const { DevToolsIntegration } = await import('@vitejs/devtools/integration')
+    return DevToolsIntegration({ config })
+  } catch (error: any) {
+    config.logger.error(
+      colors.red(
+        `Failed to load Vite DevTools integration: ${error?.message || error?.stack}`,
+      ),
+      { error },
+    )
+    return null
+  }
+}
+
 export function createPluginHookUtils(
   plugins: readonly Plugin[],
 ): PluginHookUtils {

playground/devtools/package.json

@@ -14,6 +14,6 @@
   },
   "devDependencies": {
     "vite": "workspace:*",
-    "@vitejs/devtools": "^0.1.15"
+    "@vitejs/devtools": "^0.1.18"
   }
 }