feat(devtools): enable dev server integration

[webfansplz]

Background

Vite's experimental devtools option currently supports build-time analysis only. When enabled, Vite loads a single build integration plugin that configures Rolldown analysis and starts Vite DevTools after the build.

Using Vite DevTools during development still requires users to register the DevTools() plugin manually in vite.config.ts. This creates two separate setup paths for development and build analysis.

vitejs/devtools#541 prepares @vitejs/devtools for first-class Vite integration by:

• adding devtools.apply with 'serve', 'build', and 'all'
• making DevToolsIntegration() return an async plugin array
• returning the existing DevTools() plugins in serve mode
• preserving the existing Rolldown integration in build mode

This PR is the corresponding Vite Core integration for @vitejs/devtools 0.6.0.

Changes

• Require @vitejs/devtools 0.6.0.
• Enable the devtools integration for both serve and build.
• Load the plugin array returned by DevToolsIntegration().
• Reuse Vite's existing sortUserPlugins() helper to preserve each integration plugin's pre, normal, or post enforcement order.
• Avoid automatically registering the dev-server integration when the user has already registered DevTools() manually.
• Support devtools.apply through the resolved DevTools configuration.
• Treat a DevTools configuration object as enabled unless enabled: false is explicitly set.
• Update the DevTools playground to install the opt-in Vite inspection integration.
• Update the documentation to clarify that:
  • @vitejs/devtools-vite is required for dev-server inspection.
  • @vitejs/devtools-rolldown is required for build analysis.
  • DevTools runs during both serve and build by default.

Breaking changes

These changes only affect the experimental devtools option.

• devtools: true now enables DevTools during both development and production builds. Previously, it only enabled build-time analysis.

  To preserve the previous behavior:

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

• A DevTools configuration object now enables the integration by default. Previously, an object without enabled: true was treated as disabled.

  Use enabled: false to disable it explicitly:

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

• The minimum supported @vitejs/devtools version is now 0.6.0 because Vite Core relies on the new async plugin-array integration contract.

• Build analysis and dev-server inspection remain opt-in integrations. Users need to install the corresponding package:

  pnpm add -D @vitejs/devtools @vitejs/devtools-vite

  For build analysis:

  pnpm add -D @vitejs/devtools-rolldown

Screenshot

[Copilot]

Pull request overview

Integrates @vitejs/devtools more deeply into Vite Core so the experimental devtools option can activate DevTools for both dev-server inspection (serve) and build analysis (build), aligning behavior with the new async “plugin array” integration contract introduced in @vitejs/devtools 0.6.0.

Changes:

• Updates Vite’s DevTools integration to load an async plugin array and preserve pre/normal/post ordering.
• Changes DevTools enablement semantics so a config object is enabled by default unless enabled: false.
• Bumps DevTools-related dependencies (plus playground + docs) to @vitejs/devtools ^0.6.0 and adds opt-in integration packages in the playground.

Reviewed changes

Copilot reviewed 6 out of 7 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
pnpm-lock.yaml	Updates lockfile for @vitejs/devtools@0.6.0 and its new dependency graph.
playground/devtools/vite.config.ts	Adjusts playground DevTools config to exercise serve-mode integration via apply: 'serve'.
playground/devtools/package.json	Adds @vitejs/devtools-vite and @vitejs/devtools-rolldown to demonstrate opt-in integrations.
packages/vite/src/node/plugins/index.ts	Loads DevTools integration as a plugin set and inserts into Vite’s plugin pipeline.
packages/vite/src/node/config.ts	Updates DevTools config resolution semantics and carries through apply.
packages/vite/package.json	Bumps Vite’s DevTools dependency + peer dependency requirement.
docs/config/shared-options.md	Updates docs to reflect serve + build behavior and required opt-in integration packages.

Files not reviewed (1)

• pnpm-lock.yaml: Generated file

---

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

[sapphi-red]

Are there a reason for the user to add the devtools plugin manually?

[webfansplz]

@vitejs/devtools currently exposes the DevTools() plugin for manual registration. Once dev-mode support is officially available, we can update the docs to recommend the built-in integration for users on Vite 8.3.0+ instead of adding the plugin manually.

[sapphi-red]

Does that mean all options in DevTools will be moved to devtools option?

[sapphi-red]

I'm finding some problems with the current structure:

• The option exists in both the plugin and in core (devtools option)
  • If the user wants to configure the option that only exists in the plugin, the user would need to add the plugin
• A change in ResolvedDevToolsConfig requires a Vite upgrade even if it's an addition
  • This would be confusing when we reach 1.0.0
  • The devtools expects the ResolvedDevToolsConfig on the devtools side, but this isn't correct. The value of config.devtools is the ResolvedDevToolsConfig type that is bundled in Vite core, which is an older version.

[webfansplz]

I'm finding some problems with the current structure:

• The option exists in both the plugin and in core (devtools option)

  • If the user wants to configure the option that only exists in the plugin, the user would need to add the plugin

• A change in ResolvedDevToolsConfig requires a Vite upgrade even if it's an addition

  • This would be confusing when we reach 1.0.0
  • The devtools expects the ResolvedDevToolsConfig on the devtools side, but this isn't correct. The value of config.devtools is the ResolvedDevToolsConfig type that is bundled in Vite core, which is an older version.

Good catch, I'll improve them.