Devframe上に構築されたVite用のSvelte DevTools。 デバッグ、プロファイリング、およびSvelte/SvelteKitアプリケーションを検査するための15の専門パネルを提供します。 同じツールは、dev サーバの [/.svelte-devtools/]] で スタンドアロン を実行します。 [@vitejs/devtools]] がインストールされている場合は、Vite DevTools ドック** の横にあります。

ステータス: 初期開発。 APIは変更する場合があります。 このREADME は、0.4.0 (Devframe ホスト: standalone または Vite DevTools ドック内) について説明しています。 0.3.x は [@vitejs/devtools] 内でのみレンダリングされます。 0.3.x からアップグレードを参照してください。

##特徴

-コンポーネントのインスペクター — コンポーネントの階層、 props、state、およびリアルタイムの反応値を表示 -Reactive — busiest コンポーネントの全アプリ概要、そして 1 つのコンポーネントの [[$state]、 $derived]、 $effect] シグナル (コンポーネントの init と [[.svelte.js/.ts]]]]] の間に生成されたシグナル) モジュール状態、および markup ノードがテンプレートから読み込みます。 エッジは、記録された原因ではなく、完全なアプリのグラフではありません) -Render Profiler — コンポーネントのレンダー数、レンダー回数を追跡し、ボトルネックを識別する

• ルートビューア — 動的パラメータで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: