11<h1 align =" center " >
22 <img src ="./assets/logos/marqueePromoTitle.png"/>
3- <br>
43 React Performance Tool
54 <br >
65 <a href =" https://osawards.com/react/ " >🏆 Nominated for React Open Source Awards 2020</a >
109<h4 align =" center " >A powerful Chrome extension that enhances React development with time-travel debugging and advanced performance monitoring</h4 >
1110<br >
1211
13- <a href =" https://chrome.google.com/webstore/detail/reactime/cgibknllccemdnfhfpmjhffpjfeidjga " >
14- <img src="https://img.shields.io/chrome-web-store/v/cgibknllccemdnfhfpmjhffpjfeidjga" alt="Chrome Web Store">
12+ <p align =" center " >
13+ <a href =" https://chrome.google.com/webstore/detail/reactime/cgibknllccemdnfhfpmjhffpjfeidjga " >
14+ <img src="https://img.shields.io/chrome-web-store/v/cgibknllccemdnfhfpmjhffpjfeidjga" alt="Chrome Web Store" />
15+ </a >
16+ <a href =" https://chrome.google.com/webstore/detail/reactime/cgibknllccemdnfhfpmjhffpjfeidjga " >
17+ <img src="https://img.shields.io/chrome-web-store/users/cgibknllccemdnfhfpmjhffpjfeidjga" alt="Chrome Web Store Users" />
18+ </a >
19+ <a href =" https://chrome.google.com/webstore/detail/reactime/cgibknllccemdnfhfpmjhffpjfeidjga " >
20+ <img src="https://img.shields.io/chrome-web-store/rating/cgibknllccemdnfhfpmjhffpjfeidjga" alt="Chrome Web Store Rating" />
1521 </a >
22+ </p >
1623
1724<h5 align =" center " >
1825<br >
@@ -117,33 +124,49 @@ Support for React Hooks and Context API
117124 </ul >
118125 <br >
119126
120- ### 🔹 Download/Upload Snapshots
127+ ### 💾 State Persistence & Sharing
121128
122- Download the recorded snapshots as a JSON file and upload them to access state trees across different sessions.
123- <br >
124- <br >
129+ Reactime makes it easy to save and share your application's state history:
130+
131+ - ** Export State History** : Save your recorded snapshots as a JSON file for later analysis or sharing
132+ - ** Import Previous Sessions** : Upload previously saved snapshots to compare state changes across different sessions
133+ - ** Cross-Session Analysis** : Compare performance and state changes between different development sessions
125134
126135<p align =" center " >
127136<img src =" ./assets/gifs/ImportExportGif_V26.gif " />
128137</p >
129-
130- ### 🔹 Connection Status
131-
132- If Reactime loses its connection to the tab you're monitoring, simply click the "reconnect" button to resume your work.
133- <br >
134138<br >
135139
136- ### 🔹 Documentation
140+ ### 📚 Interactive Documentation
137141
142+ Reactime provides comprehensive documentation to help developers understand its architecture and APIs:
138143After cloning this repository, developers can simply run ` npm run docs ` at the
139- root level and serve the dynamically generated ` /docs/index.html ` file on a
140- browser. Doing so will provide a readable, extensible, and interactive GUI view
141- of the structure and interfaces of the codebase.
142- <br >
144+ root level and serve the dynamically generated ` /docs/index.html ` provding:
145+
146+ <ul >
147+ <li >
148+ Interactive component diagrams
149+ </li >
150+ <li>
151+ Type definitions and interfaces
152+ </li >
153+ <li>
154+ Codebase architecture overview
155+ </li >
156+ <li>
157+ API references and examples
158+ </li >
159+ </ul >
160+ <br >
161+ <p align =" center " >
162+ <em >Our documentation provides a clear and intuitive view of Reactime's architecture and APIs</em >
163+ </p >
143164<br >
144165
145166### <b >Additional Features</b >
146167
168+ UPDATE THIS...
169+
147170- In-app tab-specific tutorial walkthroughs
148171- Hover over a component to view tooltip details on state visualizations
149172- Click to collapse child components
@@ -186,11 +209,15 @@ Alternatively, you can open up your Chrome DevTools and navigate to the Reactime
186209
187210<i >Please refer to Developer Install for a detailed guide:</i >
188211
189- Refer to the [ 👩💻 Developer README] ( src/DEVELOPER_README.md ) for more info on the project, and
212+ Refer to the < a href = ' ./src/DEVELOPER_README.md ' > 👩💻 Developer README</ a > for more info on the project, and
190213instructions on building from source.
191214
192215## <b >Troubleshooting</b >
193216
217+ ### ❓ <b >Why is Reactime not recording new state changes?</b >
218+
219+ If Reactime loses its connection to the tab you're monitoring, simply click the "reconnect" button to resume your work.
220+
194221### ❓ <b >Why is Reactime telling me that no React application is found?</b >
195222
196223Reactime initially runs using the dev tools global hook from the Chrome API. It
@@ -204,7 +231,7 @@ Reactime works in tandem with the React Developer Tools to access a React applic
204231### ❓ <b >I found a bug in Reactime</b >
205232
206233Reactime is an open-source project, and we'd love to hear from you about
207- improving the user experience. Please read [ DEVELOPER README ] ( src/DEVELOPER_README.md ) ,
234+ improving the user experience. Please read < a href = ' ./ src/DEVELOPER_README.md' >👩💻 Developer README</ a > ,
208235and create a pull request (or issue) to propose and collaborate on changes to Reactime.
209236
210237### ❓ <b >Node version compatibility</b >
0 commit comments