vite-plugin-devtools-json

1.0.0 verified Mon Apr 27 auth: no javascript

Vite plugin (v1.0.0) that generates the Chrome DevTools project settings file (com.chrome.devtools.json) on-the-fly in the dev server. It enables seamless integration with DevTools features like project settings and automatic workspace folders. The plugin serves a JSON endpoint at /.well-known/appspecific/com.chrome.devtools.json providing workspace root and UUID. Supports Vite 5, 6, and 7. Key differentiators: on-demand generation without build step, built-in UUID management, and Windows container path normalization for WSL/Docker Desktop. Written in TypeScript with type declarations.

Common errors

error Cannot find module 'vite-plugin-devtools-json' ↓

cause Package not installed or missing from node_modules.

fix

Run 'npm install -D vite-plugin-devtools-json'

error 'devtoolsJson' is not a function ↓

cause Using named import instead of default import.

fix

Use 'import devtoolsJson from 'vite-plugin-devtools-json''

error Plugin only works with Vite 5, 6, or 7 ↓

cause Installed Vite version mismatch.

fix

Update Vite to ^5.0.0, ^6.0.0, or ^7.0.0

Warnings

deprecated 'normalizeForChrome' option is deprecated. Use 'normalizeForWindowsContainer' instead. ↓

fix Replace 'normalizeForChrome' with 'normalizeForWindowsContainer'.

gotcha The UUID is auto-generated on first dev server start and cached in Vite cache. Changing the cache will generate a new UUID. ↓

fix To persist UUID, pass a fixed uuid in options.

gotcha The plugin only works with Vite 5, 6, or 7. Older versions are not supported. ↓

fix Ensure Vite version is ^5.0.0 || ^6.0.0 || ^7.0.0.

gotcha The projectRoot must be an absolute path. Relative paths will cause incorrect workspace root in DevTools. ↓

fix Use path.resolve(__dirname, '..') or an absolute path string.

Install

npm install vite-plugin-devtools-json

yarn add vite-plugin-devtools-json

pnpm add vite-plugin-devtools-json

Imports

default

wrong

const devtoolsJson = require('vite-plugin-devtools-json')

correct

import devtoolsJson from 'vite-plugin-devtools-json'

Default export; CommonJS require not supported as plugin ships ESM only.

type VitePluginDevToolsOptions

wrong

import { VitePluginDevToolsOptions } from 'vite-plugin-devtools-json'

correct

import type { VitePluginDevToolsOptions } from 'vite-plugin-devtools-json'

Options type is exported; use 'import type' for compile-time only usage.

Plugin

wrong

import { devtoolsJson } from 'vite-plugin-devtools-json'

correct

import devtoolsJson from 'vite-plugin-devtools-json'; export default defineConfig({ plugins: [devtoolsJson()] })

The function is the default export, not a named export.

Quickstart

Basic Vite config with all plugin options enabled and a fixed UUID.

// vite.config.ts
import { defineConfig } from 'vite';
import devtoolsJson from 'vite-plugin-devtools-json';

export default defineConfig({
  plugins: [
    devtoolsJson({
      uuid: '6ec0bd7f-11c0-43da-975e-2a8ad9ebae0b',
      projectRoot: '/path/to/project',
      normalizeForWindowsContainer: true
    })
  ]
});