Devframe에 내장 된 Vite 용 Svelte DevTools. 디버깅, 프로파일링 및 Svelte/SvelteKit 응용 분야에 15 개의 전문 패널을 제공합니다. 같은 도구가 실행 ** 독립 **에서 /.svelte-devtools/] 당신의 dev 서버에서, 또는 **Vite DevTools Dock ** 때 @vitejs/devtools 설치됩니다.

상태: 초기 개발. API는 변경할 수 있습니다. 이 README는 0.4.0 (Devframe host: 독립 또는 Vite DevTools Dock 내부)를 설명합니다. 0.3.x 내부에서만 렌더링 @vitejs/devtools; 0.3.x에서 업그레이드를 참조하십시오.

특징

• ** 구성 요소 검사 ** - 실시간 구성 요소 계층, props, state 및 민감 값보기
• Reactivity — 가장 쉬운 구성 요소의 전체 응용 개요, 다음 하나의 구성 요소의 현재 의존성 $state, $derived] 및 $effect] 신호 (부품 init 및 shared .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: