Skip to content

Latest commit

 

History

History
195 lines (150 loc) · 14 KB

README.rus.md

File metadata and controls

195 lines (150 loc) · 14 KB

Отладка стейтов для приложений React


Номинирован на премию
React Open Source Awards 2020

GitHub Build Status npm version BabelPresetPrefs LintPrefs


Reactime 25.0

Reactime 25.0 включает в себя новую функцию визуализации свойств и тепловую панель для разработчиков!

Мы также решили ранее сообщенные проблемы с зависанием при старте и значительно улучшили состояние библиотеки Jest, теперь большинство тестов работают корректно.

Некоторые элементы пользовательского интерфейса были перераспределены для более эстетически приятного вида и для отображения главного окна большего размера для отображения дерева компонентов в процессе.

Reactime - расширение для дебаггинга/отладки React приложений. Оно создает снэпшоты при каждом изменении состояния (state) и позволяет пользованию прыгать на любое предыдущее состояние (state).  В настоящее время Reactime поддерживает React приложения с классовыми, функциональными компонентами, хуками и Context API.

После загрузки Reactime вы можете протестировать его полную функциональность на любом вашем React приложении в режиме разработки (dev mode). В продакшен режиме вы можете только работать с картой компонентов.

Установка

Для начала использования приложения, скачайте Reactime extension из Chrome Web Store.

Внимание: Вам понадобится React Developer Tools extension Вам не нужно запускать React DevTools, но расширение должно быть установлено в вашем браузере.

Альтернативная установка

Используйте src/extension/build/build.zip для мануальной установки в Developer mode. Включите 'Allow access to file URLs' в разделе с расширениями.

Как использовать

После установки Chrome extension, просто откройте ваш проект в браузере.

Затем откройте Chrome DevTools и найдите панель Reactime.

Устраняем проблемы

Почему Reactime говорит, что приложение React не найдено?

Reactime работает при использовании глобального хука DevTools, его загрузка может занимать некоторое время у Chrome браузера. Попробуйте обновить ваше приложение.

Вместо Reactime - черный экран

Попробуйте обновить приложение, которые вы хотите отладить или обновите панель Reactime. Сделать это можно кликом правой кнопки “Reload the frame”.

Я нашел ошибки при работе Reactime

Reactime это open source project, поэтому мы будем рады, если вы поможете нам сделать его лучше. Если вы знаете как устранить баг - запросите pull request. Также вы можете сообщить об ошибках в разделе “Issues”.

Функциональность

Оптимизация рендеринга

Одна из самых распространенных проблем, которая влияет на производительность приложения React - ненужный циклы ре-рендеринга. Эту проблему вы можете решить при помощи отслеживания рендеринга во вкладке Performance в Reactime.

Запись

Когда изменяется состояние (при вызове useState или setState), Reactime создает снэпшот состояния дерева в настоящий момент и записывает его. Каждый снэпшот отображается в Chrome DevTools в разделе Reactime.

Просмотр

При клике на снапшот вы можете увидеть состояние вашего приложения. Состояния отображаются в виде графика или JSON дерева, вы можете переключить вкладку на удобную вам визуализацию.

Прыжки

Используя панель действий, вы можете совершать прыжки на предыдущие сохраненные снэпшоты. Используя данный функционал вы можете отследить работу приложения в нужный момент времени или при вводе определенных данных.

TypeScript поддержка

Reactime beta поддерживает приложения, написанные на TypeScript, которые используют классы и функциональные компоненты. Работа с хуками, Context API и Concurrent Mode находится в стадии тестирования.

Документация

После клонирования репозитория, вы можете использовать команду npm run docs в корневой папке, которая генерирует файл в браузере /docs/index.html. Это упростит знакомство с приложением и поможет вам ознакомиться со структурой и интерфейсом существующего кода.

Узнать больше о Reactime и React Fiber

Авторы

License

This project is licensed under the MIT License - see the LICENSE file for details