Zustand DevTools

Free registered-store inspector and timeline for Zustand, plus Pro Trace Sessions: deep diffs, call-sites, shareable traces.

A dedicated Zustand panel for Chrome DevTools. Register a store with one line of the zustand-devtools-bridge package for an accurate live Stores view, a free cross-store Timeline, and time-travel that never corrupts your state. An experimental zero-setup Component Hooks view is included for quick looks (its values are not guaranteed to come from Zustand). The Pro Trace Sessions workflow records a bug reproduction with deep path-level diffs and source call-sites, and exports a debugging session your teammate can inspect without reproducing the bug. FEATURES • Stores (free) — an accurate live view of every store registered through the one-line zustand-devtools-bridge package, with stable identities across hot reloads. • Timeline (free) — a named action history across all registered stores, with search and SAFE time-travel: the original in-memory state is restored by ID, so Dates, Maps, Sets and your action functions survive. Lossy copies are never restored. • Component Hooks (experimental, free) — a zero-setup view of hook values found in React components. Honestly labelled: values are not guaranteed to come from Zustand. • Trace Sessions (Pro, three full previews included) — record while reproducing a bug: deep path-level diffs (cart.items[3].quantity), best-effort source call-sites you can click to open in Sources, filters, comparison of any two moments, bookmarks/notes, and export/import of a redacted, versioned debugging session (view-only, validated). • Matches your DevTools theme — light or dark, automatically. HOW TO USE 1. Add the bridge to a store (one line): create(withDevtoolsBridge(creator, { name: 'cart' })). 2. Open Chrome DevTools (F12) and click the "Zustand" tab — Stores and Timeline are live. 3. Press Start Trace, reproduce your bug, press Stop — inspect diffs and call-sites, compare any two moments, export the session. Three full preview sessions are free; Pro unlocks unlimited ones. 4. No store registered yet? The experimental Component Hooks tab shows React hook values with zero setup (not guaranteed to be Zustand state). PRIVACY This extension processes component state locally so it can display it in your own open DevTools panel. That state is not sent off your device, and there is no analytics or telemetry. The only outbound network requests are Gumroad purchase-verification calls after an explicit disclosure and consent. They contain the licence key, this product's public ID, and a use-count flag. State, traces, inspected URLs and source paths are never sent. PERMISSIONS • "storage" — keeps your recent Trace Sessions, the free-preview counter, and your validated license record locally (saved sessions are view-only). • Access to page content — needed to detect a React/Zustand renderer and read component state, but only becomes active once you've opened DevTools and switched to the Zustand panel for that tab; otherwise it does nothing on that page. SUPPORT Found a bug or have a suggestion? Open an issue at the project's GitHub repository. Local-first by design: state, traces and exports stay on your machine; imported trace files are validated and opened view-only.