Інструменти для розробників React

Використовуйте React Developer Tools для перевірки 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 Developer Tools можна використовувати для перевірки застосунків, створених за допомогою React Native.

Найпростіший спосіб використовувати React Developer Tools - встановити його глобально:

# Yarn
yarn global add react-devtools

# Npm
npm install -g react-devtools

Далі відкрийте інструменти розробника з терміналу.

react-devtools

Має підключитися до будь-якого запущеного локального застосунку React Native.

Спробуйте перезавантажити застосунок, якщо інструменти розробника не підключаються через кілька секунд.

Дізнайтеся більше про налагодження React Native.