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

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

Вы узнаете

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

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

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

Теперь, если вы посетите веб-сайт, созданный с 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 — установить их глобально:

# 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://18.react.dev/learn/react-developer-tools