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
<ahref="#how-to-use">How To Use</a> • <ahref="#features">Features</a> • <ahref="https://reactime.io">Website</a> • <ahref="#read-more">Read More</a>
44
44
</p>
45
45
46
-
<b>Reactime 16.0</b> presents the codebase with substantial, much-needed clean-up. From the backend and frontend to testing, the Reactime XVI team has: removed vestigial code, added comments to clarify code, implemented 100% testing coverage for the codebase, compartmentalized and modularized files, and implemented typescript.
46
+
<b>Reactime 16.0</b> presents the codebase with substantial, much-needed
47
+
clean-up. From the backend and frontend to testing, the Reactime XVI team has:
coverage for the codebase, compartmentalized and modularized files, and
50
+
implemented typescript.
47
51
48
-
The primary purpose of this update is to allow easier understanding of Reactime's codebase by individuals or groups wishing to further update Reactime, keeping this great developer tool alive.
52
+
The primary purpose of this update is to allow easier understanding of
53
+
Reactime's codebase by individuals or groups wishing to further update Reactime,
54
+
keeping this great developer tool alive.
49
55
50
-
With release of Node v18.12.1(LTS) on 11/4/22, the script has been updated to 'npm run dev' || 'npm run build' for backwards compatibility.<br/>
51
-
For version Node v16.16.0, please use script 'npm run devlegacy' || 'npm run buildlegacy'
56
+
With release of Node v18.12.1(LTS) on 11/4/22, the script has been updated to
57
+
'npm run dev' || 'npm run build' for backwards compatibility.<br/> For version
58
+
Node v16.16.0, please use script 'npm run devlegacy' || 'npm run buildlegacy'
52
59
53
60
Previously, <b>Reactime 14.0 and 15.0</b> added the exciting features below:
54
61
55
-
I. React Router Compatibility <br>
56
-
Reactime is now compatible with React Router applications! Prior to Reactime 14.0, recording state snapshots as the user navigated across various routes was possible, but time travel debugging was only possible for the current route (i.e. jumping back to a prior state at a different route was not possible). In order to streamline debugging of applications with multiple routes, Reactime 14.0 added functionality that allows the user to time-travel back to different routes, including live updating in the browser to reflect the state of their application at that previously visited route.
57
-
58
-
II. Classifying State Snapshots by Route <br>
59
-
The list of state snapshots in the Reactime dashboard is now classified by route to give the developer visual cues of the snapshot-route relationship and make time travel debugging of various routes easier.
60
-
61
-
III. Filtering Performance Metrics By Route <br>
62
-
The Reactime dashboard includes a stacked bar graph showing render times for each component, with a separate bar stack for each snapshot. With Reactime 14.0, this composite bar graph can now be filtered by route to allow the developer to review detailed performance data by route.
63
-
64
-
IV. Visualize And Compare Components Within a Snapshot <br>
65
-
Users not only have access to multiple snapshots, but can now zone into a specified snapshot more granularly through a new visualization consisting of its individual components. These new graphs are rendered directly in the same Performance tab in Reactime and provide details for each component when the user hovers over, providing a new visual comparison of components across a single chosen state.
62
+
I. React Router Compatibility <br> Reactime is now compatible with React Router
63
+
applications! Prior to Reactime 14.0, recording state snapshots as the user
64
+
navigated across various routes was possible, but time travel debugging was only
65
+
possible for the current route (i.e. jumping back to a prior state at a
66
+
different route was not possible). In order to streamline debugging of
67
+
applications with multiple routes, Reactime 14.0 added functionality that allows
68
+
the user to time-travel back to different routes, including live updating in the
69
+
browser to reflect the state of their application at that previously visited
70
+
route.
71
+
72
+
II. Classifying State Snapshots by Route <br> The list of state snapshots in the
73
+
Reactime dashboard is now classified by route to give the developer visual cues
74
+
of the snapshot-route relationship and make time travel debugging of various
75
+
routes easier.
76
+
77
+
III. Filtering Performance Metrics By Route <br> The Reactime dashboard includes
78
+
a stacked bar graph showing render times for each component, with a separate bar
79
+
stack for each snapshot. With Reactime 14.0, this composite bar graph can now be
80
+
filtered by route to allow the developer to review detailed performance data by
81
+
route.
82
+
83
+
IV. Visualize And Compare Components Within a Snapshot <br> Users not only have
84
+
access to multiple snapshots, but can now zone into a specified snapshot more
85
+
granularly through a new visualization consisting of its individual components.
86
+
These new graphs are rendered directly in the same Performance tab in Reactime
87
+
and provide details for each component when the user hovers over, providing a
88
+
new visual comparison of components across a single chosen state.
66
89
67
90
<palign="center">
68
91
<imgsrc="./assets/snapshot-comparison.gif" />
69
92
70
-
After installing Reactime, you can test its functionalities with your React application in development mode.
93
+
After installing Reactime, you can test its functionalities with your React
94
+
application in development mode.
71
95
72
-
Please note, the time jumping feature will <b>ONLY</b> work when your application is running in <b>development mode</b>. In production mode, you are able to view your application’s component map but no additional features.
96
+
Please note, the time jumping feature will <b>ONLY</b> work when your
97
+
application is running in <b>development mode</b>. In production mode, you are
98
+
able to view your application’s component map but no additional features.
73
99
74
100
## <b>Installation</b>
75
101
76
-
To get started, install the Reactime [extension](https://chrome.google.com/webstore/detail/reactime/cgibknllccemdnfhfpmjhffpjfeidjga) from Chrome Web Store.
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.
is also required for Reactime to run, if you do not already have it installed on
109
+
your browser.
79
110
80
-
### Installation
111
+
### Manual Installation
81
112
82
-
Go to Chrome Extensions (make sure Chrome Extension is in Developer Mode) for manual installation in (https://developer.chrome.com/extensions/faq#faq-dev-01) and click on Load Unpacked. Use `src/extension/build/` to load this extension. Turn on 'Allow access to file URLs' in extension details page if testing locally.
113
+
Go to Chrome Extensions (make sure Chrome Extension is in Developer Mode) for
114
+
manual installation in (https://developer.chrome.com/extensions/faq#faq-dev-01)
115
+
and click on Load Unpacked. Use `src/extension/build/` to load this extension.
116
+
Turn on 'Allow access to file URLs' in extension details page if testing
117
+
locally.
83
118
84
-
<i>Please refer to Developer Install for a detailed guide:</i>
Please see [the developer README](src/README.md) for instructions on building
90
-
from source.
124
+
After you finish the Develpoer Install, checkout
125
+
[the developer README](src/README.md) for more info on the project, and
126
+
instructions on building from source.
91
127
92
128
## <b>How to Use</b>
93
129
@@ -99,26 +135,36 @@ Then open up your Chrome DevTools and navigate to the Reactime panel.
99
135
100
136
### ❓ <b>Why is Reactime telling me that no React application is found?</b>
101
137
102
-
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.
138
+
Reactime initially runs using the dev tools global hook from the Chrome API. It
139
+
takes time for Chrome to load this. Try refreshing your application a couple
140
+
times until you see Reactime running.
103
141
104
142
### ❓ <b>There is a black screen instead of the Reactime extension</b>
105
143
106
-
Try refreshing the application you want to test and refresh the DevTools by clicking the right mouse button “Reload frame”.
144
+
Try refreshing the application you want to test and refresh the DevTools by
145
+
clicking the right mouse button “Reload frame”.
107
146
108
147
### ❓ <b>I found a bug in Reactime</b>
109
148
110
-
Reactime is an open source project, and we’d really appreciate your help with improving user experience. Please read [the developer README](src/README.md), and create a pull request (or issue) to propose and collaborate on changes to a repository.
149
+
Reactime is an open source project, and we’d really appreciate your help with
150
+
improving user experience. Please read [the developer README](src/README.md),
151
+
and create a pull request (or issue) to propose and collaborate on changes to a
152
+
repository.
111
153
112
154
### ❓ <b>Node version compatiability</b>
113
155
114
-
With release of Node v18.12.1(LTS) on 11/4/22, the script has been updated to 'npm run dev' | 'npm run build' for backwards compatibility.<br/>
115
-
For version Node v16.16.0, please use script 'npm run devlegacy' | 'npm run buildlegacy'
156
+
With release of Node v18.12.1(LTS) on 11/4/22, the script has been updated to
157
+
'npm run dev' | 'npm run build' for backwards compatibility.<br/> For version
158
+
Node v16.16.0, please use script 'npm run devlegacy' | 'npm run buildlegacy'
116
159
117
160
## <b>Features</b>
118
161
119
162
### 🔹 Viewing
120
163
121
-
You can view your application's file structure and 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.
164
+
You can view your application's file structure and click on a snapshot to view
165
+
your app's state. State can be visualized in a Component Graph, JSON Tree, or
166
+
Performance Graph. Snapshots can be diffed with the previous snapshot, which can
167
+
be viewed in Diff mode.
122
168
<br>
123
169
<br>
124
170
@@ -129,7 +175,10 @@ You can view your application's file structure and click on a snapshot to view y
129
175
130
176
### 🔹 Snapshot Series and Action Comparison
131
177
132
-
You can save a series of state snapshots and use it to analyze changes in component render performance between current and previous series of snapshots. You can also name specific snapshots and compare all snapshots with the same name.
178
+
You can save a series of state snapshots and use it to analyze changes in
179
+
component render performance between current and previous series of snapshots.
180
+
You can also name specific snapshots and compare all snapshots with the same
181
+
name.
133
182
<br>
134
183
<br>
135
184
@@ -140,7 +189,10 @@ You can save a series of state snapshots and use it to analyze changes in compon
140
189
141
190
### 🔹 Components Comparison
142
191
143
-
When toggled to a specific snapshot, a visualization of the individual components of the snapshow will be displayed. This can be done under the same Performance tab where the snapshots are rendered. You will also find details of each component upon hovering.
192
+
When toggled to a specific snapshot, a visualization of the individual
193
+
components of the snapshow will be displayed. This can be done under the same
194
+
Performance tab where the snapshots are rendered. You will also find details of
195
+
each component upon hovering.
144
196
<br>
145
197
<br>
146
198
@@ -151,7 +203,9 @@ When toggled to a specific snapshot, a visualization of the individual component
151
203
152
204
### 🔹 Recording
153
205
154
-
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.
206
+
Whenever state is changed (whenever setState, useState is called), this
207
+
extension will create a snapshot of the current state tree and record it. Each
208
+
snapshot will be displayed in Chrome DevTools under the Reactime panel.
155
209
<br>
156
210
<br>
157
211
@@ -162,27 +216,40 @@ Whenever state is changed (whenever setState, useState is called), this extensio
162
216
163
217
### 🔹 Re-render Optimization
164
218
165
-
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.
219
+
One of the most common issues that affects performance in React is unnecessary
220
+
render cycles. This problem can be fixed by checking your renders in the
221
+
Performance tab in Chrome DevTools under the Reactime panel.
166
222
167
223
### 🔹 Jumping
168
224
169
-
Using the actions sidebar, a user can jump to any previous recorded snapshots. Hitting the jump button on any snapshot will allow a user to view state data at any point in the history of the target application.
225
+
Using the actions sidebar, a user can jump to any previous recorded snapshots.
226
+
Hitting the jump button on any snapshot will allow a user to view state data at
227
+
any point in the history of the target application.
170
228
171
229
### 🔹 Gatsby
172
230
173
-
Reactime offers full support for Gatsby applications. You would be able to identify unnecessary renders, duration of each rendering, travel-debugging features and visual representation of the tree components.
231
+
Reactime offers full support for Gatsby applications. You would be able to
232
+
identify unnecessary renders, duration of each rendering, travel-debugging
233
+
features and visual representation of the tree components.
174
234
175
235
### 🔹 Next.js
176
236
177
-
Reactime offers debugging and performance tools for Next.js apps: time-traveling debugging, preventing unnecessary components re-renders and making your application faster.
237
+
Reactime offers debugging and performance tools for Next.js apps: time-traveling
238
+
debugging, preventing unnecessary components re-renders and making your
239
+
application faster.
178
240
179
241
### 🔹 TypeScript Support
180
242
181
-
Reactime offers beta support for TypeScript applications using stateful class components and functional components. Further testing and development is required for custom hooks, Context API, and Concurrent Mode.
243
+
Reactime offers beta support for TypeScript applications using stateful class
244
+
components and functional components. Further testing and development is
245
+
required for custom hooks, Context API, and Concurrent Mode.
182
246
183
247
### 🔹 Documentation
184
248
185
-
After cloning this repository, developers can simply run `npm run docs` at the root level and serve the dynamically generated `/docs/index.html` file on a browser. Doing so will provide a readable, extensible, and interactive GUI view of the structure and interfaces of the codebase.
249
+
After cloning this repository, developers can simply run `npm run docs` at the
250
+
root level and serve the dynamically generated `/docs/index.html` file on a
251
+
browser. Doing so will provide a readable, extensible, and interactive GUI view
252
+
of the structure and interfaces of the codebase.
186
253
<br>
187
254
188
255
### <b>Additional Features</b>
@@ -196,7 +263,8 @@ After cloning this repository, developers can simply run `npm run docs` at the r
196
263
- A slider to move through snapshots quickly
197
264
- A play button to move through snapshots automatically
198
265
- A lock button, which stops recording each snapshot
199
-
- A persist button to keep snapshots upon refresh (handy when changing code and debugging)
266
+
- A persist button to keep snapshots upon refresh (handy when changing code and
267
+
debugging)
200
268
- Download/upload the current snapshots in memory
201
269
- Declarative titles in the actions sidebar
202
270
- Interative Tutorial Walkthrough
@@ -209,7 +277,8 @@ After cloning this repository, developers can simply run `npm run docs` at the r
209
277
### <b>Bug Fixes</b>
210
278
211
279
- Search bar now searches for specific nodes successfully
212
-
- Tab titles of chrome browser tabs not running an application in development mode are no longer affected by Reactime
280
+
- Tab titles of chrome browser tabs not running an application in development
281
+
mode are no longer affected by Reactime
213
282
- Multiple black screens fixed
214
283
- Improved UI and performance
215
284
- No longer inject scripts to non-target applications
@@ -244,7 +313,8 @@ After cloning this repository, developers can simply run `npm run docs` at the r
0 commit comments