Hi there and welcome to ZusTime, a Chrome developer tool that can be used with any Zustand application! ZusTime was designed and built with love by four engineers passionate about solving difficult problems and streamlining the debugging process for Zustand developers.
With ZusTime you can inspect your Zustand store and application by stepping both forward and backwards in your code, allowing you to visualize snapshots of state at various points in time. This type of debugging tool limits the need for countless console logs and prevents you from having to run your application over and over again, helping you find those pesky, difficult to reproduce bugs quickly before your application gets to production.
ZusTime also allows the ability to view your React components through the use of our visual component hierarchy tree, making it easier for you to understand and navigate complex React applications.
As of now, ZusTime has not yet been added to the Chrome Extension store, but it is still quick and easy to setup. Please follow the steps below to get started:
npm run build
.chrome://extensions/
, and make sure the "Developer mode" toggle in the top-right corner is siwtched to on.chrome-extension
on your local machine.export default <your store name>;
add this line of code (window as any).store = <your store name>;
. This gives ZusTime the ability to capture snapshots of state when changes to your store are made.deveopment mode ONLY
and removing it before production.version 16 or higher
.<div>
or <span>
so please add components to your app by simply using <ComponentName />
.And that's it! You can now run your application in development mode and utilize ZusTime's time travel debugging and component hierarchy tree visulization features!
Once you have your application running in a Chrome browser, open the developer tools by right clicking on the screen and choosing inspect
, or you can simply press F12
on your keyboard. Among the panels you should find one with the title "ZusTime" and a really cute icon.
When a change to state is made within your Zustand application, a snapshot of your store is captured and a Jump to State button will appear within the ZusTime panel. Whenever your want to "time travel" simply click one of the Jump to State buttons and your application will be reverted to a previous instance of state. In addition, you will be able to view the current state of your Zustand store on the right hand side of the buttons. Pretty neat, huh?
To view your component tree, simply click the Component Tree tab at the top of the tool and you will immediately see your React components rendered in an interactive tree visualizer thanks to the help of D3.js. Here you are able to toggle the view of parent and children components by simply clicking on each node. Our tree currently utilizes React Fiber to traverse your application's nodes to display parent components and its children. This feature is only compatible with React 16 and above.
We created ZusTime with the intention of further expanding upon and improveing this tool for years to come.
That's where the help of our amazing community comes in! If you have an idea that might make ZusTime better we always encourage contributions. Simply follow the steps below to submit the changes you would make.
git clone <code link from ZusTime fork>
git checkout -b <yourFeatureName>
git add .
git commit -m "<your comment>"
git merge dev
git push origin <your feature branch name>
If you love ZusTime please throw a 🌟 our way!
ZusTime is developed under the MIT license.