Vite plugin for generating `com.chrome.devtools.json` on the fly in the devserver.
npm install vite-plugin-devtools-jsonVite plugin for generating the Chrome DevTools project settings file on-the-fly
in the devserver.
This enables seamless integration with the new Chrome DevTools features
1. DevTools Project Settings (devtools.json), and
1. Automatic Workspace folders.
``bash`
npm install -D vite-plugin-devtools-json
Add it to your Vite config
`js
import {defineConfig} from 'vite';
import devtoolsJson from 'vite-plugin-devtools-json';
export default defineConfig({
plugins: [
devtoolsJson(),
// ...
]
});
`
While the plugin can generate a UUID and save it in vite cache, you can also
specify it in the options like in the following:
``
plugins: [
devtoolsJson({ uuid: "6ec0bd7f-11c0-43da-975e-2a8ad9ebae0b" }),
// ...
]
| Name | Type | Default | Description |
|------|------|---------|-------------|
| projectRoot | string | config.root | Absolute path that will be reported to DevTools. Useful for monorepos or when the Vite root is not the desired folder. |normalizeForWindowsContainer
| | boolean | true | Convert Linux paths to UNC form so Chrome on Windows (WSL / Docker Desktop) can mount them (e.g. via WSL or Docker Desktop). Pass false to disable. normalizeForChrome
_Alias:_ (deprecated)_ |uuid
| | string | auto-generated | Fixed UUID if you prefer to control it yourself. |
Example with all options:
`js
import { defineConfig } from 'vite';
import devtoolsJson from 'vite-plugin-devtools-json';
export default defineConfig({
plugins: [
devtoolsJson({
projectRoot: '/absolute/path/to/project',
normalizeForWindowsContainer: true,
uuid: '6ec0bd7f-11c0-43da-975e-2a8ad9ebae0b'
})
]
});
`
The /.well-known/appspecific/com.chrome.devtools.json endpoint will serve the
project settings as JSON with the following structure
`json`
{
"workspace": {
"root": "/path/to/project/root",
"uuid": "6ec0bd7f-11c0-43da-975e-2a8ad9ebae0b"
}
}
where root is the absolute path to your {projectRoot} folder, and uuid` is
a random v4 UUID, generated the first time that you start the Vite devserver
with the plugin installed (it is henceforth cached in the Vite cache folder).
Checkout [bmeurer/automatic-workspace-folders-vanilla] for a trivial example
project illustrating how to use the plugin in practice.
Googlers: We use go/wombat-dressing-room
for publishing.
The code is under MIT License.
[bmeurer/automatic-workspace-folders-vanilla]: https://github.com/bmeurer/automatic-workspace-folders-vanilla