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
<imgsrc="demo.gif"alt="Demo of Reactime"style="width: 55%">
13
18
</p>
14
19
15
-
A debugging tool for React. Records state whenever state is changed and allows user to jump to any previous recorded state.
20
+
Reactime is a debugging tool for React developers. It records state whenever state is changed and allows user to jump to any previous recorded state.
21
+
22
+
One important thing to note. This devtool is for React apps using only stateful components and prop drilling. If you're using Redux, Hooks, Context, or functional components, this devtool will not function on your app.
16
23
17
-
Two parts are needed for this tool to function. The chrome extension must be installed, and the NPM package must be installed and used in the React code.
24
+
Another thing is that this library does not work well when mixing React with direct DOM manipulation. Since DOM manipulation doesn't change any React state, this library cannot record or even detect that change. Of course, you should be avoiding mixing the two in the first place.
25
+
26
+
Two parts are needed for this tool to function. The <ahref="https://chrome.google.com/webstore/detail/react-time-travel/cgibknllccemdnfhfpmjhffpjfeidjga">chrome extension</a> must be installed, and the NPM package must be installed and used in the React code.
27
+
28
+
After successfully installing the chrome extension, you can test Reactime functionalities in the demo repositories below.
4. Done! That's all you have to do to link your React project to our library.
@@ -43,7 +57,7 @@ reactTimeTravel(rootContainer);
43
57
44
58
After installing both the Chrome extension and the npm package, just open up your project in the browser.
45
59
46
-
Then open up your Chrome DevTools. There'll be a new tab called reactime.
60
+
Then open up your Chrome DevTools. There'll be a new tab called Reactime.
47
61
48
62
## Features
49
63
@@ -53,13 +67,11 @@ Whenever state is changed (whenever setState is called), this extension will cre
53
67
54
68
### Viewing
55
69
56
-
You can click on a snapshot to view your app's state. State can be visualized in a JSON or a tree.
57
-
58
-
The selected snapshot can also be diffed/compared with the current dom.
70
+
You can click on a snapshot to view your app's state. State can be visualized in a JSON or a tree. Also, snapshots can be diffed with the previous snapshot, which can be viewed under the Diff tab.
59
71
60
72
### Jumping
61
73
62
-
The most important feature of all. Jumping to any previous recorded snapshot. Hitting the jump button on any snapshot will change the dom by setting their state. One important thing to note. This library does not work well when mixing React with direct DOM manipulation. Since DOM manipulation doesn't change any React state, this library cannot record or even detect that change. Of course, you should be avoiding mixing the two in the first place.
74
+
Jumping is the most important feature of all. It allows you to jump to any previous recorded snapshots. Hitting the jump button on any snapshot will change the DOM by setting their state.
63
75
64
76
### Others
65
77
@@ -70,7 +82,7 @@ Other handy features include:
70
82
- a play button to move through snapshots automatically
71
83
- a pause which button stops recording each snapshot
72
84
- a lock button to freeze the DOM in place. setState will lose all functionality while the extension is locked
73
-
- a persist button to keep snapshots upon refresh. handy when changing code and debugging
85
+
- a persist button to keep snapshots upon refresh (handy when changing code and debugging)
<imgsrc="demo2.gif"alt="Demo of Reactime"style="width: 55%">
17
+
<imgsrc="demo.gif"alt="Demo of Reactime"style="width: 55%">
14
18
</p>
15
19
16
-
A debugging tool for React. Records state whenever state is changed and allows user to jump to any previous recorded state.
20
+
Reactime is a debugging tool for React developers. It records state whenever state is changed and allows user to jump to any previous recorded state.
21
+
22
+
One important thing to note. This devtool is for React apps using only stateful components and prop drilling. If you're using Redux, Hooks, Context, or functional components, this devtool will not function on your app.
23
+
24
+
Another thing is that this library does not work well when mixing React with direct DOM manipulation. Since DOM manipulation doesn't change any React state, this library cannot record or even detect that change. Of course, you should be avoiding mixing the two in the first place.
17
25
18
26
Two parts are needed for this tool to function. The <ahref="https://chrome.google.com/webstore/detail/react-time-travel/cgibknllccemdnfhfpmjhffpjfeidjga">chrome extension</a> must be installed, and the NPM package must be installed and used in the React code.
19
27
20
28
After successfully installing the chrome extension, you can test Reactime functionalities in the demo repositories below.
@@ -63,7 +71,7 @@ You can click on a snapshot to view your app's state. State can be visualized in
63
71
64
72
### Jumping
65
73
66
-
Jumping is the most important feature of all. It allows you to jump to any previous recorded snapshots. Hitting the jump button on any snapshot will change the DOM by setting their state. One important thing to note is that this library does not work well when mixing React with direct DOM manipulation. Since DOM manipulation doesn't change any React state, this library cannot record or even detect that change. Of course, you should be avoiding mixing the two in the first place.
74
+
Jumping is the most important feature of all. It allows you to jump to any previous recorded snapshots. Hitting the jump button on any snapshot will change the DOM by setting their state.
0 commit comments