feat(devtools): enable dev server integration

[anurag6569201]

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

Source merge-base: 1c46db555d2927fc62686341911b03f6d365a36a
Source head: 8d6ae3dc91d0a157db212be7d656e1d9802b3085

[shipwright-agent]

⚠️ Shipwright · Approve with conditions

Recommendation: approve PR #1 with conditions · Tier T3
Checks: 0 total · 0 needing attention

Next step: an authorized approver must satisfy the approval condition.

Findings (6)

• HIGH The new 'devtoolsOptions' cloning and comparison logic is non-obvious: 'deepClone' is conditionally applied only for objects, while booleans are shared by reference. · packages/vite/src/node/config.ts:1569
  • Fix: Review the cited evidence, fix the risk if confirmed, and rerun Shipwright.
• HIGH The devtools integration is loaded and resolved before user plugin config hooks run, but the warning/validation only happens afterward. · packages/vite/src/node/config.ts:1592
  • Fix: Review the cited evidence, fix the risk if confirmed, and rerun Shipwright.
• HIGH The comparison '!isDeepStrictEqual(config.devtools, devtoolsOptions)' cannot detect in-place mutation when 'config.devtools' is a primitive boolean, because 'devtoolsOptions' is as · packages/vite/src/node/config.ts:1592
  • Fix: Review the cited evidence, fix the risk if confirmed, and rerun Shipwright.
• HIGH The peer dependency range for '@vitejs/devtools' is narrowed from '^0.4.0 || ^0.5.0' to exactly '^0.7.1', which is a breaking peer dependency change for consumers on older devtools · packages/vite/package.json:138
  • Fix: Review the cited evidence, fix the risk if confirmed, and rerun Shipwright.
• HIGH The lockfile shows '@vitejs/devtools@0.5.1' remains present as an optional dependency in another package snapshot, while the main package now uses '0.7.1'. · pnpm-lock.yaml:10454
  • Fix: Review the cited evidence, fix the risk if confirmed, and rerun Shipwright.
• MEDIUM The 'devtools' option is cloned into 'devtoolsOptions' before plugins run, but after 'runConfigHook' the code compares 'config.devtools' to 'devtoolsOptions' using 'isDeepStrictEqu · packages/vite/src/node/config.ts:1592
  • Fix: Fix the review finding before release.

Conditions

• human approval required (T3): apply the approval label

Fireworks usage: 45,187 input · 814 output · 46,001 total tokens · $0.0105 · 16s · 0 fix iteration(s)

Open the Shipwright check for full evidence and the audit bundle. Use /shipwright rerun to verify again.

[shipwright-agent]

Shipwright · HIGH

The peer dependency range for '@vitejs/devtools' is narrowed from '^0.4.0 || ^0.5.0' to exactly '^0.7.1', which is a breaking peer dependency change for consumers on older devtools

Impact: The peer dependency range for '@vitejs/devtools' is narrowed from '^0.4.0 || ^0.5.0' to exactly '^0.7.1', which is a breaking peer dependency change for consumers on older devtools versions. This can cause install failures or force unexpected upgrades in downstream projects.

Suggested fix: Review the cited evidence, fix the risk if confirmed, and rerun Shipwright.