Svelte DevTools: a Svelte & SvelteKit guide for developers

Debugging Svelte is harder than it needs to be—especially when you're juggling props, state, and reactivity across a complex component tree. The Svelte DevTools: a Svelte & SvelteKit guide for developers walks you through the official browser extension that transforms component inspection from guesswork into precision diagnostics. In this post, we'll show you how to unlock the full power of Svelte DevTools, from inspecting component internals to catching reactivity bugs before they hit production.

What is Svelte DevTools?

Svelte DevTools is the official browser extension for inspecting Svelte and SvelteKit applications. Think of it as the React DevTools or Vue DevTools equivalent—but built specifically for Svelte's reactive model. It integrates directly into your browser's developer console and gives you a real-time view into your component hierarchy, state, props, and reactivity.

For Svelte 5, the extension has been significantly improved to handle the new rune system and fine-grained reactivity. If you're running Svelte 4, you'll get solid support too. The extension is available for Chrome, Firefox, and Edge, making it accessible regardless of your browser choice.

Installation is straightforward: grab it from your browser's extension store, and it'll automatically detect Svelte apps running on localhost or any origin you whitelist. No configuration needed.

Browser Extension for Svelte 5

Svelte 5 introduced a cleaner, more explicit reactivity model with runes like $state, $derived, and $effect. The DevTools extension has been rewritten to surface these concepts directly in the inspector UI, making it far easier to understand what's reactive and why.

Once you install the extension, open your Svelte 5 app and fire up the browser DevTools (F12 or right-click → Inspect). You'll see a new "Svelte" tab appear alongside Elements, Console, and Network. Click it, and you're greeted with your component tree displayed in a collapsible hierarchy.

Here's a practical scenario: you're building a shopping cart in a SvelteKit e-commerce site. Your root layout uses a +layout.svelte with cart state, and child routes display products. Without DevTools, tracing prop changes through nested components is tedious. With it, you can click any component in the tree and immediately see its props, state, and derived values.

// +layout.svelte
<script>
  import { cartStore } from '$lib/stores';
  let cart = $state([]);
  
  function addItem(item) {
    cart = [...cart, item];
  }
</script>

<div>
  <slot />
</div>

When you add an item and open DevTools, you'll see cart update in real-time in the extension's state panel. This instant feedback loop cuts debugging time dramatically.

Inspecting Props and State

The heart of Svelte DevTools is the ability to inspect component props and state without littering your code with console logs. Click any component in the tree, and a side panel opens showing you exactly what data that component holds.

Let's say you have a ProductCard.svelte receiving props for a product and an `onAdd` callback:

// ProductCard.svelte
<script>
  import { selected } = from '$lib/stores';
  
  let { product, onAdd } = $props();
  let quantity = $state(1);
  
  function handleAdd() {
    onAdd({ ...product, quantity });
    quantity = 1;
  }
</script>

<div>
  <h3>{product.name}</h3>
  <p>{product.price}</p>
  <input type="number" bind:value={quantity} min="1" />
  <button onclick={handleAdd}>Add to Cart</button>
</div>

Open DevTools, navigate to the ProductCard component in the tree, and you'll see:

• Props: product (the full object) and onAdd (the function)
• State: quantity (currently 1)
• Stores: selected if it's being used

If you change the quantity input, watch the DevTools state panel update instantly. This is invaluable when you're trying to understand whether a component is rendering because props changed, state changed, or a store updated.

In team environments, this transparency is huge. A junior developer can inspect a complex component and immediately see the shape of data flowing through it—no need to ask "what props does this component take?" They can see it live.

Highlighting Components On-Hover

One of the most underused features is component highlighting. Hover over any component name in the DevTools tree, and that component gets highlighted with a blue outline in your rendered page. It's like the browser's element inspector, but specifically for your Svelte components.

This is a game-changer for visually understanding your component hierarchy, especially in deeply nested layouts. You're looking at a SvelteKit dashboard with dozens of components, and you're not sure if a certain card is rendered by Component A or Component B? Hover in DevTools, and the answer lights up on screen.

The highlight also persists briefly when you click a component name, giving you time to see exactly where it lives in your DOM. Combined with the props/state panel, you now have a complete mental model of how a component fits into the page.

Debugging Reactivity

This is where Svelte DevTools truly shines. Reactivity bugs are among the most frustrating to track down because they're often invisible—a value updates somewhere, but a dependent component doesn't re-render. Or vice versa: something renders when it shouldn't.

In Svelte 5, the DevTools extension shows you which runes are active in each component, and critically, why a component is re-rendering. Did a prop change? Did local state update? Did a store change trigger it?

Consider this scenario: you have a `FinancialDashboard.svelte` with derived revenue totals:

// FinancialDashboard.svelte
<script>
  import { transactions } = from '$lib/stores';
  
  let filter = $state('all');
  
  let filtered = $derived(
    filter === 'all' 
      ? $transactions 
      : $transactions.filter(t => t.type === filter)
  );
  
  let total = $derived(
    filtered.reduce((sum, t) => sum + t.amount, 0)
  );
</script>

<div>
  <select bind:value={filter}>
    <option>all</option>
    <option>income</option>
    <option>expense</option>
  </select>
  <p>Total: ${total}</p>
</div>

Suppose the total doesn't update when you change the filter. Open DevTools, click the FinancialDashboard component, and look at the reactivity panel. You'll see which runes have dependencies on which other runes. If `filter` isn't listed as a dependency for `filtered`, you've found your bug. The DevTools extension shows you the dependency graph graphically.

This kind of visibility is what takes a veteran developer from "I'll add some debug logs and figure this out over coffee" to "I can see the dependency chain right here, and it's wrong."

Beyond just visualization, the extension also lets you trigger component updates manually. You can edit state values directly in the DevTools panel and watch the component re-render. This is perfect for testing edge cases without needing to manually trigger them in the UI.

Common Mistakes

Forgetting to whitelist your domain: If you're debugging a production build or a custom domain, DevTools won't connect by default. Check the extension settings and add your domain to the whitelist. This catches many developers off-guard the first time.

Confusing Svelte stores with component state: DevTools clearly separates them, but some teams mix them without understanding the implications. Props and component state are local; stores are global. If a store changes, any component subscribed to it re-renders. This can hide performance issues. Use DevTools to audit which components are actually watching which stores.

Not using DevTools during development: Many developers treat it as a last-resort debugging tool, but it's far more useful as a development companion. Keep it open alongside your code editor. You'll catch bugs earlier and gain deeper intuition about how Svelte's reactivity works.

Assuming DevTools shows everything: It doesn't. Custom stores, effects that run outside the reactive system, and async operations are harder to inspect. Use DevTools as a starting point, not a complete diagnosis tool. Combine it with traditional logging when needed.

Key Takeaways

• Install Svelte DevTools to get a real-time component tree inspector, component state viewer, and reactivity debugger in your browser.
• Inspect props and state directly—no more console.log statements needed. See the exact values and data shapes flowing through your components.
• Use component highlighting to visually identify where components sit in your DOM and how they nest.
• Leverage the reactivity panel to understand dependency chains and spot why components aren't re-rendering as expected.
• Edit state values directly in DevTools to test edge cases and trigger re-renders without manipulating the UI.
• Whitelist your development domain in the extension settings to ensure DevTools connects reliably.
• Use DevTools proactively during development, not just when debugging. It deepens your understanding of Svelte's reactivity model.