Getting Started.

Add the plugin to your vite.config.ts. It must come before sveltekit() so its transforms run before the Svelte compiler.

import { svelteDevtools } from 'vite-devtools-svelte'
import { sveltekit } from '@sveltejs/kit/vite'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [
    svelteDevtools(),
    sveltekit(),
  ],
})

npm run dev

Open /.svelte-devtools/ on your dev server, for example http://localhost:5173/.svelte-devtools/. The first time, the page asks for a one-time code: the dev server prints a 6-digit code and a link in the terminal. Type the code, or open the link.

That browser is then trusted: reloads and dev-server restarts don't ask again. Trusted tokens are stored by the dev server in ~/.svelte-devtools/devframe/auth.json, shared by all projects on this machine. The browser keeps its token per origin, so a dev server on another port or host asks for a code again.

On a single-user machine where the dev server only listens on localhost, you can skip the code with svelteDevtools({ clientAuth: false }) (or DevTools({ clientAuth: false }) inside the Vite DevTools dock). Without it, any page or device that can reach the dev server can read your project files through the DevTools, so keep it on if you are unsure.

Optional. With @vitejs/devtools installed, the same panels open as a Svelte entry in the Vite DevTools dock instead of standalone.

npm install -D @vitejs/devtools

Add DevTools() after svelteDevtools() and before sveltekit():

import { svelteDevtools } from 'vite-devtools-svelte'
import { DevTools } from '@vitejs/devtools'
import { sveltekit } from '@sveltejs/kit/vite'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [svelteDevtools(), DevTools(), sveltekit()],
})

Sign-in is handled once by Vite DevTools' own authentication. The panels also stay reachable at /.svelte-devtools/.