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 работает при использовании глобального хука DevTools, его загрузка может занимать некоторое время у Chrome браузера. Попробуйте обновить ваше приложение.
Попробуйте обновить приложение, которые вы хотите отладить или обновите панель Reactime. Сделать это можно кликом правой кнопки “Reload the frame”.
Reactime это open source project, поэтому мы будем рады, если вы поможете нам сделать его лучше. Если вы знаете как устранить баг - запросите pull request. Также вы можете сообщить об ошибках в разделе “Issues”.
Одна из самых распространенных проблем, которая влияет на производительность приложения React - ненужный циклы ре-рендеринга. Эту проблему вы можете решить при помощи отслеживания рендеринга во вкладке Performance в Reactime.
Когда изменяется состояние (при вызове useState или setState), Reactime создает снэпшот состояния дерева в настоящий момент и записывает его. Каждый снэпшот отображается в Chrome DevTools в разделе Reactime.
При клике на снапшот вы можете увидеть состояние вашего приложения. Состояния отображаются в виде графика или JSON дерева, вы можете переключить вкладку на удобную вам визуализацию.
Используя панель действий, вы можете совершать прыжки на предыдущие сохраненные снэпшоты. Используя данный функционал вы можете отследить работу приложения в нужный момент времени или при вводе определенных данных.
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
- Time-Travel State with Reactime
- React Fiber and Reactime
- Meet Reactime - a time-traveling State Debugger for React
- Deep in Weeds with Reactime, Concurrent React_fiberRoot, and Browser History Caching
- Becca Viner - @rtviner
- Caitlin Chan - @caitlinchan23
- Kim Mai Nguyen - @Nkmai
- Tania Lind - @lind-tania
- Alex Landeros - @AlexanderLanderos
- Chris Guizzetti - @guizzettic
- Jason Victor - @theqwertypusher
- Sanjay Lavingia - @sanjaylavingia
- Vincent Nguyen - @VNguyenCode
- Haejin Jo - @haejinjo
- Hien Nguyen - @hienqn
- Jack Crish - @JackC27
- Kevin Fey - @kevinfey
- Carlos Perez - @crperezt
- Edwin Menendez - @edwinjmenendez
- Gabriela Jardim Aquino - @aquinojardim
- Greg Panciera - @gpanciera
- Nathanael Wa Mwenze - @nmwenz90
- Ryan Dang - @rydang
- Bryan Lee - @mylee1995
- Josh Kim - @joshua0308
- Sierra Swaby - @starkspark
- Ruth Anam - @peachiecodes
- David Chai - @davidchaidev
- Yujin Kang - @yujinkay
- Andy Wong - @andywongdev
- Chris Flannery - @chriswillsflannery
- Rajeeb Banstola - @rajeebthegreat
- Prasanna Malla - @prasmalla
- Rocky Lin - @rocky9413
- Abaas Khorrami - @dubalol
- Ergi Shehu - @Ergi516
- Raymond Kwan - @rkwn
- Joshua Howard - @Joshua-Howard
This project is licensed under the MIT License - see the LICENSE file for details