意外と知られていないReact Developer Toolsの使い方

React Developer Toolsとは

React Developer ToolsとはReactアプリケーションの開発者向けに作られたブラウザ拡張機能で、Reactコンポーネントのツリー構造やその状態、props、hooksの使用状況を視覚的に確認できるツールです。

このツールを使うと、Reactアプリケーションの内部構造を詳細に調査し、どのコンポーネントがどのようにレンダリングされ、どのようなデータを扱っているかを理解しやすくなります。

Reactで制作するなら必ずインストールするべき必須ツールですが、詳しい使い方に関しては公式サイトには記載されていません。

React Developer Tools – React

この記事ではReact Developer Toolsの使い方について解説しています。

React Developer Toolsのインストール方法

React Developer Toolsはブラウザ拡張機能なので、以下のリンク先の拡張機能のストアのWebサイトからインストールできます。

• Chrome 用にインストール
• Firefox 用にインストール
• Edge 用にインストール

※ Safariは拡張機能が存在しないので、react-devtoolsのnpmパッケージが必要です。

React Developer Toolsの開き方

拡張機能をインストールするとツールバーにReactのアイコンを表示できます。

Reactが使用されているWebページだと色付きで表示され、黒だとproduction build、赤だとdevelopment buildのReactが使用されているWebページになります。

※ たまにアイコンが赤くなっていると使えないとかエラーが発生しているなどと勘違いをされる方がいますが、それは誤解です。

Chromeのデベロッパーツールを開くと、一番右にReact Developer Toolsの「Components」と「Profiler」が確認できます。

Componentsの表示

Componentsの使い方の説明の前に以下のコマンドでReact環境を作成してください。

npm create vite@latest my-react-dev -- --template react-swc-ts

React環境を作成して、npm run devを実行したら、React Developer ToolsのComponentsを表示してみてください。

Components内の「App」の部分をクリックすると下図の内容が表示されます。

propsはApp.tsxだけが使用されているので、現在は何も表示されていません。

hooksはカウンターが画面上に表示されており、const [count, setCount] = useState(0) が書かれているので初期値は0になっています。

「State(count): 0」の部分を「State(count): 9」に編集すると、画面上の値も変わります。

Components設定で「Always parse hook names from source (may be slow)」を有効にしていないと、hooksが「State(count)」ではなく「State」と変数名なしの状態で表示されるので注意が必要です。

Componentsタブの配置位置について

React Developer Toolsはインストール後はデベロッパーツール内の一番右に配置されますが、ドラッグすれば下図のようにComponentsを一番左に配置することができます。

Reactで制作していて頻繁にReact Developer Toolsを使用する方は一番左に配置したほうが良いです。

レンダー箇所のハイライトを有効にする

Componentsの歯車アイコンをクリックして設定一覧を表示して、「Highlight updates when components render.」を有効にすると、コンポーネントを更新した際にレンダーされる箇所がハイライトされます。

次に以下のようにCard.tsxを新規作成して、「className="card"」の部分のHTMLなどをreturn内に貼り付けて、App.tsxでCard.tsxをimportしてみてください。

レンダリングでハイライトされる箇所が「className="card"」の範囲だけになっていることが確認できます。

ハイライトされる箇所はレンダリング回数が多いと黄色や赤色で表示されます。

propsの確認および追加方法

追加でsubtitleのpropsも以下のように追記して見てください。

import Card from './Card'

function App() {
  return (
    <>
      <h1>Vite + React</h1>
      <Card subtitle="Hello world!" />
    </>
  )
}

export default App

import { useState } from 'react'

type Props = {
  subtitle: string
}

function Card({ subtitle }: Props) {
  const [count, setCount] = useState(0)

  return (
    <>
      <p>{subtitle}</p>
      <div className="card">
        <button onClick={() => setCount((count) => count + 1)}>
          count is {count}
        </button>
      </div>
    </>
  )
}

export default Card

Highlight updates when components render sample page

propsが追加されたので、「subtitle: "Hello world!"」が表示されています。

hooksと同様にpropsも編集すると画面に反映されます。

propsのnew entryは以下のように現在親から受け取っていない「myName」のようなpropsを追加して、new entryに「myName: Sato」のように追加することで反映できます・

function Card({ subtitle, myName = 'anonymous' }: Props) {
  const [count, setCount] = useState(0)

  return (
    <>
      <p>{subtitle}</p>
      <div className="card">
        <button onClick={() => setCount((count) => count + 1)}>
          {myName} count is {count}
        </button>
      </div>
    </>
  )
}

rendered byでバージョン確認

Componentsのrendered byには使用されているReactのバージョンが表示されます。

下図の例だと「react-dom@18.3.1」だとわかります。

これを知っておけばpackage.jsonやReact.versionを見なくてもバージョン確認を確認できるので、知っておくと便利です。

Reactは使用するバージョンによって使用可能な機能(フックなど)に違いがあるので、使用バージョンを把握しておくことは重要です。

Suspenseのtrueとfalseを切り替える

ReactでSuspenseを使用すると、fallback属性で読み込み中はloading...を表示して、読み込み完了後にコンポーネントを表示させることができます。

<Suspense fallback={<p>loading...</p>}>
  <SuspendProducts />
</Suspense>

React Developer ToolsではsuspenseのSuspendedでboolean値の切り替えができるので、trueにすれば読込中の表示を確認できます。

Reactでfetchで読み込み時にloading…を表示したサンプル

コンポーネントのコードをSourcesタブで確認する

Componentsの右上に表示されている < > (View source for this element) をクリックすると選択中のコンポーネントのソースコードをSourcesで確認できます。

Open in Editor URLは使用不可

React Developer Toolsには「Open in Editor URL」というコンポーネントを選択して、VS Codeなどでファイルを開ける機能があるのですが、現在は使用不可になっています。

本来であれば、Compoents右上の「Open in Editor URL」のアイコンをクリックすれば開けるはずなのですが、現在のVS Codeでは「Path does not exist」と表示されて開けません。

関連した記事

3分でわかるReactのContextによるグローバルStateの管理方法 React Developer ToolsのHighlight機能にはバグがあるので注意 React使用のTodoタスクツール簡単作成方法(v16対応サンプル付) ReactのuseEffectの依存配列に設定しても初回は実行しない方法