Choose where to run it

What runespect shows depends on how the app is served. vite dev with the plugin is the baseline, and everything works there. Elsewhere, this is what you get:

What the panel can show explains the difference: Live has values, editing and history, and Names only has only an approximate tree of component names.

On a dev or test environment #

There are two ways to get values and editing on another environment.

Build runespect into the app #

Turn on includeInRelease for that environment's build:

runespect({ includeInRelease: process.env.DEPLOY_ENV === 'test' });

DEPLOY_ENV=test vite build

Open the app, then /__runespect/ in another tab of the same browser, or use the extension. With only the extension, panelInRelease: false leaves the window out of the build. Keep the slash at the end: not every host adds it. Some hosts treat a folder that starts with _ specially; GitHub Pages needs a .nojekyll file to serve it.

Anyone who can open the build can read and edit its state, so give each environment its own build, and never promote this one to production.

Run the dev server there #

vite dev --host

Vite refuses host names it does not know, so add the environment's name to server.allowedHosts. Behind a reverse proxy, the proxy has to forward WebSockets for the panel window to work. If it does not, use the extension.

Anyone who can open the app can then also open the panel and change its state, and the dev server serves them the source. Keep such an environment closed to the outside.

Component names only #

Without the plugin in the build, a development build gives Names only in the extension:

NODE_ENV=development vite build

--mode development alone is not enough, because vite build still sets NODE_ENV to production.

This build runs Svelte's development code, so it is larger and slower than the real one, and it contains your components' source paths. A production build shows nothing at all, because it carries no component information.