Инструмент разработчика Chrome для отслеживания и визуализации изменений состояния в приложении React
Введение
Разработчикам нужны надежные инструменты для отладки своих приложений. Redux DevTools обеспечивает отладку во времени, и это прекрасно, и все такое, но что, если вы используете хуки, контекстный API или обычные старые компоненты на основе классов с отслеживанием состояния? Что, если вы экспериментируете с новыми функциями, такими как Concurrent Mode и Suspense?
Что ж, мои бионические друзья, вам повезло. Вот тут и появляется Reactime.
Представляем Reactime 3.0 - будущее React
Reactime - это инструмент разработчика Chrome с открытым исходным кодом, вдохновленный Redux DevTools, который позволяет разработчикам визуально проверять состояние своего приложения в любой момент, переходить вперед или назад во времени, импортировать и экспортировать моментальный снимок своего текущего состояния, сохранять состояние через обновления, yada yada yada… вы поняли.
Настоящее волшебство происходит, когда вы вводите масштабирование. Поскольку Reactime запускает визуализатор d3 в реальном времени, который визуально увеличивает дерево, отображая все «ветви» вашего состояния, вы можете легко выяснить, где ошибка останавливает ваши процессы и как лучше всего двигаться дальше. Не говоря уже о том, что теперь он добавил поддержку экспериментальных функций React, таких как Concurrent Mode и Suspense, а также расширенную поддержку таких хуков, как useContext, useReducer, useEffect и другие, а также поддержку React Router, визуально сохраняющую изменения состояния на разных страницах. (пожалуйста, хлопайте в ладоши)
Как это работает?
Reactime 3.0 работает путем записи и кэширования снимков состояния вашего приложения и истории браузера в любой момент и построения исторического дерева на основе кеша, и позволяет разработчику «воспроизвести» все изменения состояния, которые они внесли в данный момент. ветвь, предоставляя действительно подробный взгляд на то, что происходит во время различных событий DOM. Он также предоставляет разницу между каждым снимком и фиксирует изменения в виде загружаемого JSON.
Как помогает Reactime
Сообщество React растет с каждым днем, и с новыми разработчиками появляются новые задачи, инструменты и технологии. Reactime стремится преодолеть разрыв между новыми идеями и потрясающими продуктами, особенно с появлением Concurrent React и его последствиями для дальнейшего развития процесса сборки.
Мы будем рады, если вы попробуете Reactime out - поиграйте, сломайте вещи, поставьте пиар и поделитесь с нами своим мнением! Если вам интересно, посетите наш Github и попробуйте наше расширение для Chrome.
📝 Прочтите этот рассказ позже в Журнале.
👩💻 Просыпайтесь каждое воскресное утро и слушайте самые интересные истории из области технологий, ожидающие вас в вашем почтовом ящике. Прочтите информационный бюллетень« Примечательно в технологиях .
