What the panel can show

The panel's status chip says where its data comes from. Each source is a different way of getting the component tree, and they differ in how much they can show.

Live: the plugin #

The full tool, and what the rest of these docs describe. The app's own dev server instruments every component through Svelte's public API (see Architecture), so you get the tree, every value, editing, history, highlight and the element picker.

How to get it: add runespectPreprocess() and runespect() to the app's Vite config, as in Getting started, and run the dev server. Then use any of the three panels: the window at /__runespect/, the <Inspect> overlay, or the extension's DevTools tab.

Limits:

• vite build does not run the plugin unless includeInRelease is on, and a production build carries none of it. See Choose where to run it.
• Only values declared at the top of a component's script, or of a .svelte.ts module, are shown. Components from node_modules are not instrumented.

Names only: the extension on an app without the plugin #

The chip says Names only.

When a page has Svelte components but no plugin, the extension builds a tree from the page itself. Svelte adds a __svelte_meta property with the source file and line to elements in a dev build; the extension reads it (packages/extension/src/dom-walk.ts) and groups the elements by the component file that rendered them.

How to get it: install the extension and open the runespect tab in DevTools on a page served by a Svelte dev server. Nothing to change in the app.

Limits:

• No values, no editing, no highlight and no picker. Svelte's state is not reachable from the DOM.
• No Open in editor. __svelte_meta gives a path relative to the project, and the panel does not know where the project is.
• The tree is approximate. Nesting is taken from the DOM, so a component that renders markup passed as a snippet can look like the parent of what passed it. All instances of one component file are shown as one node, and a component that renders no elements of its own does not appear.
• The tree stops at 10,000 components. A component is shown under every parent that holds it, so components that all hold each other multiply. The walk stops there and ends the tree with a node named "… cut at 10000 components".
• Dev builds only. A production build has no __svelte_meta, so the extension shows nothing.
• Extension only. The panel window and the overlay come with the plugin, so they are always Live.
• The panel waits two seconds before it shows the Names only chip, so a slow page with the plugin does not flash it. A page with the plugin sets window.__runespect_tier0, and the extension's DOM walk then stays quiet.

To get values and editing, add the plugin to the app.

Capture (experimental, not released) #

The chip says Experimental, or Capture stopped with the reason.

Capture reads values from an app without the plugin by intercepting Svelte's private runtime while the app loads. The code is in this repository, with tests, but no released package or extension runs it: proxy and prod-reader are not published, and the extension does not include them.

• packages/proxy, for a dev build: redirects the compiled components' svelte/internal/client import to a wrapper that records each component and each state and derived it creates, and rebuilds the tree from that record.
• packages/prod-reader, for a production build: finds Svelte's runtime in the minified bundle by how its functions are used, wraps it the same way, and rebuilds the tree from the bundle's structure. Without a sourcemap, components keep their minified names.

Limits:

• Read-only. A captured tree offers no edits.
• Can break on any Svelte release. It depends on the private runtime, so values can be missing or misnamed. When the runtime does not have the shape capture expects, it stops and the chip says Capture stopped.

If you see the Experimental chip, the page is running one of these experiments, not the plugin.

If the chip says something else #

• Connecting…: no page has answered yet.
• No app: no page answered within two seconds. See Troubleshoot.
• Protocol mismatch: the page and the panel are different runespect versions. Rebuild or reload the extension.