feat(devtools): enable dev server integration by webfansplz · Pull Request #23333 · vitejs/vite

webfansplz · 2026-08-23T12:42:06Z

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 · 2026-08-24T05:32:00Z

+  const isDevToolsPluginRegistered =
+    config.command === 'serve' &&
+    [...prePlugins, ...normalPlugins, ...postPlugins].some(
+      (plugin) => plugin.name === 'vite:devtools:server',
+    )


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

@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.

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

Yeah, I think the ideal use case would be

export default defineConfig({ devtools: true, plugins: [ // ideally no manually ViteDevTools() VueDevTools(), NuxtDevTools(), XxxDevTools(), ] })

sapphi-red · 2026-08-24T06:21:46Z

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 · 2026-08-24T06:29:11Z

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.

sapphi-red

As long as the option lives in Vite, I guess the complexity around the plugin resolution is inevitable.
@bluwy Do you have any thoughts?

antfu · 2026-09-01T05:00:22Z

My high-level instinct is that we should have as little logic on the Vite side as possible to decouple Vite and Vite DevTools, so they can keep evolving without trapping each other. If the config hook changing the devtools option would make the whole resolution complex, I wonder if we should not allow user plugins to enable/disable devtools, but only allow the user config to control it.

Imagine a case where a user has the Vue DevTools plugin installed in the plugins list, but has devtools: false in the same thing; I think it would make more sense for Vue DevTools to be disabled, respecting the user's option. On the contrary, I don't see much sense in a plugin to enable the DevTools for users (by mutating the devtools option). Plugins could print a warning saying "XXX DevTools is disabled, as the Vite DevTools is not persent, to enable it, set devtools: true in the vite.config.ts" or so.

webfansplz · 2026-09-01T09:32:33Z

Thanks @antfu and @sapphi-red — I’ve updated both implementations based on your feedback.

Changes in this PR:

DevTools integration plugins are now added alongside user plugins before sortUserPlugins(), so they follow the standard apply, enforce, config, and configResolved lifecycle.
The automatic integration is determined exclusively from the top-level user devtools option. Plugin config hooks can’t enable, disable, or mutate it, removing the timing ambiguity around whether DevTools should be loaded.
Build-time startup no longer depends on plugin ordering. Vite calls builder.runDevTools() after the application and fallback environments have finished building.
Vite delegates option normalization and integration behavior to the installed @vitejs/devtools version instead of maintaining its own resolved configuration.
The Vite PR now uses the pkg.pr.new build from bff0115.

Changes in vitejs/devtools#549:

The integration returns regular Vite plugins for both serve and build modes.
runDevTools() checks for the build integration plugin before starting standalone DevTools, avoiding extra state or plugin-order assumptions.
Duplicate registration is detected on the DevTools side, covering both multiple manual DevTools() instances and automatic plus manual registration.
Using only the manual DevTools() plugin remains supported when the core option is disabled or not configured.

Please give this a final check. If everything looks good, I’ll release Vite DevTools 0.7 and mark this PR as ready to merge. 🙏

sapphi-red · 2026-09-03T04:22:12Z

I don't see much sense in a plugin to enable the DevTools for users

I was thinking of a case where a meta-framework wants to change the value, but that reasoning makes sense to me.

bluwy · 2026-09-03T08:38:55Z

As long as the option lives in Vite, I guess the complexity around the plugin resolution is inevitable.
@bluwy Do you have any thoughts?

I'm not really sure what you mean. I guess the PR has changed since you last commented. The current structure of how the types is re-exported seems fine to me though.

sapphi-red

Sorry, after your update, I noticed about this and was thinking of how to solve it:
https://github.com/vitejs/vite/pull/23333/changes#r3923113643

sapphi-red · 2026-09-03T09:42:36Z

As long as the option lives in Vite, I guess the complexity around the plugin resolution is inevitable.
@bluwy Do you have any thoughts?

I'm not really sure what you mean. I guess the PR has changed since you last commented. The current structure of how the types is re-exported seems fine to me though.

The problem there was the following circular dep:

devtools plugin should be added before config hooks as all plugins should be listed in the config hook
devtools plugin should only be loaded if the devtools option is enabled
whether the devtools option is enabled relies on the config hook

The original implementation solved this by breaking the first point. Anthony's suggestion solved this by breaking the third point.

webfansplz · 2026-09-03T10:49:14Z

Thanks for the thorough review, @sapphi-red! I’ve addressed all your feedback. Could you take one final look?

antfu · 2026-09-03T11:28:18Z

+export type {
+  DevToolsConfig,
+  ResolvedDevToolsConfig,
+} from '@vitejs/devtools/config'


One idea about this, since @vitejs/devtools deps on vite while vite is not depend directly on @vitejs/devtools, what we can do is that we define an empty config interface in Vite:

// Augment by `@vitejs/devtools` export interface DevToolsConfig {} export interface ResolvedDevToolsConfig {}

and in @vitejs/devtools, we do

declare module 'vite' { interface DevToolsConfig { foo: string, bar: ... } interface ResolvedDevToolsConfig {} }

I don't know which approach would be more robust, just an idea I haven't tested

I think that is better if we can remove all @vitejs/devtools import from Vite core. But since that exists, we need to keep @vitejs/devtools as a peer dep, so I think it won't simplify much.

antfu

Overall this LGTM, thanks!

sapphi-red

Thanks!

sapphi-red · 2026-09-03T11:36:28Z

/ecosystem-ci run

pkg-pr-new · 2026-09-03T11:37:51Z

Open in StackBlitz

@vitejs/plugin-legacy

pnpm add https://pkg.pr.new/@vitejs/plugin-legacy@23333 -D

npm i https://pkg.pr.new/@vitejs/plugin-legacy@23333 -D

yarn add https://pkg.pr.new/@vitejs/plugin-legacy@23333.tgz -D

vite

pnpm add https://pkg.pr.new/vite@23333 -D

npm i https://pkg.pr.new/vite@23333 -D

yarn add https://pkg.pr.new/vite@23333.tgz -D

commit: 8d6ae3d

sapphi-red · 2026-09-03T11:45:24Z

/ecosystem-ci run vite-plugin-svelte

vite-ecosystem-ci · 2026-09-03T11:49:04Z

📝 Ran ecosystem CI on 047bf9c: Open

suite	result	latest scheduled
vite-plugin-svelte	✅ success	❌ failure

✅

vite-ecosystem-ci · 2026-09-03T12:08:45Z

📝 Ran ecosystem CI on 047bf9c: Open

suite	result	latest scheduled
marko	✅ success	❌ failure
vite-plugin-cloudflare	✅ success	❌ failure
storybook	✅ success	❌ failure
vinext	✅ success	❌ failure
netlify-vite-plugin	❌ failure	❌ failure
nitro	✅ success	❌ failure
tanstack-start	⏹️ cancelled	❌ failure
analogjs	✅ success	❌ failure
vite-plugin-rsc	❌ failure	❌ failure
qwik	❌ failure	❌ failure
vite-plugin-vue	✅ success	❌ failure
module-federation	✅ success	❌ failure
vite-plugin-svelte	❌ failure	❌ failure
vite-plugin-pwa	✅ success	❌ failure
laravel	❌ failure	❌ failure
astro	✅ success	❌ failure
sveltekit	❌ failure	❌ failure
vuepress	✅ success	❌ failure
quasar	✅ success	❌ failure
vitepress	✅ success	❌ failure
nuxt	✅ success	❌ failure
vite-plugin-laravel	❌ failure	❌ failure
vite-setup-catalogue	✅ success	❌ failure
react-router	❌ failure	❌ failure
vite-environment-examples	❌ failure	❌ failure
vite-plugin-react	✅ success	❌ failure
vike	✅ success	❌ failure
waku	❌ failure	❌ failure
vitest	❌ failure	❌ failure
unocss	✅ success	❌ failure

✅

webfansplz added 2 commits August 19, 2026 18:44

feat: init

cbbab81

chore: update

29e4baa

Copilot AI lite review requested due to automatic review settings August 23, 2026 12:42

webfansplz marked this pull request as draft August 23, 2026 12:42

Copilot started reviewing on behalf of webfansplz August 23, 2026 12:42 View session

Copilot AI reviewed Aug 23, 2026

View reviewed changes

Comment thread packages/vite/src/node/plugins/index.ts Outdated

Comment thread packages/vite/package.json

webfansplz marked this pull request as ready for review August 23, 2026 13:26

chore: update

ce8ee4a

sapphi-red reviewed Aug 24, 2026

View reviewed changes

sapphi-red added the p3-significant High priority enhancement (priority) label Aug 24, 2026

sapphi-red added this to the 8.3 milestone Aug 24, 2026

webfansplz marked this pull request as draft August 24, 2026 06:29

webfansplz mentioned this pull request Aug 25, 2026

feat(core): resolve vite integration options within devtools vitejs/devtools#549

Merged

chore: update

03eb82d

antfu reviewed Aug 27, 2026

View reviewed changes

Comment thread packages/vite/src/node/plugins/index.ts Outdated

chore: update

da44975

sapphi-red reviewed Sep 1, 2026

View reviewed changes

Comment thread packages/vite/src/node/config.ts Outdated

Comment thread packages/vite/src/node/config.ts Outdated

Comment thread packages/vite/src/node/config.ts Outdated

chore: update

2d6ad2d

sapphi-red reviewed Sep 3, 2026

View reviewed changes

webfansplz added 2 commits September 3, 2026 15:14

chore: update

2eaff30

chore: update

9de7e1c

webfansplz and others added 2 commits September 3, 2026 17:05

chore: update

6b3705f

chore: type import

18fa534

webfansplz marked this pull request as ready for review September 3, 2026 09:07

sapphi-red reviewed Sep 3, 2026

View reviewed changes

Comment thread packages/vite/src/node/config.ts Outdated

Comment thread packages/vite/src/node/config.ts Outdated

Comment thread packages/vite/src/node/config.ts Outdated

chore: update

37f8ced

antfu reviewed Sep 3, 2026

View reviewed changes

antfu previously approved these changes Sep 3, 2026

View reviewed changes

sapphi-red added 2 commits September 3, 2026 20:33

chore: add devtools to minimumReleaseAgeExclude

1e956c9

chore: bump peerDep as well

b2c869f

sapphi-red dismissed antfu’s stale review via b2c869f September 3, 2026 11:33

sapphi-red previously approved these changes Sep 3, 2026

View reviewed changes

vite-ecosystem-ci Bot added the trigger: preview label Sep 3, 2026

chore: remove unused external config

ae8c0cb

sapphi-red dismissed their stale review via ae8c0cb September 3, 2026 11:41

fix: optional type

8d6ae3d

sapphi-red merged commit 68aeb8a into vitejs:main Sep 7, 2026
19 checks passed

webfansplz deleted the feat/vite-devtools-dev branch September 7, 2026 06:49

This was referenced Sep 7, 2026

release: v8.3.0-beta.1 #23449

Merged

chore: update Vite from 8.2.2 to 8.3.0 sudocarlos/tailrelay#121

Open

Uh oh!

Uh oh!

Conversation

webfansplz commented Aug 23, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Background

Changes

Breaking changes

Screenshot

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

sapphi-red Aug 24, 2026

Choose a reason for hiding this comment

Uh oh!

webfansplz Aug 24, 2026

Choose a reason for hiding this comment

Uh oh!

sapphi-red Aug 24, 2026

Choose a reason for hiding this comment

Uh oh!

antfu Aug 27, 2026

Choose a reason for hiding this comment

Uh oh!

sapphi-red commented Aug 24, 2026

Uh oh!

webfansplz commented Aug 24, 2026

Uh oh!

Uh oh!

sapphi-red left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

antfu commented Sep 1, 2026

Uh oh!

webfansplz commented Sep 1, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

sapphi-red commented Sep 3, 2026

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

bluwy commented Sep 3, 2026

Uh oh!

sapphi-red left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

sapphi-red commented Sep 3, 2026

Uh oh!

webfansplz commented Sep 3, 2026

Uh oh!

antfu Sep 3, 2026

Choose a reason for hiding this comment

Uh oh!

sapphi-red Sep 3, 2026

Choose a reason for hiding this comment

Uh oh!

antfu left a comment

Choose a reason for hiding this comment

Uh oh!

sapphi-red left a comment

Choose a reason for hiding this comment

Uh oh!

sapphi-red commented Sep 3, 2026

Uh oh!

webfansplz commented Aug 23, 2026 •

edited

Loading

webfansplz commented Sep 1, 2026 •

edited

Loading

pkg-pr-new Bot commented Sep 3, 2026 •

edited

Loading