feat(core): support vite devtools in serve mode

[webfansplz]

Background

Vite's built-in devtools option currently supports build-time analysis only. Dev-time integration still requires users to register the DevTools() plugin manually.

This PR prepares Vite DevTools for first-class integration with the Vite dev server while preserving the existing build-time behavior.

Changes

• Add devtools.apply with 'serve', 'build', and 'all' options.
• Enable DevTools configuration objects by default unless enabled: false is set.
• Update DevToolsIntegration() to return an async plugin array:
  • serve reuses the existing DevTools() plugins.
  • build keeps the existing Rolldown build integration.
• Apply the configured Environment allowlist to dev-time Vite inspection, HMR notifications, and invalidation tracking.
• Update the public API snapshots, tests, and documentation.

Breaking changes

• DevToolsIntegration() now returns Promise<{ name: string }[]> instead of a single { name: string } plugin.
• A DevTools configuration object now enables DevTools by default. Use enabled: false to disable it explicitly.

Follow-up

After this PR is merged, I will release these changes as @vitejs/devtools v0.6.

I will then open a follow-up PR in Vite core to:

• require @vitejs/devtools v0.6+
• enable DevTools during vite dev
• load and order the returned integration plugins
• avoid duplicate registration when users configure DevTools() manually
• update the Vite documentation and playground

[pkg-pr-new]

Open in StackBlitz

@vitejs/devtools

npm i https://pkg.pr.new/@vitejs/devtools@541

@vitejs/devtools-kit

npm i https://pkg.pr.new/@vitejs/devtools-kit@541

@vitejs/devtools-oxc

npm i https://pkg.pr.new/@vitejs/devtools-oxc@541

@vitejs/devtools-rolldown

npm i https://pkg.pr.new/@vitejs/devtools-rolldown@541

@vitejs/devtools-vite

npm i https://pkg.pr.new/@vitejs/devtools-vite@541

@vitejs/devtools-vitest

npm i https://pkg.pr.new/@vitejs/devtools-vitest@541

commit: 2186028

[Copilot]

Pull request overview

Prepares @vitejs/devtools for first-class Vite dev-server (serve) integration while preserving existing build-time (Rolldown) behavior. This introduces an apply switch to scope DevTools to serve, build, or both, and ensures the configured environment allowlist also affects dev-time Vite inspection/invalidation behavior.

Changes:

• Add DevToolsApply ('serve' | 'build' | 'all'), default-enable config objects, and gate behavior via isDevToolsEnabled().
• Update DevToolsIntegration() to return an async plugin array, using DevTools() for serve and a build integration plugin for build.
• Apply the environment allowlist to Vite inspection context creation, HMR notifications, and invalidation tracking; update tests, docs, and public API snapshots accordingly.

Reviewed changes

Copilot reviewed 12 out of 14 changed files in this pull request and generated no comments.

Show a summary per file

File	Description
test/snapshots/tsnapi/@vitejs/devtools/integration.snapshot.d.ts	Snapshot update for DevToolsIntegration() now returning Promise<...[]>.
test/snapshots/tsnapi/@vitejs/devtools/config.snapshot.js	Snapshot update to include new isDevToolsEnabled() export.
test/snapshots/tsnapi/@vitejs/devtools/config.snapshot.d.ts	Snapshot update for enabled?:, new apply, and DevToolsApply type.
packages/vite/src/node/inspect/server.ts	Skip invalidation tracking for disabled environments.
packages/vite/src/node/inspect/plugin.ts	Avoid creating env contexts / sending HMR notifications for disabled environments.
packages/vite/src/node/inspect/context.ts	Track enabled environment allowlist and prevent exposing disabled env contexts via ViteInspectContext.
packages/vite/src/node/tests/inspect-context.test.ts	Add coverage ensuring only configured environments are exposed/recorded.
packages/core/src/node/plugins/integration.ts	Gate integration/runDevTools by apply; serve uses DevTools() plugins, build uses Rolldown integration plugin.
packages/core/src/node/config.ts	Add apply + default enabling semantics; introduce isDevToolsEnabled().
packages/core/src/node/tests/integration.test.ts	Add coverage for serve/build plugin selection and apply behavior.
packages/core/src/node/tests/config.test.ts	Add coverage for normalization defaults and isDevToolsEnabled() logic.
packages/core/src/integration.ts	Public API wrapper updated to match async array return.
docs/kit/client-context.md	Update injection/troubleshooting wording to reflect config-based integration path.
docs/guide/index.md	Update guide to prefer devtools: true, document apply, and clarify embedded customization/build-with-app flow.

Suppressed comments (1)

packages/core/src/node/plugins/integration.ts:35

• runDevTools() starts DevTools once per selected environment, but the environment loop variable is unused and start() doesn’t take an environment. On multi-environment builds (e.g. client + ssr), this will attempt to start the standalone DevTools server multiple times (likely failing due to port binding / duplicated output). Consider starting DevTools only once when at least one selected environment is present.

  for (const _environment of getDevToolsEnvironments(config)) {
    try {
      const { start } = await import('../cli-commands')
      await start(config.devtools.config)
    }

---

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