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 работает при использовании глобального хука 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. Это упростит знакомство с приложением и поможет вам ознакомиться со структурой и интерфейсом существующего кода.
- 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
- Haider Ali - @hali03
- Jose Luis Sanchez - @JoseSanchez1996
- Logan Nelsen - @ljn16
- Mel Koppens - @MelKoppens
- Amy Yang - @ay7991
- Eva Ury - @evaSUry
- Jesse Guerrero - @jguerrero35
- Oliver Cho - @Oliver-Cho
- Ben Margolius - @benmarg
- Eric Yun - @ericsngyun
- James Nghiem - @jemzir
- Wilton Lee - @wiltonlee948
- David Kim - @codejunkie7
- Robby Tipton - @RobbyTipton
- Kevin HoEun Lee - @khobread
- Christopher LeBrett - @fscgolden
- Joseph Park - @joeepark
- Kris Sorensen - @kris-sorensen
- Daljit Gill - @dgill05
- Ben Michareune - @bmichare
- Dane Corpion - @danecorpion
- Harry Fox - @StackOverFlowWhereArtThou
- Nathan Richardson - @BagelEnthusiast
- David Bernstein - @dangitbobbeh
- Joseph Stern - @josephiswhere
- Dennis Lopez - @DennisLpz
- Cole Styron - @colestyron
- Ali Rahman - @CourageWolf
- Caner Demir - @demircaner
- Kevin Ngo - @kev-ngo
- 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
- Lina Shin - @rxlina
- Andy Tsou - @andytsou19
- Feiyi Wu - @FreyaWu
- Viet Nguyen - @vnguyen95
- Alex Gomez - @alexgomez9
- Edar Liu - @liuedar
- Kristina Wallen - @kristinawallen
- Quan Le - @blachfog
- Robert Maeda - @robmaeda
- Lance Ziegler - @lanceziegler
- Ngoc Zwolinski - @ngoczwolinski
- Peter Lam - @dev-plam
- Zachary Freeman - @zacharydfreeman
- Jackie Yuan - @yuanjackie1
- Jasmine Noor - @jasnoo
- Minzo Kim - @minzo-kim
- Mark Teets - @MarkTeets
- Nick Huemmer - @NickHuemmer
- James McCollough - @j-mccoll
- Mike Bednarz - @mikebednarz
- Sergei Liubchenko - @sergeylvq
- Christopher Stamper - @ctstamper
- Jimmy Phy - @jimmally
- Andrew Byun - @AndrewByun
- Kelvin Mirhan - @kelvinmirhan
This project is licensed under the MIT License - see the LICENSE file for details