Svelte DevTools

#4.12 / 17 rate

Svelte DevTools

8,000 users

2023-10-24

ignatiusmb

Extension Information

5 star
76%
4 star
0%
3 star
0%
2 star
6%
1 star
18%

Supported Languages

Permissions

Hot Permissions

Description

Browser DevTools extension for debugging Svelte applications.

Check out the changelog at https://github.com/sveltejs/svelte-devtools/releases

---

Svelte DevTools is a browser DevTools extension for the open-source Svelte JavaScript framework. It allows you to gain deep insights and inspect the Svelte component hierarchies in the Developer Tools panel itself. After installing, you will get a new tab in your browser DevTools titled "Svelte". The DevTools panel will only work on sites with `dev` mode enabled, which should work out-of-the-box when you're running your Svelte app locally.

Key Features:

- Zero-configuration: Run your application in development mode and have everything working
- Real-time Component Tree: Svelte component hierarchy visualization in real-time, deeper understanding of your application structure and identify relationships between components easily
- Interactive State Inspection: Modify and experiment with component states effortlessly in one place, and easily see events and other state
- Dark Mode Support: Enjoy the sleek and user-friendly interface in both light and dark modes
- Open Source and Community-Driven: This extension is open source and actively maintained by the Svelte community

This extension requires permissions to access the tab's content, data will be processed locally in your browser and cleared after each session.

Reviews

Albert Bronsky
Albert Bronsky

Phil Cleaver
Phil Cleaver

Sorry for 1 star, but for me this doesn't work on my Chromebook. Did fresh npn create svelte@latest, npm i. restart etc, App runs great but I get Svelte DevTools No Svelte app detected reload Not working? Did you... Build with dev mode enabled? Use Svelte version ^4.0.0? chrome os Version 125.0.6422.197 (Official Build) (64-bit) lenovo chromebook

tabliqat chi
tabliqat chi

Does this work with Svelte (not Sveltekit) project initiated using Vite too? I tried both `compilerOptions: { dev: true }` and `{ dev: true }` (adding them in svelte.config.js), but I still get the message "No Svelte app detected".

Similar extensions

Redux DevTools
Redux DevTools

Redux DevTools

Solid Devtools
Solid Devtools

thetarnav

Livewire devtools
Livewire devtools

rw4lll

Scroll-Driven Animations Debugger
Scroll-Driven Animations Debugger

Bramus Van Damme

Gimli Tailwind
Gimli Tailwind

https://gimli.app

Vueable Query
Vueable Query

Vueable Query

Web Component DevTools
Web Component DevTools

Matsuuu

Liveblocks DevTools
Liveblocks DevTools

Liveblocks

DevBytes: Developer's News & Coding Extension
DevBytes: Developer's News & Coding Extension

https://devbytes.co.in

Ember Inspector
Ember Inspector

https://www.emberjs.com

Debugger for Google Analytics 4 (GA4)
Debugger for Google Analytics 4 (GA4)

James Yoon

Page Modeller (Selenium, Robot Framework etc)
Page Modeller (Selenium, Robot Framework etc)

Dan Humphrey