https://github.com/chromedevtools/vite-plugin-devtools-json
Vite plugin for generating `com.chrome.devtools.json` on the fly in the devserver.
https://github.com/chromedevtools/vite-plugin-devtools-json
chrome devtools vite
Last synced: 5 months ago
JSON representation
Vite plugin for generating `com.chrome.devtools.json` on the fly in the devserver.
- Host: GitHub
- URL: https://github.com/chromedevtools/vite-plugin-devtools-json
- Owner: ChromeDevTools
- License: mit
- Created: 2025-02-28T12:39:51.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-03-11T10:12:48.000Z (about 1 year ago)
- Last Synced: 2025-03-11T11:25:25.730Z (about 1 year ago)
- Topics: chrome, devtools, vite
- Language: TypeScript
- Homepage:
- Size: 12.7 KB
- Stars: 3
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Vite Plugin for DevTools Project Settings (devtools.json)
Vite 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)](https://goo.gle/devtools-json-design), and
1. [Automatic Workspace folders](http://goo.gle/devtools-automatic-workspace-folders).
## Installation
```bash
npm install -D vite-plugin-devtools-json
```
## Usage
Add it to your Vite config
```js
import {defineConfig} from 'vite';
import devtoolsJson from 'vite-plugin-devtools-json';
export default defineConfig({
plugins: [
devtoolsJson(),
// ...
]
});
```
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.
## Publishing
**Googlers:** We use [go/wombat-dressing-room](http://go/wombat-dressing-room)
for publishing.
## License
The code is under [MIT License](LICENSE).
[bmeurer/automatic-workspace-folders-vanilla]: https://github.com/bmeurer/automatic-workspace-folders-vanilla