You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+16-13Lines changed: 16 additions & 13 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -89,10 +89,12 @@ Reactime is an open source project, and we’d really appreciate your help with
89
89
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.
90
90
91
91
### 🔹 Gatsby
92
-
Reactime offers fully support for Gatsby applications. You would be able to identify unnecessary renders, duration of each rendering, travel-debugging features and visual representation of the tree components.
92
+
93
+
Reactime offers fully support for Gatsby applications. You would be able to identify unnecessary renders, duration of each rendering, travel-debugging features and visual representation of the tree components.
93
94
94
95
### 🔹 Next.js
95
-
Reactime offers debugging and performance tools for Next.js apps: time-traveling debugging, preventing unnecessary components re-renders and making your application faster.
96
+
97
+
Reactime offers debugging and performance tools for Next.js apps: time-traveling debugging, preventing unnecessary components re-renders and making your application faster.
96
98
97
99
### 🔹 Recording
98
100
@@ -114,23 +116,24 @@ Reactime offers beta support for TypeScript applications using stateful class co
114
116
115
117
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.
116
118
<br>
119
+
117
120
<palign="center">
118
121
<imgsrc="./assets/nextjs.gif" />
119
122
</p>
120
123
<br>
121
124
122
125
### <b>Additional Features</b>
123
126
124
-
* identifying unnecessary re-renders
125
-
* hover functionality to view tooltip details on state visualizations
126
-
* ability to pan and zoom on state visualizations
127
-
* a dropdown to support development of projects on multiple tabs
128
-
* a slider to move through snapshots quickly
129
-
* a play button to move through snapshots automatically
130
-
* a lock button, which stops recording each snapshot
131
-
* a persist button to keep snapshots upon refresh (handy when changing code and debugging)
132
-
* download/upload the current snapshots in memory
133
-
* declarative titles in the actions sidebar
127
+
- identifying unnecessary re-renders
128
+
- hover functionality to view tooltip details on state visualizations
129
+
- ability to pan and zoom on state visualizations
130
+
- a dropdown to support development of projects on multiple tabs
131
+
- a slider to move through snapshots quickly
132
+
- a play button to move through snapshots automatically
133
+
- a lock button, which stops recording each snapshot
134
+
- a persist button to keep snapshots upon refresh (handy when changing code and debugging)
135
+
- download/upload the current snapshots in memory
136
+
- declarative titles in the actions sidebar
134
137
135
138
## <b>Read More</b>
136
139
@@ -149,7 +152,7 @@ After cloning this repository, developers can simply run `npm run docs` at the r
<ahref="./README.md">🇺🇸 ENGLISH VERSION </a> • <ahref="./README.fr.md">🇫🇷 VERSION FRANÇAISE</a>
@@ -26,20 +25,19 @@
26
25
<b>Reactime</b> - расширение для дебаггинга/отладки React приложений. Оно создает снэпшоты при каждом изменении состояния (state) и позволяет пользованию прыгать на любое предыдущее состояние (state).
27
26
В настоящее время Reactime поддерживает React приложения с классовыми, функциональными компонентами, хуками и Context API.
28
27
29
-
В Reactime версии 7.0 отлажены баги предыдущих версий, улучшена визуализация данных отношений между компонентами. Также новая версия включает в себя расширенную документацию для разработчиков, которые хотят работать над приложением.
28
+
В Reactime версии 7.0 отлажены баги предыдущих версий, улучшена визуализация данных отношений между компонентами. Также новая версия включает в себя расширенную документацию для разработчиков, которые хотят работать над приложением.
30
29
31
30
После загрузки Reactime вы можете протестировать его полную функциональность на любом вашем React приложении в режиме разработки (dev mode). В продакшен режиме вы можете только работать с картой компонентов.
32
31
33
32
## <b>Установка</b>
34
33
35
-
Для начала использования приложения, скачайте Reactime [extension](https://chrome.google.com/webstore/detail/reactime/cgibknllccemdnfhfpmjhffpjfeidjga) из Chrome Web Store.
34
+
Для начала использования приложения, скачайте Reactime [extension](https://chrome.google.com/webstore/detail/reactime/cgibknllccemdnfhfpmjhffpjfeidjga) из Chrome Web Store.
36
35
37
36
Внимание: Вам понадобится React Developer Tools [extension](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en) Вам не нужно запускать React DevTools, но расширение должно быть установлено в вашем браузере.
38
37
39
-
40
38
### <b>Альтернативная установка</b>
41
-
Используйте `src/extension/build/build.zip` для мануальной установки в [Developer mode](https://developer.chrome.com/extensions/faq#faq-dev-01). Включите 'Allow access to file URLs' в разделе с расширениями.
42
39
40
+
Используйте `src/extension/build/build.zip` для мануальной установки в [Developer mode](https://developer.chrome.com/extensions/faq#faq-dev-01). Включите 'Allow access to file URLs' в разделе с расширениями.
43
41
44
42
## <b>Как использовать</b>
45
43
@@ -50,42 +48,46 @@
50
48
## <b>Устраняем проблемы</b>
51
49
52
50
### <b>Почему Reactime говорит, что приложение React не найдено?</b>
51
+
53
52
Reactime работает при использовании глобального хука DevTools, его загрузка может занимать некоторое время у Chrome браузера. Попробуйте обновить ваше приложение.
54
53
55
-
### <b>Вместо Reactime - черный экран </b>
56
-
Попробуйте обновить приложение, которые вы хотите отладить или обновите панель Reactime. Сделать это можно кликом правой кнопки “Reload the frame”.
54
+
### <b>Вместо Reactime - черный экран </b>
55
+
56
+
Попробуйте обновить приложение, которые вы хотите отладить или обновите панель Reactime. Сделать это можно кликом правой кнопки “Reload the frame”.
57
57
58
58
### <b>Я нашел ошибки при работе Reactime</b>
59
-
Reactime это open source project, поэтому мы будем рады, если вы поможете нам сделать его лучше. Если вы знаете как устранить баг - запросите pull request. Также вы можете сообщить об ошибках в разделе “Issues”.
59
+
60
+
Reactime это open source project, поэтому мы будем рады, если вы поможете нам сделать его лучше. Если вы знаете как устранить баг - запросите pull request. Также вы можете сообщить об ошибках в разделе “Issues”.
60
61
61
62
## <b>Функциональность</b>
62
63
63
64
### Оптимизация рендеринга
64
-
Одна из самых распространенных проблем, которая влияет на производительность приложения React - ненужный циклы ре-рендеринга. Эту проблему вы можете решить при помощи отслеживания рендеринга во вкладке Performance в Reactime.
65
+
66
+
Одна из самых распространенных проблем, которая влияет на производительность приложения React - ненужный циклы ре-рендеринга. Эту проблему вы можете решить при помощи отслеживания рендеринга во вкладке Performance в Reactime.
65
67
66
68
### Запись
67
69
68
70
Когда изменяется состояние (при вызове useState или setState), Reactime создает снэпшот состояния дерева в настоящий момент и записывает его. Каждый снэпшот отображается в Chrome DevTools в разделе Reactime.
69
71
70
72
### Просмотр
71
73
72
-
При клике на снапшот вы можете увидеть состояние вашего приложения. Состояния отображаются в виде графика или JSON дерева, вы можете переключить вкладку на удобную вам визуализацию.
74
+
При клике на снапшот вы можете увидеть состояние вашего приложения. Состояния отображаются в виде графика или JSON дерева, вы можете переключить вкладку на удобную вам визуализацию.
73
75
74
76
### Прыжки
75
77
76
78
Используя панель действий, вы можете совершать прыжки на предыдущие сохраненные снэпшоты. Используя данный функционал вы можете отследить работу приложения в нужный момент времени или при вводе определенных данных.
77
79
78
80
### TypeScript поддержка
79
81
80
-
Reactime beta поддерживает приложения, написанные на TypeScript, которые используют классы и функциональные компоненты. Работа с хуками, Context API и Concurrent Mode находится в стадии тестирования.
82
+
Reactime beta поддерживает приложения, написанные на TypeScript, которые используют классы и функциональные компоненты. Работа с хуками, Context API и Concurrent Mode находится в стадии тестирования.
81
83
82
84
### Документация
83
85
84
-
После клонирования репозитория, вы можете использовать команду `npm run docs` в корневой папке, которая генерирует файл в браузере `/docs/index.html`. Это упростит знакомство с приложением и поможет вам ознакомиться со структурой и интерфейсом существующего кода.
86
+
После клонирования репозитория, вы можете использовать команду `npm run docs` в корневой папке, которая генерирует файл в браузере `/docs/index.html`. Это упростит знакомство с приложением и поможет вам ознакомиться со структурой и интерфейсом существующего кода.
85
87
86
88
### <b>Дополнительный функционал</b>
87
89
88
-
- identifying unnecessary re-renders
90
+
- identifying unnecessary re-renders
89
91
- hover functionality to view tooltip details on state visualizations
90
92
- ability to pan and zoom on state visualizations
91
93
- a dropdown to support development of projects on multiple tabs
@@ -97,12 +99,14 @@ Reactime beta поддерживает приложения, написанны
97
99
- declarative titles in the actions sidebar
98
100
99
101
## <b>Узнать больше о Reactime и React Fiber</b>
102
+
100
103
-[Time-Travel State with Reactime](https://medium.com/better-programming/time-traveling-state-with-reactime-6-0-53fdc3ae2a20)
101
104
-[React Fiber and Reactime](https://medium.com/@aquinojardim/react-fiber-reactime-4-0-f200f02e7fa8)
102
105
-[Meet Reactime - a time-traveling State Debugger for React](https://medium.com/@yujinkay/meet-reactime-a-time-traveling-state-debugger-for-react-24f0fce96802)
103
106
-[Deep in Weeds with Reactime, Concurrent React_fiberRoot, and Browser History Caching](https://itnext.io/deep-in-the-weeds-with-reactime-concurrent-react-fiberroot-and-browser-history-caching-7ce9d7300abb)
0 commit comments