Svelte DevTools

Browser DevTools extension for debugging Svelte applications.

What is Svelte DevTools?

Svelte DevTools is a browser DevTools extension for the open-source Svelte JavaScript framework, allowing deep insights and inspection of Svelte component hierarchies in real-time. It offers a zero-configuration setup, real-time component tree visualization, interactive state inspection, and dark mode support, and is open source and community-driven.

Download

Stats

By: ignatiusmb

View on Chrome Web Store

Users: 6,000+

Rating: 4.27 (15)

Version: 2.2.1 (Last updated: 2024-05-03)

Creation date: 2023-10-24

Risk impact: Moderate risk impact

Risk likelihood: High risk likelihood

Manifest version: 3

Permissions:

activeTab
scripting

Host permissions:

*://*/*

Size: 59.67K

Email: ig*****@gmail.com

Stats date:

Chrome-Stats Rank

# 13057 ▲ 29

Other rankings

#5494 in Developer Tools ▼ 11 #66 in component keyword 16 ▼ 24 #161 in developer tools keyword 56 ▼ 124 #169 in state keyword 5 ▼ 92

Other platforms

Not available on Firefox

Not available on Edge

Want to check extension ranking and stats more quickly for other Chrome extensions? Install Chrome-Stats extension to view Chrome-Stats data as you browse the Chrome Web Store.

Summary

Analyze keywords

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.

User reviews

User reviews summary

These summaries are automatically generated weekly using AI based on recent user reviews. Chrome Web Store does not verify user reviews, so some user reviews may be inaccurate, spammy, or outdated.

Pros

Useful for debugging Svelte projects
Works well for editing props
Powerful tool for Svelte development

Cons

Not working with SvelteKit
Difficulty detecting Svelte projects initiated using Vite
Limited support for certain Svelte project configurations

Most mentioned

Useful for debugging Svelte projects
Not working with SvelteKit
Powerful tool for Svelte development

Recent reviews

fiq, 2023-12-06

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".

tabliqat chi, 2024-04-12

Michael Elbaz, 2024-01-01

View all user reviews

Safety

Risk impact

Svelte DevTools may not be safe to use and it requires some risky permissions. Exercise caution when installing this extension. Review carefully before installing.