|
| 1 | + |
| 2 | + |
| 3 | +# React Rewind : A Time Travel Debugger for React |
| 4 | +[](https://github.com/reactrewind/react-rewind/pulls) [](https://opensource.org/licenses/MIT)<br/> |
| 5 | +A time travel debugger for React's useReducer hook, designed to help engineers record and replay user sessions to fix bugs faster. |
| 6 | +Debug issues easier by “rewinding” your session instead of having to reproduce the issue until you find the bug. |
| 7 | + |
| 8 | +- Press record and start interacting with your application |
| 9 | +- Each dispatched action will be stored as a unique “event” in time |
| 10 | +- Rewind through your recorded actions with back buttom |
| 11 | +- Press play to view your changing app state |
| 12 | + |
| 13 | + |
| 14 | + **React Rewind is in active development. Please follow this repo for contribution guidelines and our development road map.** |
| 15 | +## Getting Started |
| 16 | + |
| 17 | +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. |
| 18 | + |
| 19 | +### Prerequisites |
| 20 | +Your application must be using the hook useReducer for actions to be record. |
| 21 | + |
| 22 | +### Installing |
| 23 | +React Rewind is available as a Chrome extension through the Google Chrome Web Store. |
| 24 | +On your application page open Chrome Developer tools and select React Rewind from the tool bar. |
| 25 | +Click `Record` and begin interacting with your application. |
| 26 | + |
| 27 | +If you prefer to install locally, setup instructions are as follows: |
| 28 | +``` |
| 29 | +git clone https://github.com/reactrewind/react-rewind.git |
| 30 | +cd reactrewind |
| 31 | +npm install |
| 32 | +npm run rewind |
| 33 | +``` |
| 34 | + |
| 35 | +Then head to [chrome://extensions/](chrome://extensions/)<br/> |
| 36 | +Click `Load Unpacked` button and upload the chrome folder, located at react-rewind/src/browser/chrome.<br/> |
| 37 | +On your application page open Chrome Developer tools and select React Rewind from the tool bar. <br/> |
| 38 | +Click `Record` and begin interacting with your application. |
| 39 | + |
| 40 | + |
| 41 | +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. |
| 42 | + |
| 43 | +### The UI |
| 44 | +|Property | Description | |
| 45 | +| ------------- | ------------- | |
| 46 | +| Events | Dispatched actions (three ways to view see below) <br/>Shows elapsed time since last dispatch | |
| 47 | +|Actions | Events action type and payload | |
| 48 | +|Effects | Difference between selected event and previous state | |
| 49 | +|State | Overall state of the application at the selected time | |
| 50 | +## Contributing |
| 51 | + |
| 52 | +Please fork this repo. We welcome pull requests. For suggestions or to report bugs please log an issue. |
| 53 | + |
| 54 | +## Versioning |
| 55 | + |
| 56 | +We use [SemVer](http://semver.org/) for versioning. For the versions available, see the [tags on this repository](https://github.com/your/project/tags). |
| 57 | + |
| 58 | +## Authors |
| 59 | + |
| 60 | +[Brandon Murphy](https://github.com/murphybrandon) | [Victor Varaschin](https://github.com/victorvrv) | [Kia Colbert](https://github.com/kiacolbert) | [Gabor Mowiena](https://github.com/GaberMowiena) |
| 61 | + |
| 62 | +## License |
| 63 | + |
| 64 | +This project is licensed under the MIT License - see the [LICENSE.md](./LICENSE) file for details |
| 65 | + |
0 commit comments