React DevTools 入門：Components タブでpropsとstateを確認する

Components タブの開き方

インストールがまだの場合は Chrome ウェブストアから「React Developer Tools」を追加する。

左ペインにアプリのコンポーネント構造がツリー表示されます。

▼ App
  ▼ Header
      Nav
  ▼ Main
    ▼ UserList
        UserCard
        UserCard
        UserCard

コンポーネントをクリックすると右ペインにそのコンポーネントの詳細が表示されます。

右ペインの props セクションに現在渡されているpropsが表示されます。

props
  name: "田中太郎"
  age: 28
  isAdmin: false
  onClick: ƒ ()

関数（ƒ ()）はクリックするとコンソールに出力できます。

useState で管理している状態が hooks セクションに表示されます。

hooks
  State: "loading"
  State: []
  State: null

hooksセクションの値をクリックして直接編集できます。フォームの入力値や表示状態をコードを変えずにデバッグするときに便利です。

hooks
  State: "loading"  ← クリックして "success" に変更 → UIが即時反映

Components タブ左上の インスペクターアイコン（カーソルのアイコン）をクリックして、画面上の要素にカーソルを合わせると対応するコンポーネントがハイライトされます。

「この要素がどのコンポーネントから来ているか」を素早く特定できます。

左ペイン上部の検索ボックスでコンポーネント名を絞り込めます。大規模なアプリで特定のコンポーネントを探すときに便利です。

操作	説明
propsを確認	現在渡されている値をすべて表示
stateを確認・編集	hooksセクションで値を変更できる
ソースに移動	`</>` アイコンでコードの定義元に飛ぶ
コンソールに出力	`$r` でコンソールからコンポーネントインスタンスを参照
レンダリング回数の確認	何回再レンダリングされたかを表示（設定で有効化）

Components タブでコンポーネントを選択した状態でコンソールに $r を入力すると、そのコンポーネントのインスタンスを参照できます。

// コンソールで
$r         // 選択中のコンポーネントのインスタンス
$r.props   // propsを確認

設定（歯車アイコン）→「General」→「Highlight updates when components render」を有効にすると、再レンダリングされたコンポーネントが青〜赤でフラッシュします。

不要な再レンダリングを視覚的に確認できます。詳細な計測は Profiler タブで行います。

Reactアプリのデバッグに特化したブラウザ拡張機能です。通常のブラウザ開発者ツールでは見えないコンポーネントツリー・props・stateをリアルタイムで確認・編集できます。

開発ビルド（npm run dev）でのみ有効で、本番ビルドではアイコンがグレーになり機能しません。

Reactのプロジェクト作成から始める場合は「React + Vite でプロジェクト作成」を参照してください。