devtools-vite-plugin

Install it as a dev dependency and call devtools() as the first entry in the Vite plugins array. All its sub-plugins use enforce: 'pre', so they must run before framework plugins like react() to transform raw JSX.

Every sub-plugin uses enforce: 'pre' and must transform code before framework plugins process it. If devtools comes after react(), source injection and enhanced logs silently fail because the raw JSX is already transformed.

No. It has a peer dependency on vite ^6.0.0 || ^7.0.0 and uses Vite-specific APIs like configureServer and transform filters. For other bundlers, use @tanstack/devtools-event-bus client directly without the Vite plugin.

The inject-source transform skips JSX elements that spread the component's props parameter, since the spread would overwrite the injected data-tsd-source attribute. It also skips files and components matching your injectSource.ignore patterns.

No. Source inspection, console piping, enhanced logging, and the event bus only run in dev mode with the serve command. In production, only the remove-devtools-on-build sub-plugin is active, stripping devtools imports and JSX from the bundle.

The default port 4206 causes EADDRINUSE on the second server, which falls back to an OS-assigned port automatically. For predictable ports, set eventBusConfig.port explicitly per project, such as 4206 and 4207.