React DevTools

React DevTools — расширение браузера и standalone-инструмент для инспекции дерева компонентов, props, state, hooks и профилирования производительности React-приложений.

Зачем нужно

Без DevTools отладка React-приложения ведётся вслепую — console.log в компонентах. DevTools показывают актуальное дерево компонентов, значения props и state в реальном времени, позволяют имитировать изменения без перезагрузки. Профайлер записывает рендеры и показывает, какой компонент рендерился, сколько раз и почему — незаменимо при оптимизации.

Где используется

  • Отладка props и state при разработке компонентов
  • Поиск причин лишних ре-рендеров (Profiler tab)
  • Инспекция Context значений в дереве
  • Работа с хуками: просмотр текущего состояния useState, useReducer, useRef
  • Standalone-версия для React Native и приложений без доступа к браузеру

Возможности DevTools

Components Tab

▶ App
  ▶ BrowserRouter
    ▶ Routes
      ▶ Route
        ▶ ProductPage
            props: { productId: "42" }
            state: (нет)
          ▶ ProductCard
              props: { product: {id: "42", name: "...", price: 999} }
              state: { isExpanded: false }
              hooks:
                State: false
                Ref: <div#card-42>

Действия в Components Tab:

  • Выбрать компонент → просмотр props и state
  • Редактировать state прямо в панели для проверки UI
  • Правый клик → "Scroll to element" / "Log to console"

Profiler Tab

// Перед профилированием убедитесь, что используете
// development-сборку (production минифицирует имена компонентов)

// В коде можно добавить displayName для анонимных компонентов:
const MemoizedCard = React.memo(function ProductCard(props) {
  return <div>...</div>;
});
MemoizedCard.displayName = 'ProductCard';

Как профилировать:

  1. Открыть DevTools → вкладка Profiler
  2. Нажать запись (круглая кнопка)
  3. Выполнить действие в приложении
  4. Остановить запись
  5. Flamegraph покажет какие компоненты рендерились и сколько мс

Highlight Updates

В настройках DevTools включить "Highlight updates when components render" — компоненты будут подсвечиваться при каждом рендере. Позволяет визуально обнаружить лишние ре-рендеры.

Inspect через код

// Получить Fiber-узел компонента из консоли (для отладки)
// Кликнуть на компонент в Components Tab → в консоли доступна $r

// $r — выбранный компонент
console.log($r.props);    // текущие props
console.log($r.state);    // state (class components)

// Для хуков используйте DevTools напрямую

Частые ошибки

  • Профилируют production-сборку — имена компонентов будут Component, t, e; всегда профилируйте в development или используйте React Profiler API в production.
  • Не используют displayName — HOC и memo оборачивают компоненты, теряя имя; устанавливайте displayName явно.
  • Игнорируют Profiler — визуально приложение работает нормально, но Profiler покажет, что один компонент рендерится 50 раз при одном клике.

Связанные темы

Ресурсы