A time travel debugger for React's useReducer hook, designed to help engineers record and replay user sessions to fix bugs faster. Debug issues easier by “rewinding” your session instead of having to reproduce the issue until you find the bug.
- Press record and start interacting with your application
- Each dispatched action will be stored as a unique “event” in time
- Rewind through your recorded actions with back buttom
- Press play to view your changing app state
React Rewind is in active development. Please follow this repo for contribution guidelines and our development road map.
These instructions will get you a copy of the project up and running on your local machine for development and testing purposes. See deployment for notes on how to deploy the project on a live system.
Your application must be using the hook useReducer for actions to be record.
React Rewind will soon be available as a Chrome extension through the Google Chrome Web Store.
If you prefer to install locally, setup instructions are as follows:
git clone https://github.com/reactrewind/react-rewind.gitcd react-rewindnpm installnpm run buildThen head to [chrome://extensions/](chrome://extensions/)Click Load Unpacked button and upload the chrome folder, located at react-rewind/src/browser/chrome.On your application page open Chrome Developer tools and select React Rewind from the tool bar.Click Record and begin interacting with your application.
As you interact with your application actions will populate in the events panel. These actions are clickable and will change the state of your page. The actions can be viewed in more detail in the right panel by inspecting the actions, effects, and state. The time slider panel allows you to rewind, fast forward,and play through all recorded actions.
| Property | Description |
|---|---|
| Events | Dispatched actions (three ways to view see below) Shows elapsed time since last dispatch |
| Actions | Events action type and payload |
| Effects | Difference between selected event and previous state |
| State | Overall state of the application at the selected time |
Please fork this repo. We welcome pull requests. For suggestions or to report bugs please log an issue.
We use SemVer for versioning. For the versions available, see the tags on this repository.
Brandon Murphy | Victor Varaschin | Kia Colbert | Gabor Mowiena
This project is licensed under the MIT License - see the LICENSE.md file for details