You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Designed to help engineers fix bugs faster by recording and replaying through different states of their applications. Debug your app more easily by “rewinding” your session instead of having to reproduce the issue until you find the problem. <br/>
8
10
9
-
- Press record and start interacting with your application
10
-
- Each dispatched action will be stored as a unique “event” in time
11
-
- Rewind through your recorded actions with back buttom
12
-
- Press play to view your changing app state
13
11
14
12
15
-
**React Rewind is in active development. Please follow this repo for contribution guidelines and our development road map.**
13
+
- Press record and start interacting with your application.
14
+
- Each dispatched action will be stored as a unique event in time.
15
+
- Rewind through your recorded actions with the back button or by dragging the slider.
16
+
- Analyze the state, the effects and the action object of every disptached event.
**React Rewind is in active development. Follow this repo for contribution guidelines.**
16
23
## Getting Started
17
24
18
-
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.
25
+
These instructions will get you a copy of the project up and running on your local machine for development and testing purposes.
19
26
20
27
### Prerequisites
21
-
Your application must be using the hook useReducer for actions to be record.
28
+
Your application must be using the hook `useReducer` for actions to be recorded.
22
29
23
30
### Installing
24
31
React Rewind will soon be available as a Chrome extension through the Google Chrome Web Store.
25
32
26
-
If you prefer to install locally, setup instructions are as follows:
33
+
To install locally, setup instructions are as follows:
5.`Then head to [chrome://extensions/](chrome://extensions/)`
33
-
6.`Click Load Unpacked button and upload the chrome folder, located at react-rewind/src/browser/chrome.`
34
-
7.`On your application page open Chrome Developer tools and select React Rewind from the tool bar.`
35
-
8.`Click Record and begin interacting with your application.`
39
+
5. Visit the URL `chrome://extensions/`
40
+
6. Click Load Unpacked button and select the folder `react-rewind/src/browser/chrome`
41
+
7. On your application page, open the Chrome Developer tools and select `React Rewind` from the tool bar
42
+
8. Click Record and begin interacting with your application
43
+
36
44
45
+
As you interact with your application, actions will populate the events panel. Click on these actions to view more details about them, such as the action object that was dispatched, the effects or state difference, and the whole state of the application after the dispatch. The time slider panel allows you to rewind, fast forward, and play through all recorded actions.
37
46
38
-
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.
47
+
### Application Features
48
+
<palign="center">
49
+
<imgsrc ="images/effects_900w.gif"width="700" />
50
+
</p>
39
51
40
-
### The UI
41
-
|Property | Description |
52
+
| Field | Description |
42
53
| ------------- | ------------- |
43
-
| Events | Dispatched actions (three ways to view see below) <br/>Shows elapsed time since last dispatch |
44
-
|Actions | Events action type and payload |
45
-
|Effects | Difference between selected event and previous state |
46
-
|State | Overall state of the application at the selected time |
54
+
| events | action types and time since last dispatch |
55
+
| actions | the action object that was dispatched |
56
+
| effects | difference between the states before and after the action was dispatched |
57
+
| state | the state object after the action was dispatched |
58
+
47
59
## Contributing
48
60
49
61
Please fork this repo. We welcome pull requests. For suggestions or to report bugs please log an issue.
@@ -54,9 +66,9 @@ We use [SemVer](http://semver.org/) for versioning. For the versions available,
0 commit comments