React Academy · Урок

Установка и открытие React DevTools

Настройте React DevTools в Chrome или Firefox и изучите панель компонентов

«Установка и открытие React DevTools» — бесплатный урок React Academy на CoddyKit. Это урок 1 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения React Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс React Academy содержит 4 уроков всего.

Добро пожаловать

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

Что такое React DevTools?

React DevTools — это расширение для браузера, которое добавляет две новые панели в DevTools Chrome/Firefox: **Компоненты** (для просмотра дерева) и **Профилировщик** (для измерения производительности). Оно работает с любым приложением React в режиме разработки.

Установка расширения

Перейдите в Интернет-магазин Chrome (или в дополнения Firefox) и выполните поиск по запросу **React Developer Tools**. Нажмите **Добавить в Chrome** (или Firefox). Значок React на панели инструментов будет подсвечиваться на страницах, использующих React.

Открытие DevTools

Нажмите **F12** (или Cmd+Option+I на Mac), чтобы открыть DevTools браузера. Рядом с вкладками «Элементы» и «Консоль» Вы увидите новые вкладки **Компоненты** и **Профилировщик**.

Панель компонентов

На вкладке «Компоненты» отображается полное дерево компонентов React текущей страницы. Вы можете нажать на любой компонент, чтобы просмотреть его свойства, состояние, хуки и исходный файл, в котором он был отрисован.

Навигация по дереву

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

Просмотр свойств в реальном времени

Когда Вы нажимаете на компонент, его текущие **свойства** отображаются на правой панели. Вы даже можете редактировать значения свойств непосредственно в DevTools, чтобы предварительно просмотреть изменения интерфейса без изменения исходного кода.

Просмотр состояния и хуков

Под свойствами Вы увидите **хуки**, такие как состояние, эффект, мемоизация и ссылка. Разворачивание раздела состояния показывает текущее значение каждого вызова useState в этом компоненте.

Требование к режиму разработки

React DevTools показывает имена компонентов только тогда, когда приложение работает в **режиме разработки**. В производственных сборках React удаляет имена компонентов, чтобы уменьшить размер пакетов, поэтому всегда выполняйте отладку локально с помощью npm start или npm run dev.

Подсветка обновлений

Включите параметр **Подсвечивать обновления при render компонентов** в настройках DevTools (значок шестерёнки). Компоненты, которые повторно отрисовываются, будут мигать цветным наложением, благодаря чему ненужные отрисовки сразу становятся заметны.

Быстрая проверка

Какие две вкладки расширение React DevTools добавляет в инструменты разработчика браузера?

Итоги

Вы установили React DevTools и изучили панель компонентов. Теперь Вы умеете просматривать дерево компонентов, читать свойства и состояние в реальном времени, изменять значения на месте и подсвечивать повторные отрисовки — и всё это без изменения исходного кода.

Следующий урок: **Просмотр деревьев компонентов и свойств** — Вы подробно изучите вложенные иерархии и научитесь читать сложные структуры свойств и состояния на боковой панели DevTools.

Часто задаваемые вопросы

Урок «Установка и открытие React DevTools» бесплатный?

Да — полный текст урока «Установка и открытие React DevTools» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс React Academy, подпишись на CoddyKit PRO. Курс React Academy содержит 4 уроков всего.

Чему я научусь в уроке «Установка и открытие React DevTools»?

Настройте React DevTools в Chrome или Firefox и изучите панель компонентов Ты практикуешь React Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать React Academy?

Предыдущий опыт не требуется. React Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 4.

Сколько времени занимает урок «Установка и открытие React DevTools»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке React Academy?

Да. Каждый урок React Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

← Назад к React Academy