Repository files navigation

Vite plugin for generating the Chrome DevTools project settings file on-the-flyin the devserver.

This enables seamless integration with the new Chrome DevTools features

1. DevTools Project Settings (devtools.json), and
2. Automatic Workspace folders.

npm install -D vite-plugin-devtools-json

Add it to your Vite config

import{defineConfig}from'vite';importdevtoolsJsonfrom'vite-plugin-devtools-json';exportdefaultdefineConfig({plugins:[devtoolsJson(),// ...]});

While the plugin can generate a UUID and save it in vite cache, you can alsospecify it in the options like in the following:

  plugins: [    devtoolsJson({ uuid: "6ec0bd7f-11c0-43da-975e-2a8ad9ebae0b" }),    // ...  ]

Example with all options:

import{defineConfig}from'vite';importdevtoolsJsonfrom'vite-plugin-devtools-json';exportdefaultdefineConfig({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 theproject settings as JSON with the following structure

{"workspace": {"root":"/path/to/project/root","uuid":"6ec0bd7f-11c0-43da-975e-2a8ad9ebae0b"  }}

whereroot is the absolute path to your{projectRoot} folder, anduuid isa random v4 UUID, generated the first time that you start the Vite devserverwith the plugin installed (it is henceforth cached in the Vite cache folder).

Checkoutbmeurer/automatic-workspace-folders-vanilla for a trivial exampleproject illustrating how to use the plugin in practice.

Googlers: We usego/wombat-dressing-roomfor publishing.

The code is underMIT License.