Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 872cc45

Browse files
updated new features of README
1 parent e4d3a6f commit 872cc45

File tree

1 file changed

+66
-83
lines changed

1 file changed

+66
-83
lines changed

‎README.md

Lines changed: 66 additions & 83 deletions
Original file line numberDiff line numberDiff line change
@@ -36,77 +36,42 @@
3636

3737
### 🔍 State Visualization
3838

39-
<ul>
40-
<li>
41-
<strong>Multiple Views</strong>: Visualize your application state through Component Graphs, JSON Trees, Performance Graphs, and Accessibility Trees
42-
</li>
43-
<li>
44-
<strong>History Timeline</strong>: Track state changes over time with an intuitive history visualization
45-
</li>
46-
<li>
47-
<strong>Web Metrics</strong>: Monitor critical performance metrics in real-time
48-
</li>
49-
<li>
50-
<strong>Accessibility Insights</strong>: Analyze your app's accessibility tree for each state change
51-
</li>
52-
</ul>
39+
- **SMultiple Views**: Visualize your application state through Component Graphs, JSON Trees, Performance Graphs, and Accessibility Trees
40+
- **SHistory Timeline**: Track state changes over time with an intuitive history visualization
41+
- **SWeb Metrics**: Monitor critical performance metrics in real-time
42+
- **SAccessibility Insights**: Analyze your app's accessibility tree for each state change
5343
<br>
5444

5545
<p>On the main page, there are two main selections from the dropdown panel:</p>
56-
<ul>
57-
<li>
58-
<strong>Timejump</strong>: View and navigate through the snapshot history of your application's state. You can jump to any point in time to see how the state evolves across changes. You can also use the play button to replay each state change automatically.
59-
</li>
60-
<li>
61-
<strong>Providers / Consumers</strong>: Understand your application's context dependencies and their interactions better through visualizing its provider and consumer relationships.
62-
</li>
63-
</ul>
64-
<br>
6546

66-
<p align="center">
47+
- **STimejump**: View and navigate through the snapshot history of your application's state. You can jump to any point in time to see how the state evolves across changes. You can also use the play button to replay each state change automatically.
48+
- **SProviders / Consumers**: Understand your application's context dependencies and their interactions better through visualizing its provider and consumer relationships.
49+
<br>
50+
51+
<p align="center">
6752
<img src="./assets/gifs/ProviderConsumer_V26.gif" />
6853
</p>
6954
<br>
7055

7156
### ⏱️ Time-Travel Debugging
7257

73-
<ul>
74-
<li>
75-
<strong>State Snapshots</strong>: Capture and navigate through your application's state history
76-
</li>
77-
<li>
78-
<strong>Playback Controls</strong>: Automatically replay state changes with adjustable speed
79-
</li>
80-
<li>
81-
<strong>Jump Points</strong>: Instantly navigate to any previous state
82-
</li>
83-
<li>
84-
<strong>Diff Comparisons</strong>: Compare states between snapshots
85-
</li>
86-
</ul>
58+
- **State Snapshots**: Capture and navigate through your application's state history
59+
- **Playback Controls**: Automatically replay state changes with adjustable speed
60+
- **Jump Points**: Instantly navigate to any previous state
61+
- **Diff Comparisons**: Compare states between snapshots
8762
<br>
8863

89-
<p align="center">
64+
<p align="center">
9065
<img src="./assets/gifs/TimeTravelGif_V26.gif" />
9166
</p>
9267
<br>
9368

9469
### 📊 Performance Analysis
9570

96-
<ul>
97-
<li>
98-
<strong>Component Metrics</strong>: Track render times and performance bottlenecks
99-
</li>
100-
<li>
101-
<strong>Series Comparison</strong>: Compare performance across different sets of state changes
102-
</li>
103-
<li>
104-
<strong>Re-render Detection</strong>: Identify and fix unnecessary render cycles
105-
</li>
106-
<li>
107-
<strong>Web Vitals</strong>: Monitor Core Web Vitals and other performance metrics
108-
</li>
109-
</ul>
71+
- **Component Metrics**: Track render times and performance bottlenecks
72+
- **Series Comparison**: Compare performance across different sets of state changes
73+
- **Re-render Detection**: Identify and fix unnecessary render cycles
74+
- **Web Vitals**: Monitor Core Web Vitals and other performance metrics
11075
<br>
11176

11277
### 🔄 Modern Framework Support
@@ -131,6 +96,7 @@ Reactime makes it easy to save and share your application's state history:
13196
- **Export State History**: Save your recorded snapshots as a JSON file for later analysis or sharing
13297
- **Import Previous Sessions**: Upload previously saved snapshots to compare state changes across different sessions
13398
- **Cross-Session Analysis**: Compare performance and state changes between different development sessions
99+
<br>
134100

135101
<p align="center">
136102
<img src="./assets/gifs/ImportExportGif_V26.gif" />
@@ -158,52 +124,69 @@ API references and examples
158124
</li>
159125
</ul>
160126
<br>
161-
<p align="center">
162-
<em>Our documentation provides a clear and intuitive view of Reactime's architecture and APIs</em>
163-
</p>
164-
<br>
165127

166-
### <b>Additional Features</b>
128+
<h1>🎉 What's New!</h1>
167129

168-
UPDATE THIS...
130+
Reactime 26.0 brings a complete overhaul to the React debugging experience, featuring:
169131

170-
- In-app tab-specific tutorial walkthroughs
171-
- Hover over a component to view tooltip details on state visualizations
172-
- Click to collapse child components
173-
- Intuitive navigation between state snapshots
174-
- Locked/unlocked feature allowing temporary pause of state monitoring
175-
- Prop visualization both in color and tickness of the branches of connecting the components
132+
- **New Context Data Display**
176133

177-
<h1>What's New!</h1>
134+
- First-ever visualization of useContext hook state changes
135+
- Clear mapping of provider-consumer relationships
136+
- Real-time context state value monitoring
137+
- Detailed provider data visualization
178138

179-
Reactime 26.0 includes....
139+
-**Enhanced Time Travel Debugging**
180140

181-
If you would like to read more about previous releases, click <a href="https://github.com/open-source-labs/reactime/releases">here!</a>
141+
- Redesigned slider interface positioned alongside snapshots
142+
- Variable playback speed controls
143+
- More intuitive state navigation
144+
- Improved snapshot visualization
182145

183-
<p align="center">
146+
- **Modern UI Overhaul**
147+
148+
- Sleek, contemporary design with rounded components
149+
- Intuitive layout improvements
150+
- New dark mode support
151+
- Enhanced visual hierarchy
152+
153+
- **Major Technical Improvements**
154+
- Fixed connection persistence during idle time and tab switches
155+
- Restored accessibility tree visualization
156+
- Resolved state capture issues for function-based useState hooks
157+
- Improved overall extension reliability and performance
158+
159+
These updates make Reactime more powerful, reliable, and user-friendly than ever before, setting a new standard for React debugging tools.
160+
161+
If you would like to read more about previous releases, click <a href="https://github.com/open-source-labs/reactime/releases">here!</a>
184162

185163
<h1>🚀 Getting Started</h1>
186164

187-
To get started, install the Reactime
188-
[extension](https://chrome.google.com/webstore/detail/reactime/cgibknllccemdnfhfpmjhffpjfeidjga)
189-
from Chrome Web Store.
165+
### Installation
166+
167+
1. Install the [Reactime extension](https://chrome.google.com/webstore/detail/reactime/cgibknllccemdnfhfpmjhffpjfeidjga) from the Chrome Web Store
168+
2. Install the required [React Developer Tools](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en) extension if you haven't already
169+
170+
### Prerequisites
190171

191-
After installing Reactime, you can test its functionalities with your React application in development mode.
172+
- Your React application must be running in **development mode**
173+
- React Developer Tools extension must be installed
174+
- Chrome browser (version 80 or higher recommended)
192175

193-
Please note, Reactime will <b>ONLY</b> work when your application is running in <b>development mode</b>.
176+
### Launch Reactime
194177

195-
NOTE: The React Developer Tools
196-
[extension](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en)
197-
is also required for Reactime to run, if you do not already have it installed on
198-
your browser.
178+
There are two ways to open the Reactime panel:
199179

200-
### <b>How to Use</b>
180+
1.**Context Menu**
201181

202-
After installing the Chrome extension, just open up your project in the browser.
182+
- Right-click anywhere on your React application
183+
- Select "Reactime" from the context menu
203184

204-
Then right click on your application and choose the 'Reactime' context menu item to open up a Reactime panel.
185+
2. **DevTools**
186+
- Open Chrome DevTools (F12 or ⌘+⌥+I)
187+
- Navigate to the "Reactime" tab
205188

206-
Alternatively, you can open up your Chrome DevTools and navigate to the Reactime panel.
189+
Once launched, Reactime will automatically begin monitoring your application's state changes and performance metrics.
207190

208191
### Looking to contribute to Reactime?
209192

@@ -216,7 +199,7 @@ instructions on building from source.
216199

217200
### ❓ <b>Why is Reactime not recording new state changes?</b>
218201

219-
If Reactime loses its connection to the tab you're monitoring, simply click the "reconnect" button to resume your work.
202+
Reactime lost its connection to the tab you're monitoring, simply click the "reconnect" button to resume your work.
220203

221204
### ❓ <b>Why is Reactime telling me that no React application is found?</b>
222205

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /