Инструменты разработчика React
Используйте инструменты разработчика React для проверки компонентов React, редактирования свойств и состояния, а также выявления проблем с производительностью.
Вы узнаете
- Как установить React Developer Tools
Расширение для браузера
Самый простой способ отлаживать веб-сайты, созданные с помощью React, — установить расширение React Developer Tools для браузера. Оно доступно для нескольких популярных браузеров:
Теперь, если вы посетите веб-сайт, созданный с помощью React, вы увидите панели Components и Profiler.
Safari и другие браузеры
Для других браузеров (например, Safari) установите пакет npm react-devtools:
# Yarn
yarn global add react-devtools
# Npm
npm install -g react-devtoolsЗатем откройте инструменты разработчика из терминала:
react-devtoolsПосле этого подключите свой веб-сайт, добавив следующий тег <script> в начало файла <head> вашего веб-сайта:
<html>
<head>
<script src="http://localhost:8097"></script>Теперь перезагрузите сайт в браузере, чтобы просмотреть его в инструментах разработчика.
Мобильные приложения (React Native)
Для проверки приложений, созданных с помощью React Native, можно использовать React Native DevTools — встроенный отладчик, глубоко интегрированный с React Developer Tools. Все функции работают так же, как и в расширении для браузера, включая выделение и выбор нативных элементов.
Узнайте больше об отладке в React Native.
Для версий React Native старше 0.76, пожалуйста, используйте автономную сборку React DevTools, следуя инструкциям для Safari и других браузеров выше.