Svelte DevTools для Vite, построенный на Devframe. Предоставляет 15 специализированных панелей для отладки, профилирования и проверки приложений Svelte / SvelteKit. Этот же инструмент работает standalone на /.svelte-devtools/ на вашем сервере разработчиков или ** в доке Vite DevTools** при установке @vitejs/devtools.

** Статус: ** Раннее развитие. API могут меняться. Этот README описывает 0.4.0 (хост Devframe: автономный или внутри дока Vite DevTools). 0.3.x отображается только внутри @vitejs/devtools; см. Обновление с 0.3.x.

Особенности

Инспектор компонентов - Просмотр иерархии компонентов, реквизитов, состояния и реактивных значений в режиме реального времени Реактивность — обзор всего приложения самых загруженных компонентов, затем текущих зависимостей сигналов одного компонента $state, $derived и $effect (сигналов, созданных во время входа компонента и совместного состояния модуля .svelte.js/.ts, плюс узел markup для считываний из шаблона; края «могут повлиять», а не записанная причина, и не полный график приложения) Render Profiler - Отслеживайте количество рендеров, время рендеринга и идентифицируйте узкие места Route Viewer — Исследуйте файловую структуру маршрутизации SvelteKit с динамическими параметрами

vite-devtools-svelte

Svelte DevTools for Vite, built on Devframe. Provides 15 specialized panels for debugging, profiling, and inspecting Svelte/SvelteKit applications. The same tool runs standalone at /.svelte-devtools/ on your dev server, or inside the Vite DevTools dock when @vitejs/devtools is installed.

Status: Early development. APIs may change. This README describes 0.4.0 (Devframe host: standalone or inside the Vite DevTools dock). 0.3.x rendered only inside @vitejs/devtools; see Upgrading from 0.3.x.

Features

• Component Inspector — View component hierarchy, props, state, and reactive values in real-time
• Reactivity — A whole-app overview of the busiest components, then the current dependencies of one component’s $state, $derived and $effect signals (signals created during component init and shared .svelte.js/.ts module state, plus a markup node for reads from the template; edges are “can affect”, not a recorded cause, and not the complete app graph)
• Render Profiler — Track component render counts, render times, and identify bottlenecks
• Route Viewer — Explore SvelteKit file-based routing structure with dynamic parameters
• Load Profiler — Monitor SvelteKit load functions with waterfall visualization
• State Timeline — Record and replay state changes across the application
• API Playground — Test SvelteKit server endpoints (+server.ts) directly from DevTools
• Error Dashboard — Centralized view of compiler warnings and runtime errors
• Code Inspector — View compiled Svelte output with source mapping
• Module Graph — Visualize module dependencies and detect circular imports
• OG Preview — Preview Open Graph meta tags for SEO validation
• Build Analysis — Analyze build chunks and bundle composition
• FPS Monitor — Real-time frame rate monitoring with historical data
• Asset Browser — Browse and preview static assets with metadata
• Overview — Project summary with versions and dependency info

Screenshots

Panel shots: captured from the UI in dev-mock mode with synthetic data, before the reactivity update (Social preview: a generated SvelteKit test app). Reactivity shots: captured in CI from the real runtime, against the synthetic demo app in examples/sample-app.

Overview: what the counts cover and the most active components: