vite-plugin-devtools-json
https://github.com/chromedevtools/vite-plugin-devtools-json- Category
- Developer Tools
- Rank
- No. 793Tools index
- Pricing
- Open Source
- Type
- TOOL
- Builder
- chromedevtools
- GitHub
- 405 stars
- Date
About
Vite plugin that generates com.chrome.devtools.json on the fly during dev to enable Chrome DevTools workspace.
What it does
This small Vite extension exposes project identity and root information through the development server, letting Chrome connect the served app to its local workspace. It creates a stable identifier automatically or accepts one supplied by the developer.
Why it's ranked here
Its narrow scope is a strength: setup requires one development dependency and one plugin entry. The implementation also handles monorepo roots, WSL, and Docker Desktop paths. Tests cover the main response and normalization behaviors.
What's good
The identifier persists in Vite’s cache, so repeated requests and later development sessions retain the same workspace identity. Developers can override the reported root or identifier, disable path conversion, and use current Vite major versions from 5 through 8.
Tradeoffs
It serves only during Vite development. Preview requests deliberately receive a not-found response, and Rollup or Rolldown cannot use it directly. Path conversion depends on WSL or Docker Desktop environment variables, while identifier storage uses synchronous filesystem operations.
How to use it well
Choose it for Vite projects whose developers use Chrome workspace features, especially monorepos or Windows container setups needing explicit root handling. Add it to the development configuration and set a fixed identifier when reproducibility matters. It does not provide production serving, browser automation, or general build-tool integration.
Technical notes+
src/index.ts defines a post-enforced Vite plugin whose configureServer hook exits outside development, resolves relative cache and project roots, validates or generates a v4 UUID, and registers middleware for /.well-known/appspecific/com.chrome.devtools.json. It rewrites roots for WSL and Docker Desktop when enabled; configurePreviewServer returns 404 for that endpoint. test/index.test.ts exercises response shape, UUID stability within a server run, custom roots, disabled normalization, WSL, and Docker Desktop. rollup.config.ts builds CommonJS, ESM, and declaration outputs from the TypeScript source. package.json exposes the package through import and require entry points and declares Vite 5 through 8 as peer-compatible.
Observed
- License
- MIT
- Primary language
- TypeScript
- Install surface
- npm development dependency named vite-plugin-devtools-json
- Interface
- Vite plugin with development-server middleware
- Vite support
- Peer dependency supports Vite major versions 5, 6, 7, and 8
- Module packaging
- Provides CommonJS, ES module, and TypeScript declaration outputs
- Test structure
- Vitest integration tests use Supertest against a Vite development server
Read from README.md, package.json, src/index.ts, rollup.config.ts, test/index.test.ts, LICENSE, .npmignore, tsconfig.json.
What it can do
Generate Chrome DevTools configuration file
Vite development server configuration → com.chrome.devtools.json file
Enable Chrome DevTools workspace integration
Development server and source files → Active workspace connection
Automatically update DevTools configuration during development
File changes and server restarts → Updated workspace mapping
Map local source files to browser resources
Local file paths and served URLs → File path mappings for DevTools
Tags
Tech Stack
Comments (0)
No comments yet
Editorially curated, with community endorsements as a secondary signal. Corrections welcome.