Registry / devops / vite-devtools-svelte

vite-devtools-svelte

library0.2.1jsnpmunverified

Svelte DevTools plugin for Vite DevTools, providing 15 specialized panels for debugging, profiling, and inspecting Svelte/SvelteKit applications. Current version 0.2.1 (early development, APIs may change). Integrates directly into the Vite DevTools UI, offering unique features like a reactive graph visualization, render profiler, state timeline, and SvelteKit route viewer. Alternative to browser-based DevTools with deeper Vite integration.

devops

npm install vite-devtools-svelte

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · VITE-DEVTOOLS-SVEL

vite-devtools-svelte

devopsjavascriptv0.2.1

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

SvelteDevTools

✓ import { SvelteDevTools } from 'vite-devtools-svelte'

✗ import SvelteDevTools from 'vite-devtools-svelte'

Named export, not default.

svelteDevTools

✓ import { svelteDevTools } from 'vite-devtools-svelte'

✗ const svelteDevTools = require('vite-devtools-svelte')

For ESM-only, CommonJS not supported.

type SvelteDevToolsOptions

✓ import type { SvelteDevToolsOptions } from 'vite-devtools-svelte'

Type import for TypeScript users.

Shows how to install and configure the plugin in a Vite + Svelte project, enabling 15 DevTools panels.

// Install // npm install --save-dev vite-devtools-svelte // vite.config.ts import { defineConfig } from 'vite'; import { svelte } from '@sveltejs/vite-plugin-svelte'; import { svelteDevTools } from 'vite-devtools-svelte'; export default defineConfig({ plugins: [ svelte(), svelteDevTools(), // Adds 15 DevTools panels ], }); // Then run vite dev, open Vite DevTools (Alt+Shift+D) to see the panels.

Debug

Known issues

breakingRequires Node.js >=22.0.0 and vite ^8.0.14. Older versions are incompatible.

fix

Upgrade Node.js to v22+ and vite to v8.

affects: >=0.0.0

deprecatedAPI may change significantly in future versions; consider locking to exact version.

fix

Pin to current version (e.g., "vite-devtools-svelte": "0.2.1") and watch release notes.

affects: >=0.2.1

gotchaPlugin only works with Vite DevTools (Alt+Shift+D), not browser DevTools. Ensure Vite DevTools is enabled.

fix

Install @vitejs/devtools (if not bundled) and check vite-config: devTools: true.

affects: >=0.0.0

gotchaSome panels (e.g., API Playground) require SvelteKit, not just Svelte.

fix

Use with SvelteKit project or skip those panels if using plain Svelte.

affects: >=0.0.0

gotchaIncompatible with other Vite DevTools plugins that modify the same panels.

fix

Avoid installing multiple Vite DevTools plugins that target overlapping panels (e.g., svelte-devtools browser extension).

affects: >=0.0.0

Errors

Common errors & fixes

Error: Cannot find module 'vite-devtools-svelte' or its corresponding type declarations.

Package not installed or missing from devDependencies.

fix

Run 'npm install --save-dev vite-devtools-svelte' or check package.json.

TypeError: (0 , vite_devtools_svelte.svelteDevTools) is not a function

Wrong import or package version mismatch.

fix

Ensure you import { svelteDevTools } (named) and not default. Check package is version 0.2.1.

The plugin 'vite-devtools-svelte' is not compatible with this version of Vite. Expected ^8.0.14.

Vite version not satisfying peerDependency.

fix

Update vite to ^8.0.14 or downgrade vite-devtools-svelte to compatible version.

Module not found: Error: Can't resolve '@vitejs/devtools'

Vite DevTools core missing.

fix

Install @vitejs/devtools (or check if already included in Vite 8).

Upgrade

Version history

0.2.1latest on npm

Audit

Dependencies

viterequiredpeer dependency, requires Vite DevTools core

Agent activity

6 hits · last 30 days

node

Resources

githubhttps://github.com/baseballyama/vite-devtools-svelte ↗

packagevite-devtools-svelte ↗

homepagehttps://github.com/baseballyama/vite-devtools-svelte#readme ↗