Инструменты разработчика React

Расширение для браузера

Самый простой способ отладки сайтов, созданных с помощью React, — установить расширение для браузера «Инструменты разработчика React». Оно доступно для нескольких популярных браузеров:

• Установить для Chrome
• Установить для Firefox
• Установить для Edge

Теперь, если вы посетите сайт, созданный с помощью React, вы увидите панели «Компоненты» и «Профилировщик».

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. Все функции работают так же, как и в расширении для браузера, включая подсветку и выбор нативных элементов.

Подробнее об отладке в React Native.

Для версий React Native ниже 0.76 воспользуйтесь автономной сборкой React DevTools, следуя приведённому выше руководству для Safari и других браузеров.