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
<br><ahref="https://osawards.com/react/">React Open Source Awards 2020</a>
7
+
<br>
8
+
<ahref="https://osawards.com/react/"> Nominated for React Open Source Awards 2020 </a>
9
+
<br>
9
10
</h1>
10
11
12
+
<h4align="center"> Reactime is a performance and debugging tool for React developers. It records a snapshot whenever a target application's state is changed and allows the user to jump to any previously recorded state. </h4>
<ahref="./README.rus.md">🇷🇺 РУССКАЯ ВЕРСИЯ</a> • <ahref="./README.fr.md">🇫🇷 VERSION FRANÇAISE</a>
34
+
<br>
35
+
</h5>
36
+
<br>
14
37
15
38
<palign="center">
16
39
<imgsrc="./assets/reactime7.gif" />
17
40
</p>
18
41
19
-
<b>Reactime</b> is a performance and debugging tool for React developers. It records a snapshot whenever a target application's state is changed and allows the user to jump to any previously recorded state.
42
+
<palign="center">
43
+
<ahref="#how-to-use">How To Use</a> • <ahref="#features">Features</a> • <ahref="https://reactime.io">Website</a> • <ahref="#readmore">Read More</a>
44
+
</p>
20
45
21
46
Currently, Reactime supports React apps using stateful components and Hooks, with beta support for Recoil and Context API.
22
47
23
48
<b>Reactime version 7.0</b> beta can help you to avoid unnecessary re-renders. Identifying wasted renders in your React applications is the perfect start to identifying most performance issues.
24
-
Reactime 7.0 fixes previous version bugs and incorporates improved visualizations for component relationships. Reactime 7.0 includes expanded [typedoc](https://typedoc.org/api/) documentation for developers looking to contribute to the source code.
49
+
Reactime 7.0 fixes previous version bugs and incorporates improved visualizations for component relationships. Reactime 7.0 includes expanded [typedoc](https://typedoc.org/api/) documentation for developers looking to contribute to the source code.
25
50
26
-
After installing Reactime, you can test its functionalities with your React application in development mode.
51
+
After installing Reactime, you can test its functionalities with your React application in development mode.
27
52
28
53
Please note, the time jumping feature will ONLY work when your application is running in development mode. In production mode, you are able to view your application’s component map but no additional features.
54
+
29
55
## <b>Installation</b>
30
56
31
-
To get started, install the Reactime [extension](https://chrome.google.com/webstore/detail/reactime/cgibknllccemdnfhfpmjhffpjfeidjga) from Chrome Web Store.
57
+
To get started, install the Reactime [extension](https://chrome.google.com/webstore/detail/reactime/cgibknllccemdnfhfpmjhffpjfeidjga) from Chrome Web Store.
32
58
33
59
NOTE: The React Developer Tools [extension](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en) is also required for Reactime to run, if you do not already have it installed on your browser.
34
60
35
61
### <b>Alternative Installation</b>
36
-
Use `src/extension/build/build.zip` for manual installation in [Developer mode](https://developer.chrome.com/extensions/faq#faq-dev-01). Turn on 'Allow access to file URLs' in extension details page if testing locally.
37
62
63
+
Use `src/extension/build/build.zip` for manual installation in [Developer mode](https://developer.chrome.com/extensions/faq#faq-dev-01). Turn on 'Allow access to file URLs' in extension details page if testing locally.
38
64
39
65
## <b>How to Use</b>
40
66
@@ -45,25 +71,30 @@ Then open up your Chrome DevTools and navigate to the Reactime panel.
45
71
## <b>Troubleshooting</b>
46
72
47
73
### <b>Why is Reactime telling me that no React application is found?</b>
74
+
48
75
Reactime initially runs using the dev tools global hook from the Chrome API. It takes time for Chrome to load this. Try refreshing your application a couple times until you see Reactime running.
49
76
50
-
### <b>There is a black screen instead of the Reactime extension</b>
51
-
Try refreshing the application you want to test and refresh the DevTools by clicking the right mouse button “Reload frame”.
77
+
### <b>There is a black screen instead of the Reactime extension</b>
78
+
79
+
Try refreshing the application you want to test and refresh the DevTools by clicking the right mouse button “Reload frame”.
52
80
53
81
### <b>I found a bug in Reactime</b>
82
+
54
83
Reactime is an open source project, and we’d really appreciate your help with improving user experience. Please, create a pull request (or issue) to propose and collaborate on changes to a repository.
55
84
56
85
## <b>Features</b>
57
86
58
87
### Re-render Optimization
59
-
One of the most common issues that affects performance in React is unnecessary render cycles. This problem can be fixed by checking your renders in the Performance tab in Chrome DevTools under the Reactime panel.
88
+
89
+
One of the most common issues that affects performance in React is unnecessary render cycles. This problem can be fixed by checking your renders in the Performance tab in Chrome DevTools under the Reactime panel.
90
+
60
91
### Recording
61
92
62
93
Whenever state is changed (whenever setState, useState is called), this extension will create a snapshot of the current state tree and record it. Each snapshot will be displayed in Chrome DevTools under the Reactime panel.
63
94
64
95
### Viewing
65
96
66
-
You can click on a snapshot to view your app's state. State can be visualized in a Component Graph, JSON Tree, or Performance Graph. Snapshots can be diffed with the previous snapshot, which can be viewed in Diff mode.
97
+
You can click on a snapshot to view your app's state. State can be visualized in a Component Graph, JSON Tree, or Performance Graph. Snapshots can be diffed with the previous snapshot, which can be viewed in Diff mode.
67
98
68
99
### Jumping
69
100
@@ -79,7 +110,7 @@ After cloning this repository, developers can simply run `npm run docs` at the r
79
110
80
111
### <b>Additional Features</b>
81
112
82
-
- identifying unnecessary re-renders
113
+
- identifying unnecessary re-renders
83
114
- hover functionality to view tooltip details on state visualizations
84
115
- ability to pan and zoom on state visualizations
85
116
- a dropdown to support development of projects on multiple tabs
@@ -91,12 +122,14 @@ After cloning this repository, developers can simply run `npm run docs` at the r
91
122
- declarative titles in the actions sidebar
92
123
93
124
## <b>Read More</b>
125
+
94
126
-[Time-Travel State with Reactime](https://medium.com/better-programming/time-traveling-state-with-reactime-6-0-53fdc3ae2a20)
95
127
-[React Fiber and Reactime](https://medium.com/@aquinojardim/react-fiber-reactime-4-0-f200f02e7fa8)
96
128
-[Meet Reactime - a time-traveling State Debugger for React](https://medium.com/@yujinkay/meet-reactime-a-time-traveling-state-debugger-for-react-24f0fce96802)
97
129
-[Deep in Weeds with Reactime, Concurrent React_fiberRoot, and Browser History Caching](https://itnext.io/deep-in-the-weeds-with-reactime-concurrent-react-fiberroot-and-browser-history-caching-7ce9d7300abb)
Copy file name to clipboardExpand all lines: src/README.md
+7-1Lines changed: 7 additions & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -60,6 +60,9 @@ src/
60
60
- Like regular web apps, Chrome Extensions are event-based. The background script is where one typically monitors for browser triggers (e.g. events like closing a tab, for example). The content script is what allows us to read or write to our target web application, usually as a result of [messages passed](https://developer.chrome.com/extensions/messaging) from the background script.
61
61
- These two files help us handle requests both from the web browser and from the Reactime extension itself
62
62
63
+
64
+
## Diagramming
65
+
All the diagrams of data flows are avaliable on [MIRO](https://miro.com/app/board/o9J_lejUqLQ=/)
63
66
## Data Flow Architecture
64
67
65
68
The general flow of data is described in the following steps:
@@ -81,18 +84,21 @@ Navigation between different console.log panels can be confusing when running Re
81
84
Console.logs from the Extension folder you can find here:
82
85
- Chrome Extension (Developer mode)
83
86
- Background page
84
-
87
+
88
+
85
89
86
90
### <b> /src/app </b>
87
91
Console.logs from the App folder you can find here:
88
92
- Chrome Browser
89
93
- Inspect
94
+
90
95
91
96
92
97
### <b> /src/backend </b>
93
98
Console.logs from the App folder you can find here:
0 commit comments