Отладка приложений React с помощью React DevTools
Почему вы должны отлаживать приложения React?
Отладка - один из самых полезных навыков, которым может обладать разработчик. Она позволяет быстро и эффективно ориентироваться и находить ошибки в коде. В современном вебе это возможно благодаря использованию различных инструментов и техник.
React - одна из самых быстроразвивающихся front-end библиотек. Она позволяет легко создавать сложные и интерактивные пользовательские интерфейсы. Как и другие библиотеки и фреймворки, она имеет набор инструментов для отладки, называемый React development tools.
Что такое React DevTools?
Инструменты разработки React (React DevTools) - это расширение браузера, доступное для Chrome, Firefox и как отдельное приложение, которое позволяет вам осматривать иерархию компонентов React в инструментах разработчика Chrome. Оно предоставляет дополнительный набор специфических для React виджетов для осмотра, чтобы помочь при разработке. С момента своего создания команда разработчиков выпустила множество релизов.
В этом материале я продемонстрирую несколько способов использования его возможностей для улучшения отладки приложений React с его помощью.
Как установить React DevTools
React DevTools доступен в виде расширения для Chrome и Firefox. Если вы уже установили расширение, оно должно обновиться автоматически. Если вы используете автономную оболочку (например, в React Native или Safari), вы можете установить новую версию из NPM:
npm install -g react-devtools@^4
React DevTools улучшение производительности
DevTools предлагает значительный прирост производительности и улучшенную навигацию. Некоторые аспекты были изменены, чтобы сделать его удобным для использования в более крупных приложениях.
Фильтрация компонентов с помощью React DevTools
В предыдущих версиях DevTools навигация по большим спискам компонентов была немного утомительной. Но теперь DevTools предоставляет возможность фильтровать компоненты, чтобы скрыть те, которые вас не интересуют.
Чтобы получить доступ к этой функции, давайте отфильтруем три компонента.
Чтобы отфильтровать компонент и сосредоточиться на интересующем нас компоненте, нажмите на значок настройки под вкладкой компонентов. Перед вами появится всплывающее окно. Перейдите на вкладку компонентов и выберите предпочтительный вариант сортировки.
После того как мы отфильтровали компоненты, они становятся скрытыми по умолчанию, но после отключения фильтра становятся видимыми. Эта функция пригодится, если вы работаете над проектом с большим количеством компонентов, и быстрая сортировка становится реальной необходимостью. Еще интереснее то, что настройки фильтра запоминаются между рабочими сессиями.
Встроенные props в React DevTools ушли в прошлое
Чтобы облегчить просмотр больших деревьев компонентов и ускорить работу DevTools, компоненты в дереве больше не отображают встроенные props.
Чтобы увидеть эту функцию в действии, достаточно выбрать компонент, и все его props, state и hooks будут отображены в правой части консоли.
В нашем примере приложения мы передаем реквизиты только компоненту contacts. Щелкнув на нем, вы увидите значение prop, переданного ему, а щелкнув на других компонентах, вы увидите, что props им не передавались.
Хотя эта функция может быть не так полезна для небольших React-проектов, она пригодится при работе с большими React-проектами.
Отладка неожиданных значений prop и элементов компонентов
Рассмотрим следующий класс React:
import ABC from 'abc';
import XYZ from 'xyz';
class Main extends Component {
constructor(props) {
super(props);
this.state = { name : "John" }
}
render() {
const { name } = this.state;
return (
<ABC>
<XYZ name={name} />
</ABC>
)
}
}ABC является родителем XYZ, но Main является владельцем компонента, а только владельцы могут отправлять props вниз.
В React Dev вы можете быстро отладить неожиданное значение prop, пропуская родителей. В DevTools v4 добавлен список rendered by в правой панели, который позволяет быстро просмотреть список владельцев, чтобы ускорить процесс отладки.
Щелкнув на любом из компонентов в нашем приложении, мы можем увидеть компоненты, которые их отобразили. Это очень полезно при попытке отследить происхождение определенного prop.
Она также поставляется с обратной функцией, называемой owners tree. Это список того, что рендерится конкретным компонентом - того, чем он "владеет". Это представление похоже на просмотр источника метода рендеринга компонента и может быть полезным способом изучения больших, незнакомых приложений React.
Чтобы использовать эту функцию для отладки приложения, дважды щелкните компонент для просмотра дерева владельцев и нажмите кнопку "x", чтобы вернуться к полному дереву компонентов. Вы также можете перемещаться по дереву, чтобы увидеть все дочерние элементы компонента.
Визуальные улучшения в React DevTools
Представление компонентов с отступом
В предыдущих версиях React DevTools для просмотра глубоко вложенных компонентов требовалась вертикальная и горизонтальная прокрутка, что затрудняло отслеживание больших деревьев компонентов. Теперь DevTools динамически регулирует отступы во вложенных компонентах для устранения горизонтальной прокрутки.
Чтобы использовать эту функцию в нашем приложении, перейдите на вкладку компонентов, затем нажмите на любой компонент, и все его дочерние компоненты автоматически появятся под ним с автоматическим отступом от следующего компонента.
Улучшенный поиск
Ранее, при поиске в DevTools, результатом часто было отфильтрованное дерево компонентов, показывающее совпадающие узлы в качестве корней, т.е. другие компоненты были скрыты, а совпадение поиска теперь отображалось как корневые элементы.
Сейчас можно легко искать по своим компонентам с отображением результатов в строке, подобно поиску в браузере.
Функциональные улучшения в React DevTools
Улучшенная поддержка хуков
Проекты React на основе хуков можно отлаживать быстрее и лучше, они имеют такой же уровень поддержки, как props и state.
Восстановление выбора между перезагрузками
Во время отладки при нажатии кнопки перезагрузки DevTools пытается восстановить последний выбранный элемент.
Допустим, мы сортировали компонент Persons в нашем примере приложения до того, как произошло обновление страницы, DevTools возобновит работу с автоматически выбранным компонентом Persons.
Переключение режима ожидания
API Suspense в React позволяет компонентам "ждать" или делать "что-то" перед рендерингом. Компоненты <Suspense> можно использовать для определения состояния загрузки, когда компоненты, расположенные глубже в дереве, ожидают рендеринга.
DevTools позволяет тестировать эти состояния загрузки с помощью этого переключателя:
Изменения в профайлере в React DevTools
Перезагрузка и профиль
Профилировщик - это мощный инструмент для настройки производительности компонентов React. Legacy DevTools поддерживал профилирование, но только после обнаружения подходящей версии React, поддерживающей профилирование. Из-за этого не было возможности профилировать начальный mount (одна из наиболее чувствительных к производительности частей) приложения.
Сейчас уже эта функция поддерживается с помощью действия "перезагрузить и профилировать":
Список рендеров компонентов
Профилировщик отображает список всех случаев рендеринга выбранного компонента во время сеанса профилирования, а также продолжительность каждого рендеринга. Этот список можно использовать для быстрого перехода между коммитами при анализе производительности конкретных компонентов.
Для нашего примера приложения мы видим, что некоторые компоненты отображаются дважды в течение секции, теперь у нас есть направление для отладки, которое может потенциально улучшить производительность.
Заключение
В этом руководстве мы рассказали об отладке приложений React с помощью DevTools. Мы также рассмотрели, как они облегчают отладку вашего кода. Если у вас есть вопросы или дополнения, обязательно оставьте комментарий. Удачи!