Media
4 items
Description
Free registered-store inspector and timeline for Zustand, plus Pro Trace Sessions: deep diffs, call-sites, shareable traces. Find which state change caused a bug in your Zustand app, then keep the debugging trace together for review or handoff. TRY A REAL BUG FIRST Open the ready-made cart demo after installing the extension: https://kubaopoczka.github.io/zustand-devtools-site/try-zustand.html It contains two real Zustand stores and an intentional discount bug. Add a lamp, apply the discount, then inspect the action that produced the wrong total. The sample uses fictional data and needs no account or app setup. FREE AND PRO Stores and Timeline are free. Three complete Trace Sessions are included. Pro unlocks continued recording for a one-time base price of EUR 9.99 plus applicable tax. WHAT YOU CAN DO • Inspect every store registered through zustand-devtools-bridge. • Follow named actions across registered stores in one searchable timeline. • Time-travel using the original in-memory state, preserving Dates, Maps, Sets and action functions. Replay requires that original state to remain available. • Record a Trace Session while reproducing a bug. Inspect changed paths and best-effort source call-sites, compare two moments, and add notes. • Export a redacted trace for another developer to import and inspect. Imported sessions are view-only. • Use the experimental Component Hooks view for a quick look at React hook values. Those values are not guaranteed to come from Zustand. • Match your Chrome DevTools light or dark theme. USE IT IN YOUR OWN APP Install zustand-devtools-bridge and wrap your store creator with withDevtoolsBridge, giving the store a name. Enable the bridge only in development. Reload your app, open Chrome DevTools, and select the Zustand tab. Setup instructions: https://github.com/KubaOpoczka/zustand-devtools#install PRIVACY AND PERMISSIONS Application state and traces are processed locally. There is no analytics or telemetry. The only outbound network requests are optional Gumroad purchase-verification calls after disclosure and consent. Those calls contain the licence key, this product's public ID and a use-count flag; never application state, traces, inspected URLs or source paths. The storage permission keeps recent sessions, the preview counter and a validated licence record locally. Page scripts install a compatibility hook so the panel can inspect registered stores and React components. Component inspection runs when DevTools opens the Zustand panel. Apps that opt into the bridge can keep bounded, redacted action history; disable the bridge in production. SUPPORT https://github.com/KubaOpoczka/zustand-devtools/issues