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

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

入門

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

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

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

アプリを検査する

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

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

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

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

追加機能

インライン要素の選択

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

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

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

コンソールのデバッグ

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

最終的な考え

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

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