Skip to content

Latest commit

 

History

History
366 lines (296 loc) · 24.5 KB

README.rus.md

File metadata and controls

366 lines (296 loc) · 24.5 KB

Инструмент для анализа производительности React
🏆 Номинант на React Open Source Awards 2020

Мощное расширение Chrome, которое улучшает процесс разработки React за счёт отладки с путешествиями во времени и углублённого мониторинга производительности


Chrome Web Store Chrome Web Store Users Chrome Web Store Rating


🇺🇸   ENGLISH VERSION   •   🇫🇷   VERSION FRANÇAISE   •   🇮🇩   VERSI BAHASA INDONESIA   •   👩‍💻 Руководство для разработчиков

✨ Ключевые особенности

🔍 Визуализация состояния

  • Разнообразные представления: Отображение состояния приложения в виде графов компонентов, JSON-деревьев, графиков производительности и деревьев доступности
  • История изменений: Отслеживайте изменения состояния во времени с удобной визуализацией истории
  • Метрики веб-приложения: Отслеживайте важные метрики производительности в реальном времени
  • Аналитика доступности: Анализируйте дерево доступности вашего приложения на каждом этапе изменения состояния

На главном экране доступны два основных выбора из выпадающего списка:

  • Timejump: Просматривайте и перемещайтесь по истории снимков состояния (snapshot) вашего приложения. Можно переместиться в любую точку во времени, чтобы увидеть, как состояние эволюционировало при изменениях. Также доступна кнопка воспроизведения, чтобы автоматически проиграть каждое изменение состояния.
  • Providers / Consumers: Глубже понимайте зависимости контекста приложения и его взаимодействия, визуализируя отношения провайдеров и потребителей.


⏱️ Отладка с путешествиями во времени

  • Снимки состояния: Фиксируйте и перемещайтесь по истории состояния приложения
  • Элементы управления воспроизведением: Автоматически воспроизводите изменения состояния с регулировкой скорости
  • Точки мгновенного перехода: Мгновенно возвращайтесь к любому предыдущему состоянию
  • Сравнение состояний: Сравнивайте разницу между снимками состояния


📊 Анализ производительности

  • Метрики компонентов: Отслеживайте время рендера и узкие места в производительности
  • Сравнение серий: Сопоставляйте производительность при разных наборах изменений состояния
  • Определение перерисовок: Находите и исправляйте избыточные циклы рендера
  • Web Vitals: Следите за Core Web Vitals и другими метриками

🔄 Поддержка современных фреймворков

  • Полная совместимость с Gatsby, Next.js и Remix
  • Поддержка TypeScript для классовых и функциональных компонентов
  • Поддержка React Hooks и Context API

💾 Сохранение и обмен состоянием

Reactime упрощает сохранение и обмен историей состояния вашего приложения:

  • Экспорт истории: Сохраняйте записанные снимки в JSON-файл для дальнейшего анализа или передачи
  • Импорт предыдущих сессий: Загружайте ранее сохранённые снимки, чтобы сравнивать изменения состояния между разными сессиями
  • Межсессионный анализ: Сопоставляйте производительность и изменения состояния между разными этапами разработки


📚 Интерактивная документация

Reactime предлагает обширную документацию, помогающую разработчикам разобраться в архитектуре и API инструмента. После клонирования репозитория достаточно запустить npm run docs в корневой директории, а затем открыть сгенерированный файл /docs/index.html, в котором представлены:

  • Интерактивные диаграммы компонентов
  • Типы и интерфейсы
  • Обзор архитектуры кодовой базы
  • API-справочник и примеры

🎉 Что нового!

Версия Reactime 26.0 предлагает полное обновление инструмента отладки React, включая:

  • Новый показ данных контекста

    • Первая в своём роде визуализация состояния, основанного на хуке useContext
    • Чёткое отображение отношений «провайдер – потребитель»
    • Мониторинг значений контекста в реальном времени
    • Подробная визуализация данных провайдеров

  • Улучшенная отладка с путешествиями во времени

    • Переработанный интерфейс слайдера, размещённого вместе со снимками
    • Элементы управления скоростью воспроизведения
    • Более интуитивная навигация по состояниям
    • Улучшенная визуализация снимков

  • Современный переработанный интерфейс

    • Стильный, современный дизайн со скруглёнными элементами
    • Интуитивная структура расположения элементов
    • Новый тёмный режим
    • Улучшенная визуальная иерархия

  • Крупные технические улучшения

    • Исправлена проблема с сохранением соединения при бездействии или переключении вкладок
    • Восстановлена визуализация дерева доступности (Accessibility Tree)
    • Исправлены проблемы с захватом состояния для хуков useState в функциональных компонентах
    • Общий рост стабильности и производительности расширения

Благодаря этим обновлениям Reactime стал ещё более мощным, надёжным и удобным в использовании, устанавливая новый стандарт среди инструментов отладки React.

Чтобы узнать больше о предыдущих релизах, перейдите по ссылке.

🚀 Начало работы

Установка

  1. Установите Reactime из Интернет-магазина Chrome
  2. Установите необходимое расширение React Developer Tools, если у вас его ещё нет

Предварительные требования

  • Ваше React-приложение должно работать в режиме разработки (development)
  • Расширение React Developer Tools должно быть установлено
  • Браузер Chrome (рекомендуется версия 80 или выше)

Запуск Reactime

Существует два способа открыть панель Reactime:

  1. Контекстное меню

    • Кликните правой кнопкой мыши в любом месте вашего React-приложения
    • Выберите «Reactime» в контекстном меню

  2. Инструменты разработчика

    • Откройте Chrome DevTools (F12 или ⌘+⌥+I)
    • Перейдите на вкладку «Reactime»

После запуска Reactime автоматически начнёт отслеживать изменения состояния и метрики производительности вашего приложения.

🤝 Участие в развитии Reactime

Мы приглашаем всех желающих внести свой вклад в улучшение Reactime! Вот как вы можете помочь: 🙋 Contributing README

  1. Начальный шаг

    • Сделайте форк репозитория
    • Изучите наше подробное Руководство для разработчиков (Developer README)
    • Настройте локальную среду разработки

  2. Процесс сборки

    • Следуйте инструкциям по сборке в Руководстве для разработчиков
    • Тщательно протестируйте свои изменения
    • Создайте пул-реквест

Присоединяйтесь к нашему растущему сообществу контрибьюторов и помогите формировать будущее инструментов отладки React! Подробные инструкции по участию и архитектуре проекта вы найдёте в 👩‍💻 Руководстве для разработчиков.

🛠️ Устранение неполадок

❓ Почему Reactime не записывает новые изменения состояния?

Reactime потерял соединение с вкладкой, за которой ведётся наблюдение. Просто нажмите кнопку «reconnect», чтобы возобновить работу.

❓ Почему Reactime не может найти мои хуки?

Reactime обнаруживает и отслеживает хуки, просматривая «неминифицированный» код React в режиме разработки. Если ваш процесс сборки минифицирует или «уродует» (uglify) код — даже в режиме разработки — Reactime может не найти и не отследить ваши хуки. Чтобы исправить это:

  1. Убедитесь, что сборка действительно предназначена для разработки: Проверьте настройки вашего бандлера или инструмента сборки (например, Webpack, Babel, Vite и т. д.), чтобы приложение не было минимизировано и «уродовано» в режиме разработки.
    • Например, в Webpack установите mode: 'development', чтобы по умолчанию отключить минификацию.
    • В Create React App, достаточно запустить npm start или yarn start, чтобы автоматически настроить неминифицированную сборку.
  2. Проверьте, нет ли переопределений: Убедитесь, что нет дополнительных Babel- или Webpack-плагинов, которые минифицируют ваш код, особенно если вы используете фреймворки вроде Next.js или Gatsby. Иногда дополнительные плагины или скрипты могут незаметно запускать минификацию.
  3. Перезапустите и пересоберите: После изменения настроек сборки перезапустите или пересоберите ваше приложение, чтобы новые настройки были применены. Затем обновите вкладку браузера, чтобы Reactime мог обнаружить ваши неминифицированные хуки.

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

Reactime изначально запускается, используя глобальный хук dev tools из API Chrome. Чтобы Chrome успел это загрузить, может потребоваться время. Попробуйте обновить (refresh) ваше приложение несколько раз, пока не увидите, что Reactime заработал.

❓ Почему мне нужно включать React Dev Tools?

Reactime работает в связке с React Developer Tools, чтобы получить доступ к дереву Fiber в React-приложении. Внутри Reactime просматривает дерево Fiber через глобальный хук из React Developer Tools, получая всю необходимую информацию для отображения разработчику.

❓ Я нашёл(ла) баг в Reactime

Reactime — это проект с открытым исходным кодом. Мы будем рады услышать ваши идеи по улучшению пользовательского опыта. Ознакомьтесь с 👩‍💻 Руководством для разработчиков и создайте пул-реквест (или Issue), чтобы предложить и совместно доработать изменения в Reactime.

❓ Совместимость с версиями Node

С выходом Node v18.12.1 (LTS) от 04.11.22 в скриптах появились команды
npm run dev | npm run build для обратной совместимости.
Для версии Node v16.16.0 используйте скрипты npm run devlegacy | npm run buildlegacy

✍️ Авторы

⚖️ Лицензия

Этот проект распространяется по лицензии MIT — подробности см. в файле LICENSE.