Skip to content

Commit 5f54c34

Browse files
committed
updated link and demo
1 parent 44e1d0c commit 5f54c34

1 file changed

Lines changed: 30 additions & 11 deletions

File tree

README.md

Lines changed: 30 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,7 @@ This project started with a purpose of extending the work done by [Will Chen](ht
5757

5858
A demo of the extension being used to examine the performance of React components on my website.
5959

60-
<img src="./art/Demo.gif">
60+
<img src="http://g.recordit.co/m8Yv1RTR6v.gif">
6161

6262
### Log the measures to a console
6363

@@ -323,21 +323,19 @@ registerObserver(options, callback)
323323

324324
## Description
325325

326+
### Overview section
327+
326328
<p align="center">
327-
<img src="./art/Tool.png">
329+
<img src="https://i.gyazo.com/bae8420649749a5be0a2a7e589cdbc65.png">
328330
</p>
329331

330-
**clear** - The clear button clears the measures from the tables and also wipes the results.
331-
332-
**Reload the inspected window** - This button reloads the inspected window and displays the new measures.
333-
334-
**Pending events** - This indicates the pending measures (React performance data).
335-
336-
**Table** - The table shows the time taken by a component in a phase, number of instances of a component and total time combining all the phases in **ms** and **%**.
332+
Overview section represents an overview of total time (%) taken by all the components in your application.
337333

338-
**Results**
334+
### Results section
339335

340-
<img src="https://i.gyazo.com/27a3fc562fba33a36ca7ea9568563990.png">
336+
<p align="center">
337+
<img src="https://i.gyazo.com/74a96461182539f9866db630ab645719.png">
338+
</p>
341339

342340
* Time taken by all the components - Shows the time taken by all the components (combining all the phases).
343341

@@ -349,6 +347,27 @@ registerObserver(options, callback)
349347

350348
* Total time
351349

350+
### Top section
351+
352+
<p align="center">
353+
<img src="https://i.gyazo.com/3728c55035bdcdc40b68919fe095e549.png" />
354+
</p>
355+
356+
**clear** - The clear button clears the measures from the tables and also wipes the results.
357+
358+
**Reload the inspected window** - This button reloads the inspected window and displays the new measures.
359+
360+
**Pending events** - This indicates the pending measures (React performance data).
361+
362+
363+
### Components section
364+
365+
<p align="center">
366+
<img src="https://i.gyazo.com/ac983b28ac614fb13d980ae681ffd049.png">
367+
</p>
368+
369+
This section shows the time taken by a component in a phase, number of instances of a component and total time combining all the phases in **ms** and **%**
370+
352371
## Phases
353372

354373
Given below are the different phases for which React measures the performance:

0 commit comments

Comments
 (0)