Reactime 20.0
Reactime 20.0 включает в себя несколько ключевых улучшений для повышения производительности и устранения существующих ошибок, а также переработанный пользовательский интерфейс для обеспечения совместимости с WCAG.
Мы исправили несколько постоянных ошибок, в том числе серьезную проблему, которая приводила к сбою приложения, использующих Reactime, при использовании функций входа или отправки. Мы продолжили внедрять TypeScript в кодовую базу и создали новые тесты с библиотекой тестирования React. Мы также сделали тестирование более надежным, улучшив существующие тесты и исправив неработающие тесты. Наконец, мы обновили Reactime, удалив некоторый устаревший код и пакеты, уменьшив количество ошибок компиляции.
Мы обновили взаимодействие с пользователем, в соответствие с требованиями Руководства по доступности веб-контента (WCAG). В частности, мы улучшили размер и дизайн целевых элементов в Reactime и тщательно выбрали новые цветовые контрасты.
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
- 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
This project is licensed under the MIT License - see the LICENSE file for details