{"id":14987514,"url":"https://github.com/oslabs-beta/zustime","last_synced_at":"2025-10-05T12:16:47.184Z","repository":{"id":65072731,"uuid":"574693292","full_name":"oslabs-beta/ZusTime","owner":"oslabs-beta","description":"Zustand's first dedicated time travel debugger.","archived":false,"fork":false,"pushed_at":"2023-01-05T19:18:25.000Z","size":15786,"stargazers_count":87,"open_issues_count":0,"forks_count":6,"subscribers_count":4,"default_branch":"main","last_synced_at":"2025-04-12T00:15:11.595Z","etag":null,"topics":["chrome-api","chrome-devtools","chrome-extension","component-architecture","d3","debugging-tool","devtools","javascript","react-fiber","reactjs","state-management","time-travel-debugger","typescript","visualizer","zustand"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/oslabs-beta.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-12-05T21:51:29.000Z","updated_at":"2025-03-26T01:06:14.000Z","dependencies_parsed_at":"2023-02-04T11:32:08.457Z","dependency_job_id":null,"html_url":"https://github.com/oslabs-beta/ZusTime","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oslabs-beta%2FZusTime","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oslabs-beta%2FZusTime/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oslabs-beta%2FZusTime/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oslabs-beta%2FZusTime/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/oslabs-beta","download_url":"https://codeload.github.com/oslabs-beta/ZusTime/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248497818,"owners_count":21113984,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["chrome-api","chrome-devtools","chrome-extension","component-architecture","d3","debugging-tool","devtools","javascript","react-fiber","reactjs","state-management","time-travel-debugger","typescript","visualizer","zustand"],"created_at":"2024-09-24T14:14:51.687Z","updated_at":"2025-10-05T12:16:47.109Z","avatar_url":"https://github.com/oslabs-beta.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n    \u003cimg src=\"src/zustime-banner.gif\" alt=\"zustand banner gif\" width=\"100%\"/\u003e\n    \u003ch1\u003eWelcome to ZusTime\u003c/h1\u003e\n    \u003ch2\u003eZustand's first dedicated time travel debugging tool!\u003c/h2\u003e\n\u003c/div\u003e\n\n## Overview\nHi 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.\n\nWith 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.\n\nZusTime 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. \n\n## Getting Started\n### Adding ZusTime as a Chrome developer tool\nAs of now, ZusTime has not yet been added to the Chrome Extension store, but it is still quick and easy to setup. \nPlease follow the steps below to get started:\n1. Clone this repo to your local machine.\n2. Open a terminal, navigate to the root directory and run ``` npm run build ```.\n3. Open Google Chrome, navigate to `chrome://extensions/`, and make sure the **\"Developer mode\"** toggle in the top-right corner is siwtched to **on**.\n4. Click the **\"Load unpacked\"** button in the top-left and select the directory `chrome-extension` on your local machine.\n5. Congrats! ZusTime will now show up in your Chrome developer tools!\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"src/load_unpack.gif\" alt=\"load unpacking gif\" /\u003e\n\u003c/p\u003e\n\n### Making ZusTime compatible with your application\n1. Within your Zustand application, navigate to the file that contains your **store**.\n2. Above `export default \u003cyour store name\u003e;` add this line of code `(window as any).store = \u003cyour store name\u003e;`. This gives ZusTime the ability to capture snapshots of state when changes to your store are made.\n3. Adding this line of code allows ZusTime to access your Zustand store via the global window object. This is safe in development mode when you are working on debugging, but would be cosidered a security risk once you launch your application to production. For this reason we highly recommend adding that necessary line of code in `deveopment mode ONLY` and removing it before production.\n4. The time travel debugging feature will work with any Zustand Application, however the component hierarchy tree utilizes React Fiber and will only render a tree when **React version 16 or higher** is being used. If you would like to take advantage of the component tree visualizer, please upgrade React to at least `version 16 or higher`.\n5. In addition, the component tree will not render your React components if they are nested within a `\u003cdiv\u003e` or `\u003cspan\u003e` so please add components to your app by simply using `\u003cComponentName /\u003e`.\n\nAnd 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!\n\n## Time Travel Debugging with A State Tracker and Visualizer\nOnce 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.\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"/src/open_devtool.gif\" alt=\"opening the devtools gif\" /\u003e\n\u003c/p\u003e\n\nWhen 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?\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"src/timetravel.gif\" alt=\"time travel debugger gif\" /\u003e\n\u003c/p\u003e\n\n## React Component Hierarchy Tree Visualizer\nTo 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.\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"src/tree.gif\" alt=\"load unpacking gif\" /\u003e\n\u003c/p\u003e\n\n## Contribute\nWe created ZusTime with the intention of further expanding upon and improveing this tool for years to come.\n\nThat'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.\n\n- Fork this ZusTime repo\n- Clone the repository to your local machine with the command `git clone \u003ccode link from ZusTime fork\u003e`\n- Create your own Feature Branch with the command `git checkout -b \u003cyourFeatureName\u003e`\n- Add your changes with the command `git add .`\n- Stage and commit your changes with the command `git commit -m \"\u003cyour comment\u003e\"`\n- Merge your branch with the dev branch locally with the command `git merge dev`\n- Resolve any merge conflicts\n- Push up your branch with the command `git push origin \u003cyour feature branch name\u003e`\n- Open a pull request\n- A member of our team will then review any pull requests and merge them to the main branch if appropriate\n\n## Meet the ZusTime Team\n- Kelsey Graner • [LinkedIn](https://www.linkedin.com/in/kelseygraner/) • [Github](https://github.com/kels-graner)\n- Jackqueline Nguyen • [LinkedIn](https://www.linkedin.com/in/jackquelinenguyen/) • [Github](https://github.com/jackquelinenguyen)\n- Samantha Warrick • [LinkedIn](https://www.linkedin.com/in/samantha-warrick/) • [Github](https://github.com/samanthawarrick)\n- Sylvia Thong • [LinkedIn](https://www.linkedin.com/in/sylviathong/) • [Github](https://github.com/sylvia45335)\n\n## Support\nIf you love ZusTime please throw a :star2: our way! \n\n## License\nZusTime is developed under the [MIT license](https://github.com/open-source-labs/ZusTime/LICENSE).\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Foslabs-beta%2Fzustime","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Foslabs-beta%2Fzustime","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Foslabs-beta%2Fzustime/lists"}