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

Используйте React Developer Tools для проверки React компонентов, редактирования свойств и состояния, а также для выявления проблем с производительностью.

Вы узнаете

Как установить React Developer Tools

Расширение браузера

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

Теперь, если вы посетите веб-сайт, созданный с помощью 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 также можно использовать для проверки приложений, созданных с помощью React Native.

Самый простой способ использования React Developer Tools — установить его глобально:

# Yarn
yarn global add react-devtools

# Npm
npm install -g react-devtools

Затем откройте инструменты разработчика из терминала.

react-devtools

Он должен подключиться к любому локальному приложению React Native, которое запущено.

Попробуйте перезагрузить приложение, если инструменты разработчика не подключились в течение нескольких секунд.

Узнайте больше об отладке React Native.

© 2013–present Facebook Inc.
Licensed under the Creative Commons Attribution 4.0 International Public License.
https://react.dev/learn/react-developer-tools