Svelte DevTools — Extended Fork

This is a personal fork of sveltejs/svelte-devtools, extended with additional debugging features for Svelte 4 and Svelte 5 applications.

Svelte DevTools is a browser extension for the Svelte framework. It lets you inspect the component tree, reactive state, stores, context, and performance profile directly in the browser DevTools.

---

Requirements

• Chrome 121 or higher (Manifest V3)
• Application running Svelte ^4.0.0 or ^5.0.0
• Application compiled with dev: true (SvelteKit enables this automatically)

---

Features

Component Inspector

Browse the full Svelte component tree. Select any node to inspect its props, state, events, and source location. Use keyboard arrows to navigate the tree.

For Svelte 5 components the panel shows three separate sections: $state runes, $derived runes, and $effect runes.

Re-render Counter

Every time a component updates, a counter is incremented and displayed at the top of the detail panel (orange badge ⟳ N re-renders). This is a quick way to spot components that are re-rendering more than expected.

Store Inspector

Lists all registered stores with their current value and type (writable, readable, derived, custom). Select a store to edit its value in place (writable stores only).

Value history — the last 10 values of each store are recorded with timestamps. Expand the History section in the detail panel to see the change log.

Custom Svelte 5 rune stores are supported as plain objects. The extension will:

• snapshot enumerable getter values,
• ignore methods in the inspector payload,
• poll for changes when no subscribe() API exists,
• try generic mutation through restore(), update(), setField() or setX() methods.

You can also register read-only computed snapshots:

window.$svelteStores({
  bookingSnapshot: {
    type: 'custom',
    writable: false,
    getSnapshot: () => buildBookingSnapshot(),
  },
});

If the extension is opened after the app booted, it will also auto-consume window.__svelteStores__ and window.__svelteStoreDeps__ when present.

Store Dependency Graph

Visualise how your stores depend on each other. Switch from the list view to the graph view with the ⬡ Graph toggle in the Stores tab header.

Declare dependencies from your application code:

// Call once after your stores are set up
window.$svelteStoreDeps({
  total:    ['price', 'quantity'],
  subtotal: ['price'],
});

Nodes are colour-coded: green = writable, indigo = derived, grey = readable / unregistered. Click a node to highlight its edges.

Context Inspector

Inspect values passed through Svelte's setContext / getContext. Register a context group from your component:

import { getContext } from 'svelte';

// Call whenever the context object changes
window.$svelteContext('MyFeature', {
  theme: getContext('theme'),
  locale: getContext('locale'),
});

The Context tab (purple badge) lists every registered group and its key/value pairs.

Update Profiler

Record component update timings to identify performance bottlenecks.

• Svelte 4 — real millisecond timing per block.p call
• Svelte 5 — update count (per-component timing is not available outside the compiler)

Usage:

1. Open the Profiler tab
2. Click ● Record to start
3. Interact with your application
4. Click ■ Stop

The table shows each component with its update count, total time, average time, and max time. Click any column header to sort. Rows are colour-coded: warm (avg > 16 ms), hot (avg > 50 ms).

---

Development

Clone and install dependencies:

git clone https://github.com/sveltejs/svelte-devtools.git
cd svelte-devtools
pnpm install

Building on Linux ARM64

Native binaries for @rollup/rollup-linux-arm64-gnu are not bundled. The project uses a workaround:

• A stub for @rollup/rollup-linux-arm64-gnu (node_modules/stub/index.js) using acorn
• The Vite build runs programmatically via build-vite.mjs with esbuild: false

Run the full build:

# Rollup — builds courier.js and background.js
node node_modules/.pnpm/[email protected]/.../rollup -c

# Vite — builds the panel UI
node build-vite.mjs

Output is in workspace/extension/build/.

Loading the extension

1. Navigate to chrome://extensions
2. Enable Developer mode
3. Click Load unpacked → select the build/ directory
4. Open DevTools on any Svelte app → Svelte tab

---

Architecture

┌─────────────────────────────────────────────────────┐
│  Browser page (MAIN world)                          │
│  courier.js   ← injected content script             │
│  core.js      ← hooks into Svelte internals         │
│  profiling.js ← shared profiler module              │
└────────────────────┬────────────────────────────────┘
                     │ window.postMessage / chrome.runtime.sendMessage
┌────────────────────▼────────────────────────────────┐
│  background.js  (MV3 service worker)                │
│  Relays messages between page and DevTools panel    │
│  chrome.runtime.Port  ←→  chrome.tabs.sendMessage   │
└────────────────────┬────────────────────────────────┘
                     │ chrome.runtime.Port
┌────────────────────▼────────────────────────────────┐
│  DevTools panel  (Svelte 5 SPA — index.html)        │
│  App.svelte          — tab bar + routing            │
│  Inspector.svelte    — component tree               │
│  StoreInspector.svelte + StoreGraph.svelte          │
│  ContextInspector.svelte                            │
│  Profiler.svelte                                    │
└─────────────────────────────────────────────────────┘

Message bus

Messages travel over three bridges, each with a specific namespace:

Prefix	Direction	Purpose
bridge::page/…	page → panel	Component/store updates from Svelte hooks
bridge::ext/…	panel → page	Commands from the panel (select, highlight, profile)
bridge::courier/…	internal	Normalised events after routing through background
bypass::ext/…	panel → background	Control messages (init, refresh) that stay in the background

MV3 service worker reconnection

Chrome MV3 service workers are killed after ~30 seconds of inactivity. The panel handles this transparently:

• runtime.svelte.ts wraps all port logic in a connect() function
• On port.onDisconnect, a reconnect is scheduled after 300 ms
• Each new connection re-sends bypass::ext/init so the background re-registers the tab
• "Extension context invalidated" (extension reloaded mid-session) is caught and handled gracefully — the panel must be reopened

---

Public APIs

These functions can be called from your application code to feed data into the DevTools:

// Register store dependencies for the graph view
window.$svelteStoreDeps(deps: Record<string, string[]>): void

// Register a context group for the Context Inspector
window.$svelteContext(label: string, map: Map<string, any>): void

---

Changelog

Fork additions

Feature	Description
Horizontal tab bar	Components / Stores / Context / Profiler tabs at the top
Re-render counter	Per-component update count in the detail panel
Store value history	Last 10 values with timestamps for every store
Context Inspector	Inspect setContext/getContext values via $svelteContext()
Update Profiler	Record component update timings with sortable table
Store Dependency Graph	SVG force-directed graph via $svelteStoreDeps()
MV3 manifest fix	Removed legacy background.scripts (MV2 only)
Port auto-reconnect	Transparent reconnection when service worker is killed

---

Acknowledgements

• Original extension created by RedHatter
• Maintained by the Svelte core team