React Developer Tools(略してDevtools)は、ChromeおよびFirefoxのブラウザー拡張機能であり、開発を支援するReact固有の検査ウィジェットの追加セットを提供します。 React Devtoolsをインストールすると、2つの主要な機能が得られます。コンポーネントツリーのビューと、選択した各コンポーネントの現在の状態と小道具です。

デバッグを始めましょう!

入門

React Devtoolsをインストールするには、選択したブラウザの拡張機能ページ(ChromeまたはFirefox)にアクセスし、インストールボタンを見つけます。

このチュートリアルの画像はChromeからキャプチャされていますが、Firefoxのバージョンに目立った違いはありません。 別のブラウザーを使用している場合、またはReact Nativeアプリを検査する必要がある場合は、ReactDevtoolsをスタンドアロンアプリケーションとして使用できます。 そのここについてもっと読むことができます。

インストール後、拡張機能をさらにセットアップする必要はありません。 ツールキットにアクセスできない場合は、ブラウザを再度開くか、アドレスバーの横にあるReactロゴをクリックして、Devtoolsがページ上のReactインスタンスにアクセスできることを確認してください。

React Devtools button

アプリを検査する

React Devtoolsを開く最も簡単な方法は、ページを右クリックして[検査]を選択することです。

ブラウザの検査ウィンドウで[React]タブを選択すると、アプリのコンポーネント階層のビューが表示されます。

React devtools component hierarchy

ChromeまたはFirefoxの開発者ツールを使用したことがある場合、このビューは少し見覚えがあるはずです。 アプリのコンポーネントツリーの表示は、Elementsタブに表示されるプレーンなHTMLツリーに似ていますが、いくつかの改善点があります。

  • React要素はプレーンHTML要素の横に表示され、選択可能です。
  • 選択したReact要素には、インスタンスの状態と小道具のリアルタイムビューがあります(右側を参照)。 これはデバッグに最適です!
  • 下部のタブは、ツリーの上部から選択した要素までのパスを表します。 この場合、MyComponentdivの子であり、Appの子です。

追加機能

インライン要素の選択

ChromeやFirefoxのプレーンHTML要素選択機能と同様に、React Devtoolsには、ページ上のReactコンポーネントを選択する機能があります。 ブルズアイボタンをクリックして、ページ上の要素を選択します。

Inline select

MyComponentを直接選択することはできませんが、選択ツールを使用することでかなり近づけることができます。

コンポーネントツリーが背が高いか複雑な場合は、検索機能が役に立ちます。

Search

コンソールのデバッグ

React Devtoolsで見落とされがちな機能の1つは、JavaScriptコンソールで選択した要素にアクセスする機能です。 コンポーネントツリーで選択した要素の横にある$rに注意してください。これは、インスタンスへのアクセスに使用できる変数の名前です。

Console access

最終的な考え

Reactアプリケーションのデバッグを苦労させるのと同じことで、他の人にとっても簡単になります。 ほとんどの場合、リアクティブにデバッグするということは、アプリの状態またはビューを綿密に検査することを意味します。

React Devtoolsの機能をマスターすることは、これらのタスクの両方を同時に実行するための非常に効果的な方法です。