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

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

Один очень полезный инструмент, который нам абсолютно необходимо установить при создании приложения React, например, приложения Next.js, - это React Developer Tools.

Доступно для обоихХромиFire Fox, инструменты разработчика React - важный инструмент, который вы можете использовать для проверки приложения React.

Они предоставляют инспектор, который показывает дерево компонентов React, которое строит вашу страницу, и для каждого компонента вы можете проверить свойства, состояние, хуки и многое другое.

После того, как вы установили React Developer Tools, вы можете открыть обычные инструменты разработчика браузера (в Chrome щелкните правой кнопкой мыши на странице, затем нажмитеInspect) и вы найдете 2 новые панели:Составные частииПрофайлер.

Если вы наведете указатель мыши на компоненты, вы увидите, что на странице браузер выберет части, которые визуализируются этим компонентом.

Если вы выберете любой компонент в дереве, правая панель покажет вам ссылку народительский компонент, и пропс передал ему:

Вы можете легко перемещаться, щелкая по названиям компонентов.

Вы можете щелкнуть значок глаза на панели инструментов разработчика, чтобы проверить элемент DOM, а также, если вы используете первый значок со значком мыши (который удобно расположен под аналогичным обычным значком DevTools), вы можете навести курсор на элемент в пользовательский интерфейс браузера, чтобы напрямую выбрать компонент React, который его отображает.

Вы можете использоватьbugзначок для записи данных компонента в консоль.

Это довольно круто, потому что после того, как вы напечатали там данные, вы можете щелкнуть правой кнопкой мыши любой элемент и нажать «Сохранить как глобальную переменную». Например, здесь я сделал это с помощьюurlprop, и я смог проверить его в консоли, используя назначенную ему временную переменную,temp1:

С помощьюИсходные карты, которые автоматически загружаются Next.js в режиме разработки, на панели Components мы можем щелкнуть<>code, и DevTools переключится на панель Source, показывая нам исходный код компонента:

ВПрофайлерtab, если возможно, еще круче. Это позволяет намзаписывать взаимодействиев приложении и посмотрите, что произойдет. Я пока не могу показать пример, потому что для создания взаимодействия требуется как минимум 2 компонента, а сейчас у нас есть только один. Об этом я расскажу позже.

Я показал все скриншоты в Chrome, но React Developer Tools работает точно так же в Firefox:

Скачать мою бесплатнуюСправочник по React


Больше руководств по реакции: