Skip to content

Commit 95c8cc2

Browse files
committed
added gifs to dev readme
> > Co-authored-by: Nkmai <[email protected]> Co-authored-by: lind-tania <[email protected]> Co-authored-by: rtviner <[email protected]> Co-authored-by: caitlinchan23 <[email protected]>
1 parent 0c29edf commit 95c8cc2

File tree

5 files changed

+11
-11
lines changed

5 files changed

+11
-11
lines changed

README.md

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -70,47 +70,47 @@ Then open up your Chrome DevTools and navigate to the Reactime panel.
7070

7171
## <b>Troubleshooting</b>
7272

73-
### <b>Why is Reactime telling me that no React application is found?</b>
73+
### <b>Why is Reactime telling me that no React application is found?</b>
7474

7575
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.
7676

77-
### <b>There is a black screen instead of the Reactime extension</b>
77+
### <b>There is a black screen instead of the Reactime extension</b>
7878

7979
Try refreshing the application you want to test and refresh the DevTools by clicking the right mouse button “Reload frame”.
8080

81-
### <b>I found a bug in Reactime</b>
81+
### <b>I found a bug in Reactime</b>
8282

8383
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.
8484

8585
## <b>Features</b>
8686

87-
### Re-render Optimization
87+
### 🔹 Re-render Optimization
8888

8989
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.
9090

91-
### Gatsby
91+
### 🔹 Gatsby
9292
Reactime offers fully support for Gatsy applications. You would be able to identify unnecessary renders, duration of each rendering, travel-debugging features and visual representation of the tree components.
9393

94-
### Next.js
94+
### 🔹 Next.js
9595
Reactime offers debugging and performance tools for Next.js apps: time-traveling debugging, preventing unnecessary components re-renders and making your application faster.
9696

97-
### Recording
97+
### 🔹 Recording
9898

9999
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.
100100

101-
### Viewing
101+
### 🔹 Viewing
102102

103103
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.
104104

105-
### Jumping
105+
### 🔹 Jumping
106106

107107
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.
108108

109-
### TypeScript Support
109+
### 🔹 TypeScript Support
110110

111111
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.
112112

113-
### Documentation
113+
### 🔹 Documentation
114114

115115
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.
116116
<br>

assets/.nextjs.gif.icloud

-160 Bytes
Binary file not shown.

assets/extension-console.gif

2.47 MB
Loading

assets/nextjs.gif

17.6 MB
Loading

assets/reactime-console.gif

6.16 MB
Loading

0 commit comments

Comments
 (0)