DevTools DEV BUILD

A WildflowerJS panel in your browser's developer tools. Inspect components, stores, pools, bindings, routes, events, and per-frame reactivity in a running app, with no configuration and no code changes.

Install once, works everywhere. Open your browser's DevTools on any page running WildflowerJS and a WildflowerJS tab appears alongside Elements and Console. There is nothing to add to your app, no plugin to register, and no build flag to set.

Installing

Chrome, Edge, Brave

Install from the Chrome Web Store. The extension works in any Chromium browser that accepts Web Store extensions.

Chrome Web Store

Firefox

The extension supports Firefox 109+ and an AMO listing is pending. Until then, load it unpacked from the repository via about:debugging.

Load unpacked

Requirements

The framework exposes a DevTools hook that the extension reads. That hook is development-only: production builds strip it entirely so there is zero runtime overhead in shipped apps.

Requirement	Detail
Framework version	WildflowerJS 1.1 or later. The Timeline panel needs 1.2 or later.
Build type	A development build: any `.js` distribution file. The minified `.min.js` builds strip the hook.
Delivery	CDN and npm builds both work, as long as the file is a dev build.

If you open the panel against a production build, it tells you so rather than appearing broken: panels that need the stripped hooks explain that the page is running a minified build and name the version they found.

<!-- Development: hook present, DevTools works -->
<script src="https://cdn.jsdelivr.net/npm/wildflowerjs@1/dist/wildflower.full.dev.js"></script>

<!-- Production: hook stripped, zero overhead -->
<script src="https://cdn.jsdelivr.net/npm/wildflowerjs@1/dist/wildflower.full.min.js"></script>

The panels

Panel	What it shows
Components	The mounted component tree, with each component's state, computed values, and props. State is editable in place.
Stores	Every registered store with its state and methods.
Pools	`data-pool` entities and their per-entity state, for high-frequency and animation workloads.
Bindings	The active `data-*` bindings on the page and what each one reads. Useful when a binding is not updating and you need to confirm what it is actually watching.
Routes	The current route, the route tree, and navigation guards.
Events	A live, filterable activity log: component mounts and teardowns, state changes with the exact keys that changed, store updates, and route changes, each timestamped.
Timeline	A per-frame record of reactive flush activity: how many effects drained each frame and how long the render sweep took, so you can see where frame time goes. Requires 1.2+.

Working from the Console

The `$wf` shortcut

Selecting a component in the Components panel sets $wf in the Console to that component's context, the same object this refers to inside its methods. Read state, call methods, and assign to properties; assignments go through the reactive system exactly as they would in your code, so the DOM updates.

$wf.count            // read state
$wf.count = 10       // write state — the DOM updates
$wf.increment()      // call a method
$wf.fullName         // read a computed property

With no component selected, $wf is the framework object itself.

`wildflower.inspect()`

A console helper that needs no extension. Called with no arguments it prints an application summary and returns { components, stores }. Called with a component name it lists every instance of that component with its element and state, and returns the instances array.

wildflower.inspect()              // full application summary
wildflower.inspect('kpi-widget')  // every instance of one component

Panel controls

Element picker. Click an element on the page to jump to its owning component in the Components panel.
Refresh. Re-read application state. The panel polls, but a manual refresh is available after large changes.
Theme toggle. Light and dark, independent of your DevTools theme.

Privacy

The extension reads application state through the browser's standard DevTools inspection API and renders it locally in the panel. It collects nothing, sends nothing to any server, and makes no network requests of its own. Closing DevTools discards the data.

Permissions used are chrome.devtools.inspectedWindow and chrome.devtools.panels, both scoped to the tab you are inspecting. Full detail in the privacy policy.

Troubleshooting

Symptom	Cause
No WildflowerJS tab in DevTools	The page is not running WildflowerJS, or the extension needs DevTools reopened after install. Close and reopen DevTools.
Panel says a development build is required	The page is running a `.min.js` build, which strips the hook. Switch to the matching `.js` dev build in development.
Timeline is empty	Timeline needs WildflowerJS 1.2 or later. The panel reports the version it found.
Components panel is empty on a page you know uses the framework	Components initialise on the first animation frame. In a background tab that frame never runs, so nothing has mounted yet. Focus the tab and refresh the panel.

Related: Error Codes for the WF-coded diagnostics development builds emit, and Testing for driving components from a test rather than by hand.