|
36 | 36 |
|
37 | 37 | ### 🔍 State Visualization |
38 | 38 |
|
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 |
| 39 | +- **Multiple Views**: Visualize your application state through Component Graphs, JSON Trees, Performance Graphs, and Accessibility Trees |
| 40 | +- **History Timeline**: Track state changes over time with an intuitive history visualization |
| 41 | +- **Web Metrics**: Monitor critical performance metrics in real-time |
| 42 | +- **Accessibility Insights**: Analyze your app's accessibility tree for each state change |
43 | 43 | <br> |
44 | 44 |
|
45 | 45 | <p>On the main page, there are two main selections from the dropdown panel:</p> |
46 | 46 |
|
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. |
| 47 | +- **Timejump**: 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 | +- **Providers / Consumers**: Understand your application's context dependencies and their interactions better through visualizing its provider and consumer relationships. |
49 | 49 | <br> |
50 | 50 |
|
51 | 51 | <p align="center"> |
|
73 | 73 | - **Re-render Detection**: Identify and fix unnecessary render cycles |
74 | 74 | - **Web Vitals**: Monitor Core Web Vitals and other performance metrics |
75 | 75 | <br> |
| 76 | + <br> |
76 | 77 |
|
77 | 78 | ### 🔄 Modern Framework Support |
78 | 79 |
|
@@ -159,6 +160,7 @@ Reactime 26.0 brings a complete overhaul to the React debugging experience, feat |
159 | 160 | These updates make Reactime more powerful, reliable, and user-friendly than ever before, setting a new standard for React debugging tools. |
160 | 161 |
|
161 | 162 | If you would like to read more about previous releases, click <a href="https://github.com/open-source-labs/reactime/releases">here!</a> |
| 163 | +<br> |
162 | 164 |
|
163 | 165 | <h1>🚀 Getting Started</h1> |
164 | 166 |
|
@@ -187,15 +189,28 @@ There are two ways to open the Reactime panel: |
187 | 189 | - Navigate to the "Reactime" tab |
188 | 190 |
|
189 | 191 | Once launched, Reactime will automatically begin monitoring your application's state changes and performance metrics. |
| 192 | +<br> |
| 193 | + |
| 194 | +<h1>🤝 Contributing to Reactime</h1> |
190 | 195 |
|
191 | | -### Looking to contribute to Reactime? |
| 196 | +We welcome contributions from developers of all skill levels! Here's how you can help make Reactime even better: |
192 | 197 |
|
193 | | -<i>Please refer to Developer Install for a detailed guide:</i> |
| 198 | +1.**Get Started** |
194 | 199 |
|
195 | | -Refer to the <a href='./src/DEVELOPER_README.md'>👩💻 Developer README</a> for more info on the project, and |
196 | | -instructions on building from source. |
| 200 | + - Fork the repository |
| 201 | + - Review our comprehensive <a href='./src/DEVELOPER_README.md'>👩💻 Developer README</a> |
| 202 | + - Set up your local development environment |
| 203 | + |
| 204 | +2. **Build Process** |
| 205 | + |
| 206 | + - Follow our build instructions in the <a href='./src/DEVELOPER_README.md'>👩💻 Developer README</a> |
| 207 | + - Test your changes thoroughly |
| 208 | + - Submit a pull request |
| 209 | + |
| 210 | +Join our growing community of contributors and help shape the future of React debugging tools! For detailed contribution guidelines and project architecture information, please refer to our <a href='./src/DEVELOPER_README.md'>👩💻 Developer Documentation</a>. |
| 211 | +<br> |
197 | 212 |
|
198 | | -## <b>Troubleshooting</b> |
| 213 | +<h1>🛠️ Troubleshooting</h1> |
199 | 214 |
|
200 | 215 | ### ❓ <b>Why is Reactime not recording new state changes?</b> |
201 | 216 |
|
|
0 commit comments