Skip to content

Latest commit

 

History

History
186 lines (142 loc) · 13.9 KB

README.rus.md

File metadata and controls

186 lines (142 loc) · 13.9 KB
Raw

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


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

GitHub Build Status npm version BabelPresetPrefs LintPrefs


🇺🇸   ENGLISH VERSION   •   🇫🇷   VERSION FRANÇAISE

Reactime 18.0 вводит ряд новых и улучшенных функций, направленных на оптимизацию производительности и улучшение совместимости. С поддержкой Next.js и Remix, увеличенной покрытия тестов (93% на бэкенде, необходимо больше на фронтенде) и структурных улучшений в кодовой базе. Кроме того, мы гордимся анонсом запуска нашего вновь переработанного веб-сайта, который служит центром для последних обновлений и информации о Reactime. Для помощи в отладке мы включили демонстрационные приложения для Next.js и Remix, что позволяет будущим итераторам тестировать и устранять ошибки с большей легкостью и эффективностью.

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

В Reactime версии 7.0 отлажены баги предыдущих версий, улучшена визуализация данных отношений между компонентами. Также новая версия включает в себя расширенную документацию для разработчиков, которые хотят работать над приложением.

После загрузки 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. Это упростит знакомство с приложением и поможет вам ознакомиться со структурой и интерфейсом существующего кода.

Дополнительный функционал

  • identifying unnecessary re-renders
  • hover functionality to view tooltip details on state visualizations
  • ability to pan and zoom on state visualizations
  • a dropdown to support development of projects on multiple tabs
  • a slider to move through snapshots quickly
  • a play button to move through snapshots automatically
  • a lock button, which stops recording each snapshot
  • a persist button to keep snapshots upon refresh (handy when changing code and debugging)
  • download/upload the current snapshots in memory
  • declarative titles in the actions sidebar

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

Авторы

License

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