I built a time-travel debugger for Zustand — and it caught three bugs I'd already shipped
If you use Zustand, you've had this moment: the UI is wrong, you know a store changed when it shouldn't have, and now you're scattering console.log calls and refreshing, trying to catch the one action that did it. State debugging is detective work — and Zustand, by design, is so minimal that it doesn't give you much to work with. I wanted to see it instead. So I built Zustand DevTools : a Chrome…
In the world of Zustand, developers have often faced a common conundrum: how to effectively debug and track state changes within an application. The minimalistic nature of Zustand, while appealing, lacks built-in tools to provide a clear view of state alterations and the corresponding actions that triggered them. To address this issue, I created Zustand DevTools, a Chrome DevTools panel that records every state change in a user's app and allows them to navigate through these changes in a time-travel-like manner.
Zustand DevTools offers two primary features: Stores + Timeline (free) and Trace Sessions (Pro). The Stores + Timeline feature provides a live view of each registered store, displaying every set() operation with a timeline entry, including the action name and the path-level difference. By clicking on any entry, developers can easily time-travel to that specific moment in their app's state history.
Meanwhile, the Trace Sessions feature enables users to record their debugging process, allowing them to inspect the recording later by comparing paths, call-sites, and exporting a redacted session for sharing with teammates.
To implement Zustand DevTools, I introduced one wrapper per store to be inspected, using the create function from Zustand and integrating with the zustand-devtools-bridge. By registering the store with a stable name, developers gain a consistent and accurate live view of their app's state. The zero-setup experimental view, which reads hooks directly, serves as a quick inspection alternative but may not always accurately differentiate Zustand state from other hooks.
A few essential design decisions fueled the creation of Zustand DevTools. Firstly, the DevTools hook chains instead of replacing it, ensuring compatibility with other debugging tools like React DevTools. Secondly, I prioritized state privacy by ensuring that state never leaves the user's machine, with data flowing from the inspected page to the panel without involving any servers, analytics, or telemetry. This design choice aims to protect sensitive user data and maintain the integrity of the debugging process.
While developing Zustand DevTools, I conducted 96 automated tests across two major framework versions to ensure the tool's reliability and prevent any potential issues that could hinder the debugging process. Additionally, I took great care in writing clear and concise documentation, including a dedicated review pass over my own code, which uncovered three silent failures missed by the automated tests. These improvements solidified my confidence in the tool's ability to effectively catch bugs.
To try out Zustand DevTools, users can install the Stores + Timeline tools from the Chrome Web Store and integrate the zustand-devtools-bridge into their application. The Pro version offers unlimited Trace Sessions for a one-time purchase, with three free previews available, no subscription, and up to five devices supported. For feedback and suggestions, I encourage developers to share their experiences and thoughts on the tool's limitations.
Written by urgent.news from Dev.to's reporting — not their text. Machine-written — may contain errors; check the original before relying on it.
