Svelte DevTools for Vite，基于 Devframe。提供 15 个专用面板，用于调试、分析和检查 Svelte/SvelteKit 应用程序。同一工具可在你的开发服务器 [/.svelte-devtools/ 独立运行，或安装 @vitejs/devtools 后在 Vite DevTools 底座内运行。

状态： 早期开发。API 可能会发生变化。本 README 描述了 0.4.0（Devframe 主机：独立或 Vite DevTools 底座内）。0.3.x 仅在 @vitejs/devtools 内部渲染;参见从 0.3.x 升级。

特色

• 组件检查器 — 实时查看组件层级结构、道具、状态和反应值
• 反应性 — 对最繁忙组件的全应用概述，然后是某个组件的 $state、$derived 和 $effect 信号的当前依赖关系（组件初始状态和共享 .svelte.js/.ts 模块状态中产生的信号，加上一个用于模板读取的 markup 节点;边缘是“可影响”的，不是记录的原因，也不是完整的应用图）
• 渲染分析器 — 跟踪组件渲染计数、渲染时间，并识别瓶颈
• 路由查看器 — 探索基于文件的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: